制作easyui部门选择插件

来源：互联网发布：vb自动处理网页弹框编辑：程序博客网时间：2024/05/16 18:53

今晚一晚上就制作了一个部门选择的公共插件，以前都是页面需要时就从之前的代码复制过来，感觉不够正规。

一晚上就弄了这个插件，感觉比写业务逻辑麻烦多了。

此插件是结合easyui跟ztree

下面是textbox

点击更改后就会弹出个选择部门的窗口

点击选择后就会关闭窗口，然后在textbox就会出现选择的值

插件js代码如下，前提得先引用入jquery、easyui、ztree

var jgPlugin={org:function(opts){var _dialog=null;//窗口控件var _ztree=null;//ztree树控件var _field_search=null;//搜索下拉列表控件var _opts=opts;var init=function(){_dialog=$("<div></div>");_field_search=$("<input />");var z=$("<ul class='ztree' style='margin-top:30px;'></ul>");var d=$("<div style='padding:5px;position:fixed'></div>");d.append(_field_search);_dialog.append(d);_dialog.append(z);$("body").append(_dialog);$.messager.progress({text:"加载中..."});//下面的url更改为你实际项目的url,返回的json为{success:true,data:[{id:1,name:'',icon:''}],message:''}                        $.post("/index.php/Admin/Common/org",{},function(r){$.messager.progress("close");if (!r.success) {$.messager.alert("错误", r.message, "error");return;}var ztree_data=r.data;var icon_url="/Public/plugin/ztree/img/diy/"$.each(ztree_data,function(i,n){n.icon=icon_url+n.icon+".png";});var options={data:{simpleData:{enable:true,pIdKey:"parent_id"}},view:{selectedMulti:false}};_ztree=$.fn.zTree.init(z,options,ztree_data);if(_opts.selectId){_ztree.selectNode(_ztree.getNodeByParam("id",_opts.selectId));}else{_ztree.expandAll(true);}_field_search.combobox({data:ztree_data,valueField:"id",textField:"name",prompt:"部门关键字",onHidePanel:function(){var id=$(this).combobox("getValue");if(id){_ztree.selectNode(_ztree.getNodeByParam("id",id));}}});_dialog.dialog({closed:true,width:250,height:350,title:'选择部门',buttons:[{text:'选择',handler:function(){var node=_ztree.getSelectedNodes()[0];if(!node){$.messager.alert("提示","请选择员工所在部门","info");return;}if(_opts.onSelect){_opts.onSelect(node);}_ztree.expandAll(false);_dialog.dialog("close");}}]});_dialog.dialog("open");},"json");};this.show=function(opts){if(opts){$.extend(_opts,opts);}if(_ztree){if(_opts.selectId){_ztree.selectNode(_ztree.getNodeByParam("id",_opts.selectId));}else{_ztree.expandAll(true);}_dialog.dialog("open");}else{init();}};}};

使用方法

//参数json为{selectId:1,onSelect:function(node){}} selectId为选择的部门ID，窗口弹出来后就会选择，onSelect是点击选择按钮后的事件，node.id为选择的部门ID，node.name为选择部门的名称//实例化插件对象var plugin_org=new jgPlugin.org({onSelect:function(node){console.log(node);$("#field_use_org_name").textbox("setValue",node.name);$("#field_use_org_id").val(node.id);}});//使用plugin_org.show();

特此记录下，因为我知道以后肯定会经常用的

0 0