ztree自定义单选框

来源：互联网发布：淘宝好听的用户名大全编辑：程序博客网时间：2024/06/06 14:11

在使用ztree插件单选框时，有时需要父子节点操作关联，由于单选框特性，ztree并没有提供相关的功能，那么该如何实现选中子节点时，父节点自动变成选中状态，而父节点取消选中时，子节点也取消选中呢？

html代码

<span style="font-weight:bold;font-size:15px;">区域选择：</span>                   <input type="text" id="citySel" onclick="showMenu()" readonly="readonly" placeholder="请选择区域" style="width:180px;font-weight:bold;"/>                        <input type="text" id="parent_layer_idx" style="display:none;"/>                        <div id="menuContent" style="display:none; position:absolute;background:#eee;overflow: auto;margin-top:40px;margin-left:83px;z-index:999">                        <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>                        </div>

js代码

 //加载树形结构        $.fn.zTree.init($("#treeDemo"), setting);

//初始化树形结构var setting = {        async: {            enable: true,            url: ContentRoot + "system/queryTreeNode4BAllBLayerAction.do",            dataFilter: filter        },        check: {            enable: true,            chkStyle: "checkbox",            chkboxType:{ "Y" : "p", "N" : "s" }                   },        view: {            dblClickExpand: false,            showIcon: false        },        data: {            simpleData: {                enable: true,                idKey: "n_id",                pIdKey: "p_id",                rootPId: "-1"            }        },        callback: {        beforeCheck: onChangeSel,            onClick: onClick,            onCheck: onCheck        }    };function filter(treeId, parentNode, responseData) {    return eval("(" + responseData.jsonString + ")");}//自定义单选框function onChangeSel(treeId, treeNode){ if(treeNode.checked){return;}var zTree = $.fn.zTree.getZTreeObj("treeDemo");var nodes=zTree.getCheckedNodes(true); $.each(nodes,function(i,n){ n.checked=false; }); zTree.refresh();}function onClick(e, 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);    v = "";    id = "";    for (var i = 0, l = nodes.length; i < l; i++) {        v += nodes[i].name + ",";        id += nodes[i].n_id + ",";    }    if (v.length > 0) v = v.substring(0, v.length - 1);    var cityObj = $("#citySel");    cityObj.attr("value", v);    $("#citySel").val(v);    if (id.length > 0) {        $("#parent_layer_idx").val(id.substring(1, id.length - 1));        //$("#parent_type").val(id.substring(0, 1));    }}function showMenu() {    var cityObj = $("#citySel");    var cityOffset = $("#citySel").offset();    $("#menuContent").css({        left: (cityOffset.left - cityOffset.width) + "px",        top: (cityOffset.top - 45) + "px"    }).slideDown("fast");    $("body").bind("mousedown", onBodyDown);}function hideMenu() {    $("#menuContent").fadeOut("fast");    $("body").unbind("mousedown", onBodyDown);}function onBodyDown(event) {    if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {        hideMenu();    }}

效果

这样，在选择不同父节点或子节点时，为单选，并且在选定一个节点时，其父子节点的操作也是关联的

阅读全文

0 0