制作easyui部门选择插件

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

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

此插件是结合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();

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