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=, ' ,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;

巴特西

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

最新文章

热门文章