使用ztree来代替Extjs的下拉树

来源：互联网发布：链表逆序 java 递归编辑：程序博客网时间：2024/05/17 23:40

2年的工作中，下拉树用的地方实在太多了，选区域、还有角色权限分配，都离不开下拉树。也尝试过不少框架的下拉树，jqueryeasyui、extjs等原装的下拉树复杂不说，而且不够强大。于是尝试第三方下拉树组件，ztree果然不错，简单好用，而且相当的强大。先看看我把ztree引入Extjs4.2中的几个场景：

角色权限分配：

下拉组件群，还带搜索功能，风格与extjs无缝对接

表单多选：

下面说说在form表单中使用的方法

使用起来也很方便，而且渲染速度很快，几乎不耗时，只要在面板弹出时，绑定事件即可

        var date1 = new Date().getTime()    windowSelect("institutionType",'SB_DICTIONARIES','INST');    windowSelect("companyType",'SB_DICTIONARIES','COMT');    windowSelect("department",'SB_DICTIONARIES','DEPX');    windowSelect("accordingManage",'SB_DICTIONARIES','ACMX');        windowSelect("politicsType",'SB_DICTIONARIES','POLT');    windowSelect("companyPolitics",'SB_DICTIONARIES','SBPL');    windowSelect("shegangcategory",'SB_DICTIONARIES','SHEG');        windowSelect("institution",'SB_DICTIONARIES','INSX');    windowSelect("institutionNature",'SB_DICTIONARIES','INSN');    windowSelect("companyNature",'SB_DICTIONARIES','COMN');    windowSelect("classType",'SB_DICTIONARIES','CLAX');    windowSelect("companyGrade",'SB_DICTIONARIES','GRAX');    windowSelect("registerType",'SB_DICTIONARIES','REGT');    windowSelect("companyBolPolitics",'SB_DICTIONARIES','CBPL');    windowSelect("industrycomments",'SB_DICTIONARIES','INDU');windowSelect("sshy",'SB_DICTIONARIES','SSHY',true);windowSelect("gytype",'SB_DICTIONARIES','GYLX');var date2 = new Date().getTime()console.log("本次请求共耗时："+(date2-date1)+" 毫秒")<span style="font-family: Arial, Helvetica, sans-serif;"></span>

一、面板出现后，绑定下拉框方法。

二、表单里的内容，和普通的表单一样，一个隐藏值存key，一个存value

{
name:'company.companyPolitics',
id:'companyPolitics',
hidden:true,
fieldLabel: '*单位所在政区key'
}, {
name:'null',
id:'companyPoliticsLab',
vtype:'isnotNull',
fieldLabel: '*单位所在政区'
}

三、封装的方法：

/** *  * @param str * @param table * @param label */function windowSelect(str,table,label,beClick,check){var kv_id = str+"-inputEl";//var v_id = str+"Lab-inputEl";//var obj = $("#"+v_id)var kobj = $("#"+kv_id)/** * 初始化绑定方法 */$.select.init(v_id,kv_id,table,label,beClick,check);// 转成jquery对象var $obj = $('<td valign="top" class=" x-trigger-cell x-unselectable" style="width:17px;" ><div class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-first" role="button" ></div></td>')    $("#"+v_id).parent().after($obj);$obj.click(function(){$.select.show(v_id,kv_id,table,label,"",beClick,check)})};

其中 $.select 即为自己写的方法，稍后传上来。

1 1