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;