uniGUI试用笔记（十四）TUniTreeView的CheckBox

TUniTreeView目前版本没有封装CheckBox功能，所以需要手工处理，幸好0.99版提供部分代码了，修改过程如下：

1、uniGUIAbstractClasses.pas单元中修改基类TUniTreeNode，增加Checked属性，代码如下：

TUniTreeNode  = class(TPersistent)
  private
    FChecked: Boolean;
    ...
  public
    property Checked : Boolean read FChecked write FChecked;
  end;

2、uniGUISource\uniTreeView.pas单元中修改TUniTreeView类，增加对CheckBox的支持属性，代码如下：

TUniTreeView  = class(TUniControl, IUniTreeView)
  private
    FUseCheckBox : Boolean;
  ...
  published
    property UseCheckBox : Boolean read FUseCheckBox write FUseCheckBox ;
end;

3、uniGUISource\uniTreeView.pas单元中修改TWebTreeNode类，对其JS代码生成部分加入对CheckBox的支持，代码如下：

function TWebTreeNode.ToJSON(AExpanded: Boolean = False): string;
var
  ImgURL : string;
  I : Integer;
begin
  ImgURL:=GetImageUrl(FImageIndex);
  Result:=‘{id:"‘+IntToStr(FID)+‘"‘+
          IfThen(Text<>‘‘, ‘, text:‘+ StrToJS(Text))+
          //如果TreeView支持则显示CheckBox，缺省False====================
          IfThen(FParentTree.UseCheckBox, ‘, checked: ‘+ IfThen(Checked, ‘true‘, ‘false‘))+
          //=================================================
          ImgURL+
          IfThen(FExpanded or AExpanded, ‘,expanded:true‘)+
          IfThen(ChildNodes.Count=0, ‘ ,leaf:true‘)+
          IfThen(not FEnabled, ‘ ,disabled:true‘);
  ...
end;

4、uniGUISource\uniTreeView.pas单元中修改TUniTreeView类的WebCreate方法，对其JS代码生成部分加入对CheckBox的处理，代码如下：

procedure TUniTreeView.WebCreate;
begin
  ...
  //加入对CheckBox的处理代码
  JSCode(
    ‘changeChecked:function(node, checked){‘ +
      //如果节点是一个数组，如node.childNodes，则循环对每一个子节点递归处理
      ‘if(Ext.isArray(node)){‘+
      ‘  for(var i=node.length-1;i>=0;i--) ‘+
      ‘  this.changeChecked(node[i], checked); }‘+
    ‘else{‘+
       //判断checked属性是否存在，如果存在则改变
      ‘if(node.data.checked!=null) ‘+
      ‘{node.set("checked",checked);}‘+
      //如果该节点是一个父节点，则递归调用处理下级节点
      ‘if(node.childNodes.length>0)‘+
        ‘{this.changeChecked(node.childNodes, checked);}‘+
      ‘}‘ + //for else
    ‘}‘); //for function
end;

5、在TuniTreeView的ClientEvents属性中，设置ExtEvents中的checkchange事件，其代码如下：

function checkchange(node, checked, eOpts)
{
  if (node.childNodes.length > 0)
    this.changeChecked(node.childNodes, checked);
}

这样一来，基本达到效果要求，也存在以下问题需要进一步解决：

1、界面上发生变动了，但是Node的Checked属性没有变化，也没有触发相关事件；

2、第5步应该在控件的类中解决，但是没有找到解决办法，目前暂时写在窗体控件属性中。