树

简介

一种树形控件, 提供以下功能:
1.JSON装载数据，可静态装载;
2.异步树;
3.支持节点图标（更换）;
4.事件支持;
5.支持多选功能(可后续支持);
6.节点的编辑和拖动;
7.动态的增删改查节点操作;

使用方法

1. 静态框架使用方法仅EAS7.5版本
<wafctrl:tree id="id" name="name" />
2. JS动态创建EAS8.0+
var value='[
		{id:0, pId:00, name:"treeRootName", open:true},'+ 
        '{"id":1,"pId":0,"name":"父节点1 - 展开","open":true},'+
            '{"id":11,"pId":1,"name":"父节点11 - 折叠"},'+
                '{"id":111,"pId":11,"name":"叶子节点111"},'+
                '{"id":112,"pId":11,"name":"叶子节点112"},'+
                '{"id":113,"pId":11,"name":"叶子节点113"},'+
                '{"id":114,"pId":11,"name":"叶子节点114"},'+
            '{"id":12,"pId":1,"name":"父节点12 - 折叠"},'+
                '{"id":121,"pId":12,"name":"叶子节点121"},'+
                '{"id":122,"pId":12,"name":"叶子节点122"},'+
                '{"id":123,"pId":12,"name":"叶子节点123"},'+
                '{"id":124,"pId":12,"name":"叶子节点124"},'+
            '{"id":13,"pId":1,"name":"父节点13 - 没有子节点","isParent":true},'+
       '{"id":2,"pId":0,"name":"父节点2 - 折叠"},'+
                '{"id":21,"pId":2,"name":"父节点21 - 展开","open":true},'+
                '{"id":211,"pId":21,"name":"叶子节点211"},'+
                '{"id":212,"pId":21,"name":"叶子节点212"},'+
                '{"id":213,"pId":21,"name":"叶子节点213"},'+
                '{"id":214,"pId":21,"name":"叶子节点214"},'+
            '{"id":22,"pId":2,"name":"父节点22 - 折叠"},'+
                '{"id":221,"pId":22,"name":"叶子节点221"},'+
                '{"id":222,"pId":22,"name":"叶子节点222"},'+
                '{"id":223,"pId":22,"name":"叶子节点223"},'+
                '{"id":224,"pId":22,"name":"叶子节点224"},'+
            '{"id":23,"pId":2,"name":"父节点23 - 折叠"},'+
                '{"id":231,"pId":23,"name":"叶子节点231"},'+
                '{"id":232,"pId":23,"name":"叶子节点232"},'+
                '{"id":233,"pId":23,"name":"叶子节点233"},'+
                '{"id":234,"pId":23,"name":"叶子节点234"},'+
       '{"id":3,"pId":0,"name":"父节点3 - 没有子节点","isParent":true}]';
var options={
	id:"tree001",
	value:value,
	width:null,
	height:null,
	hidden:false,
	style:null,
	tabindex:0,
	tagClass:null,
	autoParam:["id","name"],
	isRootVisible:false,
	parentName:"root",
	groupName:"0",
	treeEditUipk:"uipk",
	selectedMulti:true,
};
var dom =waf.createDOM("tree",options);
waf.appendDOM(waf("body"),dom);
waf.initComponent("tree",options,dom);
3. 通用DOM创建EAS8.0+
<ul id="id" class="ztree" ctrlrole="tree" data-domcreated="true"></ul>
<!--DOM创建好之后，使用js初始化控件-->
waf("#id").wafTree("option");
4. 方法&事件使用EAS8.0+
//调用方法
waf("#id").wafTree('method', parameter...);
//eg:获取和设置值
waf("#id").wafTree("option",property);
waf("#id").wafTree("option",property,value);
//eg:更改事件
waf("#id").wafTree("option","onchange",fn);

属性说明

id String 缺省值: null EAS7.5+

树控件ID,用于唯一标识.

style String 缺省值: null EAS7.5+

设置树的式样数据格式.如:style=’background-color:blue’;

tagClass String 缺省值: null EAS7.5+

设置树的式样类数据格式.如:tagClass=’ui-tree-noborder’;

tabindex Number 缺省值: null EAS7.5+

设置树的tabindex值，用于确定Tab的顺序.

width Number 缺省值: null EAS7.5+

设置树的宽度.

height Number 缺省值: null EAS7.5+

设置树的高度.

hidden Boolean 缺省值: false EAS7.5+

设置树是否不可见.

hidden Boolean 缺省值: false EAS7.5+

设置树是否不可见.

isRootVisible Boolean 缺省值: true 不可在运行期改变EAS7.5+

是否显示根节点.

rootName String 缺省值: “根节点” 不可在运行期改变EAS7.5+

根节点名称.

queryPK String 缺省值: “” 不可在运行期改变EAS7.5+

以Query方式定义树的数据源.

serverActionBinding String 缺省值: “” 不可在运行期改变EAS7.5+

以Action方式定义树的数据源.

url String 缺省值: “” 不可在运行期改变EAS7.5+

以url方式定义树的数据源.

filterItems String 缺省值: “” 不可在运行期改变EAS7.5+

定义树的过滤条件.

sorterItems String 缺省值: “” 不可在运行期改变EAS7.5+

定义树的排序条件.

parentName String 缺省值: parent 不可在运行期改变EAS7.5+

定义树的父节点属性名.

groupName String 缺省值: treeid 不可在运行期改变EAS7.5+

定义树的分组属性名.

treeEditUipk String 缺省值: treeid 不可在运行期改变EAS7.5+

定义树的分组编辑页面uipk.

方法说明

addNodes 参数: (parentNode,newNodes,isSilent) 返回值类型: Json EAS7.5+

添加节点[参考样例].

  • 参数说明:
            - parentNodeJSON 指定的父节点，如果增加根节点，请设置为null即可
            - newNodes 需要增加的节点数据 JSON对象集合，数据只需要满足 tree 的节点数据必需的属性即可
            -isSilent 设定增加节点后是否自动展开父节点. isSilent = true 时，不展开父节点，其他值或缺省状态都自动展开
  • 返回值说明:
            - tree 最终添加的节点数据集合. 注意：返回值中的数据对象是newNodes被clone后的，所以绝对不相等！

updateNode 参数: (treeNode, checkTypeFlag) 返回值类型: Json EAS7.5+

更新某节点数据，主要用于该节点显示属性的更新[参考样例].
1、可针对 name、target、 url、icon、 iconSkin、checked等这几个用于显示效果的参数进行更新，其他用于 treeNodes 的参数请不要随意更新，对于展开节点，还请调用 expandNode方法，因此请勿随意修改 open 属性.
2、用此方法修改 checked 勾选状态不会触发 beforeCheck / onCheck 事件回调函数。

  • 参数说明:
            - treeNode 指定需要更新的节点 JSON 数据，请务必保证此节点数据对象.
            -checkTypeFlagBoolean
                checkTypeFlag = true 表示按照 chkboxType 属性进行父子节点的勾选联动操作
                checkTypeFlag = false 表示只修改此节点勾选状态，无任何勾选联动操作
                当 checkable = true 且 chkStyle = “checkbox” 时才有效
                不影响父子节点中 treeNode.nochecked = true 的节点
                isSilent = true 时，不展开父节点，其他值或缺省状态都自动展开
  • 返回值说明:
            - 无

expandAll 参数: (expandFlag) 返回值类型: Json EAS7.5+

展开 / 折叠 全部节点[参考样例].

  • 参数说明:
            - expandFlag 指定需要更新的节点 JSON 数据，请务必保证此节点数据对象.
            -expandFlag
                true 表示 展开 全部节点
                false 表示 折叠 全部节点
  • 返回值说明:
            - 表示最终实际操作情况:true 表示 展开 全部节点 ​false 表示 折叠 全部节点

expandNode 参数: (treeNode, expandFlag, sonSign, focus, callbackFlag) 返回值类型: Json EAS7.5+

展开 / 折叠 指定的节点. 执行此方法可以触发 beforeExpand / onExpand 或 beforeCollapse / onCollapse 事件回调函数.[参考样例].

  • 参数说明:
            - expandFlag 指定需要更新的节点 JSON 数据，请务必保证此节点数据对象.
            -treeNodeJSON 需要 展开 / 折叠 的节点数据
            -expandFlag
                true 表示 展开 节点
                false false 表示 折叠 节点
                省略此参数，则根据对此节点的展开状态进行 toggle 切换
            -sonSignBoolean
                true 表示 全部子孙节点 进行与 expandFlag 相同的操作
                false 表示 只影响此节点，对于其 子孙节点无任何影响
                省略此参数，等同于 false
            -focusBoolean
                true 表示 展开 / 折叠 操作后，通过设置焦点保证此焦点进入可视区域内
                false 表示 展开 / 折叠 操作后，不设置任何焦点
                省略此参数，等同于 true
            -callbackFlagBoolean
                true 表示执行此方法时触发 beforeCheck & onCheck 事件回调函数
                false 表示执行此方法时不触发事件回调函数
                省略此参数，等同于 false
  • 返回值说明:
            - 最终实际操作情况
                true 表示 展开 节点
                false 表示 折叠 节点
                null 表示 不是父节点

getNodesByParam 参数: (key, value, parentNode) 返回值类型: Array EAS7.5+

根据节点数据的属性搜索，获取条件完全匹配的节点数据 JSON 对象集合.[参考样例].

  • 参数说明:
            - key 需要精确匹配的属性名称.
            - value 需要精确匹配的属性值，可以是任何类型，只要保证与 key 指定的属性值保持一致即可.
            - parentNode 可以指定在某个父节点下的子节点中搜索 忽略此参数，表示在全部节点中搜索.
  • 返回值说明:
            - Array(JSON)匹配精确搜索的节点数据集合

getNodesByParamFuzzy 参数: (key, value, parentNode) 返回值类型: Array EAS7.5+

根据节点数据的属性搜索，获取条件模糊匹配的节点数据 JSON 对象集合.[参考样例].

  • 参数说明:
            - key 需要精确匹配的属性名称.
            - value 模糊匹配只能针对 String 类型的数据.
            - parentNode 可以指定在某个父节点下的子节点中搜索 忽略此参数，表示在全部节点中搜索.
  • 返回值说明:
            - Array(JSON)匹配精确搜索的节点数据集合

getSelectedNodes 参数: (无) 返回值类型: Array(JSON) EAS7.5+

获取 tree 当前被选中的节点数据集合[参考样例].

  • 参数说明:
            - 无
  • 返回值说明:
            - Array(JSON)当前被选中的节点数据集合

reAsyncChildNodes 参数: (parentNode, reloadType, isSilent) 返回值类型: 无 EAS7.5+

强行异步加载父节点的子节点[参考样例].

  • 参数说明:
            - 指定需要异步加载的父节点 JSON 数据
                - 1、parentNode = null 时，相当于从根节点 Root 进行异步加
                - 2、parentNode.isParent = false 时，不进行异步加载
                - 3、请务必保证此节点数据对象 是 tree 内部的数据对象
            - reloadType值的类型为String
                - 1、reloadType = “refresh” 表示清空后重新加载
                - 2、reloadType != “refresh” 时，表示追加子节点处理
            - isSilentBoolean 设定异步加载后是否自动展开父节点，isSilent = true 时，不展开父节点，其他值或缺省状态都自动展开
  • 返回值说明:
            - 无

事件说明

beforeAsync 参数: (treeId,treeNode) EAS7.5+

用于捕获异步加载之前的事件回调函数，tree根据返回值确定是否允许进行异步加载. 参考样例

  • 参数说明:
            - treeId 对应tree的treeId
            - treeNode 进行异步加载的父节点.如果针对根进行异步加载时，treeNode = null
  • 返回值说明:
            - false tree将不进行异步加载，也无法触发onAsyncSuccess/onAsyncError事件回调函数
            - true 反之亦然.

onAsyncError 参数: (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) EAS7.5+

用于捕获异步加载出现异常错误的事件回调函数.

  • 参数说明:
            - event js event 对象
            - treeId 对应 tree 的 treeId
            - treeNode 进行异步加载的父节点.如果针对根进行异步加载时，treeNode = null
            - XMLHttpRequest 标准 XMLHttpRequest 对象，请参考 JQuery API 文档
            - textStatus 请求状态：success，error，请参考 JQuery API 文档
            - errorThrown 只有当异常发生时才会被传递，请参考 JQuery API 文档

onAsyncSuccess 参数: (event, treeId, treeNode, msg) EAS7.5+

用于捕获异步加载出现异常错误的事件回调函数. 参考样例

  • 参数说明:
            - event js event 对象
            - treeId 对应 tree 的 treeId
            - treeNode 进行异步加载的父节点.如果针对根进行异步加载时，treeNode = null
            - msg String / Object 异步获取的节点数据字符串，主要便于用户调试使用。实际数据类型会受 setting.async.dataType 的设置影响

beforeCheck 参数: (treeId, treeNode) EAS7.5+

用于捕获 勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选. 参考样例

  • 参数说明:
            - treeId 对应 tree 的 treeId
            - treeNode 进行 勾选 或 取消勾选 的节点 JSON 数据对象
  • 参数说明:
            - false，将不会改变勾选状态，并且无法触发 onCheck 事件回调函数
            - true，反之亦然

beforeClick 参数: (treeId, treeNode, clickFlag) EAS7.5+

于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作 参考样例

  • 参数说明:
            - treeId 对应 tree 的 treeId
            - treeNode 被单击的节点 JSON 数据对象
            - clickFlag 节点被点击后的选中操作类型
  • 参数说明:
            - false，将不会选中节点，也无法触发 onClick 事件回调函数
            - true，反之亦然
clickFlag selectedMulti event.ctrlKey isSelected 选中操作
1 true false false :普通选中
1 true false true :普通选中
2 true true false :追加选中
0 true true true :取消选中
1 false false false :普通选中
1 false false true :普通选中
1 false true false :普通选中
0 false true true :取消选中

beforeCollapse 参数: (treeId, treeNode) EAS7.5+

用于捕获父节点折叠之前的事件回调函数，并且根据返回值确定是否允许折叠操作 参考样例

  • 参数说明:
            - treeId 对应 tree 的 treeId
            - treeNode 被单击的节点 JSON 数据对象
  • 参数说明:
            - false，tree 将不会折叠节点，也无法触发 onCollapse 事件回调函数
            - true，反之亦然

onExpand 参数: (event, treeId, treeNode) EAS7.5+

用于捕获节点被展开的事件回调函数 参考样例

  • 参数说明:
            - event js event 对象
            - treeId 对应 tree 的 treeId
            - treeNode 被单击的节点 JSON 数据对象

onCollapse 参数: (event, treeId, treeNode) EAS7.5+

用于捕获节点被折叠的事件回调函数 参考样例

  • 参数说明:
            - event js event 对象
            - treeId 对应 tree 的 treeId
            - treeNode 被单击的节点 JSON 数据对象

onCheck 参数: (event, treeId, treeNode) EAS7.5+

用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数 参考样例

  • 参数说明:
            - event js event 对象
            - treeId 对应 tree 的 treeId
            - treeNode 被单击的节点 JSON 数据对象
  • 参数说明:
            - false，将不会改变勾选状态，并且无法触发 onCheck 事件回调函数
            - true，反之亦然

onClick 参数: (event, treeId, treeNode, clickFlag) EAS7.5+

用于捕获节点被点击的事件回调函数 参考样例

  • 参数说明:
            - event js event 对象
            - treeId 对应 tree 的 treeId
            - treeNode 被单击的节点 JSON 数据对象
            - clickFlag 节点被点击后的选中操作类型
clickFlag selectedMulti event.ctrlKey isSelected 选中操作
1 true false false :普通选中
1 true false true :普通选中
2 true true false :追加选中
0 true true true :取消选中
1 false false false :普通选中
1 false false true :普通选中
1 false true false :普通选中
0 false true true :取消选中

beforeDblClick 参数: (treeId, treeNode) EAS7.5+

用于捕获 tree 上鼠标双击之前的事件回调函数，并且根据返回值确定触发 onDblClick 事件回调函数 参考样例

  • 参数说明:
            - treeId 对应 tree 的 treeId
            - treeNode 被单击的节点 JSON 数据对象
  • 参数说明:
            - false，tree 将不会折叠节点，也无法触发 onCollapse 事件回调函数
            - true，反之亦然

样例集合

  1. 基本树:
  2. 属性及动态修改:
  3. 异步加载:
  4. 展开/折叠父节点:
  5. 查找节点:
  6. Checkbox演示:
  7. Checkbox勾选统计:
  8. 用方法勾选 checkbox:
  9. 拖拽节点:
  10. 节点的修改删除:
  11. 多棵树之间交互:
  12. 绑定一个根节点(综合应用):
  13. 保持展开单一路径(综合应用):
  14. 带checkbox的下拉菜单(综合应用):
  15. 动态化: