树控件 Tree

Constructor

Implements: Widget

Tutorials: 控件对象使用快速入门

可设置的属性

Name	Type	Default	Description
name	String		控件的名字，唯一标志
title	String		控件title
hidden	Boolean		隐藏
idField	String	id	数据中主键的field
pidField	String	pId	数据中父节点的field
nameField	String	name	数据中节点名称的field
data	Array		数据
showLine	Boolean	false	是否显示连线
checkbox	Boolean	false	是否显示复选框 复选框/单选框只能启用一个
radio	Boolean	false	是否显示单选框 复选框/单选框只能启用一个
radioType	String	all	radio分组范围 all整个树 level同级节点 只在设置radio=true的时候生效
showIcon	Boolean	false	是否显示图标
checkChild	Boolean	false	勾选是否影响子节点
checkParent	Boolean	false	勾选是否影响父节点
multiSelect	Boolean		是否可以多选
customButton	Object Array.<Object>		设置自定义按钮
checkOnClick	Boolean		点击整个节点都可以改变check状态

设置自定义按钮

Name	Type	Description
name	String	按钮名称，唯一标识
iconCls	String	按钮图标
handler(node){}	function	按钮点击回调，参数为node对象
test(node){}	function	按钮显示回调，参数为node对象， return false可以不显示按钮

可读取的属性

Name	Type	Default	Description
name	String		控件的名字，唯一标志
title	String		控件title
hidden	Boolean		隐藏
idField	String		数据中主键的field
pidField	String		数据中父节点的field
nameField	String		数据中节点名称的field
data	Array		数据
showLine	Boolean		是否显示连线
checkbox	Boolean		是否显示复选框
radio	Boolean		是否显示单选框
radioType	String	all	radio分组范围 all整个树 level同级节点 只在设置radio=true的时候生效
showIcon	Boolean		是否显示图标
checkChild	Boolean		勾选是否影响子节点
checkParent	Boolean		勾选是否影响父节点
multiSelect	Boolean		是否可以多选
customButton	Object Array.<Object>		设置自定义按钮
selectedNodes	Array		获取选中节点
checkedNodes	Array		获取勾选节点
checkOnClick	Boolean		点击整个节点都可以改变check状态

方法

intoView

Description： 把控件移动到页面可视范围

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('intoView');

getChecked

Description： 获取勾选的节点数据

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
var checked = widget.doMethod('getChecked');

checkAll

Description： 勾选所有节点

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('checkAll');

uncheckAll

Description： 取消勾选所有节点

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('uncheckAll');

checkNode

Description： 勾选指定节点

调用参数

Name	Type	Description
node	String｜Object	接受参数为：节点id(String类型)或节点数据对象(Object类型)

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('checkNode' , 'nodeid');

uncheckNode

Description： 取消勾选指定节点

调用参数

Name	Type	Description
node	String｜Object	接受参数为：节点id(String类型)或节点数据对象(Object类型)

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('uncheckNode' , 'nodeid');

getNodeById

Description： 通过节点id查找节点数据

调用参数

Name	Type	Description
id	String	节点id

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
var node = widget.doMethod('getNodeById' , 'nodeid');

appendNode

Description： 新增节点

调用参数

Name	Type	Attributes	Default	Description
node	Object			新增节点数据
parentNode	Object	optional	null	父节点数据

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
var node = widget.doMethod('appendNode' , {
    id : 'newNode',
    pId : 'parentNode',
    text : '新增节点'
});

removeNode

Description： 删除节点

调用参数

Name	Type	Attributes	Default	Description
node	String｜Object			接受参数为 节点id(String类型)或者 节点数据对象(Object类型)
callbackFlag	Boolean	optional	true	是否触发事件

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('removeNode' , 'nodeid');

ExpandAll

Description： 全部展开

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('expandAll');

collapseAll

Description： 全部收起

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('collapseAll');

selectNode

Description： 选中一个节点

调用参数

Name	Type	Description
node	String｜Object	接受参数为 节点id(String类型)或者 节点数据对象(Object类型)

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('selectNode' , 'nodeid');

unselectNode

Description： 取消选中一个节点

调用参数

Name	Type	Description
node	String｜Object	接受参数为 节点id(String类型)或者 节点数据对象(Object类型)

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('unselectNode' , 'nodeid');

ExpandNode

Description： 展开一个节点

调用参数

Name	Type	Attributes	Default	Description
node	String｜Object			接受参数为 节点id(String类型)或者 节点数据对象(Object类型)
sonSign	Boolean	optional	false	是否影响后代节点
focus	Boolean	optional	true	是否获取焦点
callbackFlag	Boolean	optional	false	是否触发对应事件

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('expandNode' , 'nodeid');

collapseNode

Description： 闭合一个节点

调用参数

Name	Type	Attributes	Default	Description
node	String｜Object			接受参数为 节点id(String类型)或者 节点数据对象(Object类型)
sonSign	Boolean	optional	false	是否影响后代节点
focus	Boolean	optional	true	是否获取焦点
callbackFlag	Boolean	optional	false	是否触发对应事件

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.doMethod('collapseNode' , 'nodeid');

事件

beforeExpand

Description： 节点展开前

Name	Type	Description
node	Object	节点数据对象

返回值： String this.returnValue=false 可以阻止展开

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('beforeExpand' , function(node){
    //如果节点id以'test'开头则禁止展开
    if(node[this.get('idField')].indexOf('test') === 0){
        this.returnValue = false;
    }
});

Expand

Description： 节点展开

回调函数参数

Name	Type	Description
e	Object	js事件对象
node	Object	节点数据对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('expand' , function(e , node){
    vjap.alert('节点展开:' + node[this.get('nameField')]);
});

beforeCollapse

Description： 节点折叠前

回调函数参数

Name	Type	Description
node	Object	节点数据对象

返回值： String this.returnValue=false 可以阻止折叠

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('beforeCollapse' , function(node){
    //如果节点id以'test'开头则禁止折叠
    if(node[this.get('idField')].indexOf('test') === 0){
        this.returnValue = false;
    }
});

collapse

Description： 节点折叠

回调函数参数

Name	Type	Description
e	Object	js事件对象
node	Object	节点数据对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('collapse' , function(e , node){
    vjap.alert('节点折叠:' + node[this.get('nameField')]);
});

beforeCheck

Description： 节点勾选前

回调函数参数

Name	Type	Description
node	Object	节点数据对象

返回值： String this.returnValue=false 可以阻止勾选

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('beforeCheck' , function(node){
    //如果节点id以'test'开头则禁止勾选
    if(node[this.get('idField')].indexOf('test') === 0){
        this.returnValue = false;
    }
});

check

Description： 节点勾选

回调函数参数

Name	Type	Description
e	Object	js事件对象
node	Object	节点数据对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('check' , function(e , node){
    vjap.alert('节点勾选:' + node[this.get('nameField')]);
});

beforeClick

Description： 单击前

回调函数参数

Name	Type	Description
node	Object	节点数据对象

返回值： String this.returnValue=false 可以阻止单击事件触发

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('beforeClick' , function(node){
    //如果节点id以'test'开头则阻止单击事件触发
    if(node[this.get('idField')].indexOf('test') === 0){
        this.returnValue = false;
    }
});

click

Description： 单击

回调函数参数

Name	Type	Description
e	Object	js事件对象
node	Object	节点数据对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('click' , function(e , node){
    vjap.alert('点击节点:' + node[this.get('nameField')]);
});

beforeDblclick

Description： 双击前 |

回调函数参数

Name	Type	Description
node	Object	节点数据对象

返回值： String this.returnValue=false 可以阻止双击事件触发

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('beforeDblclick' , function(node){
    //如果节点id以'test'开头则阻止双击事件触发
    if(node[this.get('idField')].indexOf('test') === 0){
        this.returnValue = false;
    }
});

dblclick

Description： 双击

回调函数参数

Name	Type	Description
e	Object	js事件对象
node	Object	节点数据对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('dblclick' , function(e , node){
    vjap.alert('双击节点:' + node[this.get('nameField')]);
});

beforeRightClick

Description： 右键单击前

回调函数参数

Name	Type	Description
node	Object	节点数据对象

返回值： String this.returnValue=false 可以阻止右键单击事件触发

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('beforeRightClick' , function(node){
    //如果节点id以'test'开头则阻止右键单击事件触发
    if(node[this.get('idField')].indexOf('test') === 0){
        this.returnValue = false;
    }
});

rightClick

Description： 右键单击

回调函数参数

Name	Type	Description
e	Object	js事件对象
node	Object	节点数据对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('rightClick' , function(e , node){
    vjap.alert('右键单击:' + node[this.get('nameField')]);
});

beforeMouseDown

Description： 鼠标按下前

回调函数参数

Name	Type	Description
node	Object	节点数据对象

返回值： String this.returnValue=false 可以阻止鼠标按下事件触发

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('beforeMouseDown' , function(node){
    //如果节点id以'test'开头则阻止鼠标按下事件触发
    if(node[this.get('idField')].indexOf('test') === 0){
        this.returnValue = false;
    }
});

mouseDown

Description： 鼠标按下

回调函数参数

Name	Type	Description
e	Object	js事件对象
node	Object	节点数据对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('mouseDown' , function(e , node){
    vjap.alert('鼠标按下:' + node[this.get('nameField')]);
});

beforeMouseUp

Description： 鼠标弹起前

回调函数参数

Name	Type	Description
node	Object	节点数据对象

返回值： String this.returnValue=false 可以阻止鼠标谈起事件触发

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('beforeMouseUp' , function(node){
    //如果节点id以'test'开头则阻止鼠标弹起事件触发
    if(node[this.get('idField')].indexOf('test') === 0){
        this.returnValue = false;
    }
});

mouseUp

Description： 鼠标弹起

回调函数参数

Name	Type	Description
e	Object	js事件对象
node	Object	节点数据对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('mouseUp' , function(e , node){
    vjap.alert('鼠标弹起:' + node[this.get('nameField')]);
});

beforeRemove

Description： 删除节点前事件

回调函数参数

Name	Type	Description
node	Object	节点数据对象

返回值： String this.returnValue=false 可以阻止删除

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('beforeRemove' , function(node){
    //如果节点id以'test'开头则阻止删除
    if(node[this.get('idField')].indexOf('test') === 0){
        this.returnValue = false;
    }
});

remove

Description： 删除节点事件

回调函数参数

Name	Type	Description
e	Object	js事件对象
node	Object	节点数据对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('remove' , function(e , node){
    vjap.alert('删除节点:' + node[this.get('nameField')]);
});

load

Description： 载入数据事件 可以通过此事件更改数据

回调函数参数

Name	Type	Description
data	Object	原始数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('load' , function(data){
    //给每条数据增加一个名为exval的额外属性
    for(var i=0 ; i<data.length ; i++){
        data[i].exval = 'onLoad';
    }
});

hidden

Description： 隐藏事件（隐藏显示触发 回调参数为隐藏状态）

回调函数参数

Name	Type	Description
hiddenState	Boolean	隐藏状态true为隐藏、false为取消隐藏

绑定举例：

var widget = vjsp.Parser.getWidgetByName('tree');
widget.on('hidden' , function(hiddenState){
    if(hiddenState){
        vjsp.alert('控件被隐藏');
    }else{
        vjsp.alert('控件取消隐藏');
    }
});

tree控件大部分beforeXXX事件可以通过this.returnValue=false 阻止对应的事件（load除外）