下拉带勾选框且父子节点联动多选
第一个input框时是存放勾选数据的id 第二个input框存放勾选数据的name 第三个ul是展示ztree树
<div class="pull-right" style="margin-right: 10px"> <input id="input_fieldIds" name="fieldIds" hidden> <input id="input_field" name="field" readonly type="text" class="form-control" autocomplete="off" maxlength="100" placeholder="领域" contenteditable="false"> <ul id="ul_fieldZtree" class="ztree" style="background:white;border: 1px #B2B2B2 solid; margin-top:0; height:300px; overflow:auto; display:none; position: absolute;z-index:9999" ></ul> </div>初始化加载下拉树的数据，其中setting是树的配置，fieldNodes是树的所有数据 expandAll:展开 / 折叠 全部节点; expandNode:展开 / 折叠 指定的节点,该方法有5个参数（具体可以看官网） 树配置
oncheck方法里最主要是给input框赋值，这里只赋值最底层的数据，只要是父级都不会添加到input框中
//树配置 var setting = { check: { enable: true,//显示勾选框，默认是chencbBox;也可以将勾选框换成chkStyle: "radio" chkboxType: { "Y" : "ps", "N" : "ps" }//父子级联动 }, view: { dblClickExpand: false//双击节点时，是否自动展开父节点的标识，默认值: true }, data: { simpleData: { enable: true, idKey: "tid",//节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]， 默认值："id" pIdKey: "parentId",//节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]，默认值："pId" }, key: { name: "tname"// zTree 显示节点时，将 treeNode 的 ename 属性当做节点名称 } }, callback: { beforeClick: beforeClick,//点击节点最先触发的事件在onclick事件之前触发 onCheck: nodeClick //取消勾选框时触发事件 } }; //ztree点击节点后的触发事件 function beforeClick(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj(treeId); zTree.checkNode(treeNode, !treeNode.checked, true, true); return false; } //ztree勾选框勾选取消时回调事件 function nodeClick(e, treeId, treeNode){ var zTreeobj = $.fn.zTree.getZTreeObj(treeId), nodes = zTreeobj.getCheckedNodes(true),//获取勾选数据 id="", v = ""; for (var i=0, l=nodes.length; i<l; i++) { if(!nodes[i].isParent){//判断是否是父级 v += nodes[i].tname + ","; id += nodes[i].tid + ","; } } if (v.length > 0 ) v = v.substring(0, v.length-1); if (id.length > 0 ) id = id.substring(0, id.length-1); //赋值 if(treeId=="ul_fieldZtree") { $("#input_field").val(v); $("#input_fieldIds").val(id); //单位 } }上面是树结构的数据加载问题，当然还有很多配置属性没用到，可以到官网看一下API; 接下来是树结构的展示与隐藏
//input框的点击监听事件 $("#input_field").on("click", function () { $("#ul_fieldZtree").slideDown("fast");//展开树结构的下拉 $("body").bind("mousedown", fieldHide);//鼠标点击下时绑定事件，即鼠标点击时判断是否需要收起树 }); //判断是否隐藏树下拉 function fieldHide(event) { //判断隐藏条件 if (!(event.target.id == "input_field"||event.target.id == "ul_fieldZtree" || $(event.target).parents("#ul_fieldZtree").length>0)) { $("#ul_fieldZtree").fadeOut("fast");//收起树结构的下拉，这一步可以通过修改css改变树下拉展示的位置问题 $("body").unbind("mousedown", fieldHide);//移除绑定事件 } }当input框给直接赋值后，点击展开树时对应数据勾选回显： getNodesByParam方法：第一个参数：需要精确匹配的属性名称 第二个参数：需要精确匹配的属性值，可以是任何类型，只要保证与 key 指定的属性值保持一致即可 第三个参数：搜索范围，指定在某个父节点下的子节点中进行搜索，忽略此参数，表示在全部节点中搜索） checkNode方法：第一个参数（json）：需要勾选或取消勾选的节点数据， 第二个参数（boolean）：true表示勾选节点， false 表示节点取消勾选 第三个参数（boolean）：true表示属性进行父子节点的勾选联动操作，false 表示只修改此节点勾选状 态，无任何勾选联动操作 第四个参数（boolean）：true表示执行此方法时触发 beforeCheck和onCheck事件回调函数， false 表示执行此方法时不触发事件回调函数省略此参数，等同于 false
//在这之前，树的数据需要被加载 ，不然获取不到数据 var treeObj = $.fn.zTree.getZTreeObj("ul_fieldZtree"); var datas = $("#input_fieldIds").val().split(',');//获取给input框赋值的id,对应的节点id for(var i in datas) {//遍历 //根据节点id勾选数据 treeObj.checkNode(treeObj.getNodesByParam("tid", datas[i], null)[0], true, true); }