学习使用easy-ui中combotree插件文档
此文章也是在上一家公司开发过程中,使用easy-ui中的下拉树单选和多选研究后,方便自己以后查阅写的文档,最近无事,整理分享给大家
首先,先说说easy-ui是什么,easy-ui和jqueryui一样,就是jQuery插件组,里面有很多我们常用的插件,比如,table,tableTree,editTable等等,有时间大家去看,
主要easy-ui的文档也有很多,但是都是这抄袭那粘贴,有时自己想问的,想要的答案没有,当时研究这个combotree时,查看了他的源码(其实只能看懂一点点),所以写了这这个文档
大家先去下载easy-ui . 百度 google都可以..
combotree 是由combo和tree 结合的插件,重写了他们的相关方法
大家看看combotree效果图,
单选: 多选 :
看到了吧,还不错..
其实jqueryui和easy-ui都支持json格式,我这的数据也都是json格式字符串从后台传递过来的
单选:
需要把input表单元素改为下面的形式:
多选:
此例为只有叶子节点才有checkbox ,如改成cascadeCheck = “true” 则,每一节点都有checkbox,在jquery.easyui.min.js中的2000行可以了解
Animate 是控制显示子节点的速度。在jquery.easyui.min.js中的2000行可以了解
下面我们看看,怎么在编辑页面初始化数据:
Industry是组合框的id,我们需要使用页面元素调用combotree是组合框函数头来做相关处理,
onBeforeExpand:function(node) 这个是重写combotree的函数,函数作用是在点击节点前做处理;
这个是为了实现异步加载子节点,为了实现异步加载子节点,在后台拼接Json数据时需要在节点属性加:state:\"closed\" ,$('#industry').combotree("tree").tree
("options").url 是访问后台获取子节点的url地址;
还有其他的函数,比如
onafterExpand:function(node): 点击节点后的处理,可以参考ztree的有关函数
onSelect:function(node)
更多combotree的方法:
方法
方法继承至 combo,以下是combotree新增和重写的方法.
Name | Parameter | Description |
---|---|---|
options | none | 返回 options 对象. |
tree | none | 返回树(tree)对象. 以下示例展示如何得到选择的树节点(node). var t = $('#cc').combotree('tree'); // 得到树对象 var n = t.tree('getSelected'); // 得到选择的节点 这里经过实践测试应该使用t.tree('getChecked'); alert(n.text); |
loadData | data | 加载本地tree数据. 示例代码: $('#cc').combotree('loadData', [{ id: 1, text: 'Languages', children: [{ id: 11, text: 'Java' },{ id: 12, text: 'C++' }] }]); |
reload | url | 重新请求远程服务器端数据. 传入'url'参数重写原始的URL值. |
clear | none | 清除组件值. |
setValues | values | 设置组件值数组. 示例代码: $('#cc').combotree('setValues', [1,3,21]); |
setValue | value | 设置组件值. 示例代码: $('#cc').combotree('setValue', 6); |