学习使用easy-ui中combotree插件文档

学习使用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表单元素改为下面的形式：

[html]  view plain  copy

 

1. <input id="wardObjType" class="easyui-combotree"  value="" required="true" style="width:200px;"/>  

 

多选：

[html]  view plain  copy

 

1. <select id="industry" class="easyui-combotree" multiple="true" onlyLeafCheck="true"  animate="true"  style="width:280px;"></select>  

 

此例为只有叶子节点才有checkbox ,如改成cascadeCheck = “true” 则，每一节点都有checkbox，在jquery.easyui.min.js中的2000行可以了解

 

Animate 是控制显示子节点的速度。在jquery.easyui.min.js中的2000行可以了解

 

 

下面我们看看，怎么在编辑页面初始化数据：

[html]  view plain  copy

 

1. $('#industry').combotree({                     

[html]  view plain  copy

 

1.    url: "<%=basePath%>wardTree/ward!getIndustryList.action?parentId=-1&type=0",    
2.    onBeforeExpand:function(node) {   
3.     $('#industry').combotree("tree").tree("options").url = "<%=basePath%>wardTree/ward!getIndustryList.action?parentId=" + node.id+"&type=0";  
4.    }  
5. });   

[html]  view plain  copy

 

1.    

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);