Ztree下拉框多选
上图~
po代码~
//文档加载 $(document).ready(function () { //加载ztree树 $.fn.zTree.init($("#treeDemo"), setting, getjson()); setCheck(); }); //初始化配置 var setting = { check: { enable: true }, view: { dblClickExpand: false }, data: { simpleData: { enable: true } }, callback: { beforeClick: beforeClick, onCheck: onCheck } }; //获取人员数据 function getjson() { var str = []; $.ajax({ type: "Get", url: "/Schedule/GetUser", cache: false, async: false, success: function (result) { str = result.data; } }); return eval(str); //后台返回数据,我是按照ztree的字段来定义的,因为我懒~ //id :标识 //pId :父级标识 //name :名称 //chkDisabled :是否能够勾选 //open :是否展开 } //设置父子关联关系 function setCheck() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), py = "p", sy = "s", pn = "p", sn = "s", type = { "Y": py + sy, "N": pn + sn }; zTree.setting.check.chkboxType = type; } //点击前 function beforeClick(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.checkNode(treeNode, !treeNode.checked, null, true); return false; } //勾选时触发 function onCheck(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getCheckedNodes(true), namearray = new Array(), idarray = new Array(); //获取子节点数据 for (var i = 0, l = nodes.length; i < l; i++) { //获取全部节点 if (!nodes[i].isParent) {//获取子节点 namearray.push(nodes[i].name); idarray.push(nodes[i].id); } //else { // //获取父节点 //} } $("#userSel").val(namearray.join(',')); $("#userValue").val(idarray.join(',')); } //显示下拉框ul function showMenu() { var cityObj = $("#userSel"); var cityOffset = $("#userSel").offset(); $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); } //隐藏下拉框ul function hideMenu() { $("#menuContent").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); } //下拉框ul发生变化 function onBodyDown(event) { if (!(event.target.id == "menuBtn" || event.target.id == "userSel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) { hideMenu(); } } //编辑时,勾选已经选中的节点 function refreshNode(id) { var checkeduser = getjson(id).toString().split(','); var zTree = $.fn.zTree.getZTreeObj("treeDemo"), parnodes = new Array(), allnodes = zTree.transformToArray(zTree.getNodes()), namearray = new Array(), idarray = new Array(), flag = true; //获取子节点数据 for (var i = 0, l = allnodes.length; i < l; i++) { if (!allnodes[i].isParent) { if (checkeduser.indexOf(allnodes[i].id) > -1) { namearray.push(allnodes[i].name); idarray.push(allnodes[i].id); allnodes[i].checked = true; zTree.updateNode(allnodes[i]); //获取当前子节点的父节点,进行勾选 parnodes = allnodes[i].getParentNode(); if (parnodes != null) { parnodes.checked = true; zTree.updateNode(allnodes[i]); while (flag) { parnodes = parnodes.getParentNode(); if (parnodes != null) { parnodes.checked = true; zTree.updateNode(allnodes[i]);//更新节点 } else { flag = false; } } } } } } $("#userSel").val(namearray); $("#userValue").val(idarray); }
简单粗暴的po完了代码,就这样吧~~