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
  inherited;
  ...

  //加入对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

  //增加一个对Check变化的处理函数
  JSAddListener('checkchange',
    //构建处理函数
    JSFunction(
      //函数的参数列表
      'node, checked, eOpts',
      //如果有下级节点，则调用函数递归处理
      'if (node.childNodes.length > 0) '+
      'this.changeChecked(node.childNodes, checked);'+
      //向服务器发送消息，并传递参数
      'ajaxRequest(' + Self.JSName + ', "checkchange", ["text="+node.get("text") ,"checked="+checked]);')
    );
end;

5、在TuniTreeView的JSEventHandler事件中捕捉事件名称，并进行处理，代码如下：

procedure TUniTreeView.JSEventHandler(AEventName: string; AParams: TUniStrings);
  ...
  //捕获客户端发送的消息
  else if AEventName= 'checkchange' then
  begin
    //获取参数
    ndtext := AParams['text'].AsString;
    ndchecked := SameText(AParams['checked'].AsString, 'true');
    //查找节点
    nd := Items.FindNodeByCaption(ndtext);
    //处理节点Checked状态
    if Assigned(nd) then
      nd.Checked := ndchecked;
  end;
end;

这样一来，基本达到效果要求。前期处理过程中一直无法捕获到客户端发送的消息，最后处理好了，需要注意：

客户端JS代码需要通过 ajaxRequest向服务器发送消息，第一个参数是控件的JS名称，所以用Self.JSName，第二个参数是消息名称，第三个是传递的参数数组列表，通过node.get("text")方法，获取congfig options中的内容，而不是直接用node.text;