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;