首页 > JavaScript > 在ztree中使用单选->复选层次结构
201211月19

在ztree中使用单选->复选层次结构

起因

      在ztree中实现复选层次结构
       要使用zTree实现该功能:选中状态在各个条件(Linux_ipfwd,Linux_ipsec,usdpaa_hello-reflector,usdpaa_rc_ipfwd)之间互斥,当状态切换时自动取消上个属性下的所有子选项。

解决

       因为zTree中单选,复选状态都是使用图片表示的,然后提供接口根据half,checked等属性来返回节点的状态。虽然这样可以灵活的的对节点进行操作,但去失去了最简单的提交方式(submit form)。
       所以我们首先将zTree的图片按钮还原成html按钮,这个在zTree中已经提供了demo,我们只要根据demo中的方式来添加自定义控件,代码如下:

var _handles = {
    0:function (treeNode) {
        return "";
    },
    1:function (treeNode) {
        return "<input id="fsl_&quot; +  treeNode.tId + &quot;" class="radio" type="radio" name="caseattr" value="&quot; + treeNode.attrs + &quot;" />";
    },
    2:function (treeNode) {
        return "<input id="fsl_&quot; +  treeNode.tId + &quot;" class="checkboxBtn" type="checkbox" name="testcase" value="&quot; + treeNode.attrs + &quot;" />";
    }
};

var IDMark_A = "_a";
function addDiyDom(treeId, treeNode) {
    var aObj = $("#" + treeNode.tId + IDMark_A);
    aObj.before(_handles[treeNode.level](treeNode));
    var btn = $("#fsl_" + treeNode.tId);
    if (btn) {
        if (treeNode.level == 1) {
            btn.bind("click", function () {
                click_v1(treeNode);
            });
        } else if (treeNode.level == 2) {
            btn.bind("change", function () {
                change_v2(treeNode, btn);
            });
        }
    }
}

       这里比较重要的是click_v1,change_v2这两个绑定函数,click_v1绑定到单选按钮的click事件,change_v2绑定到复选框的change事件。代码及相关注释如下:

//改变节点状态(选中/取消选中)
function changeNode(node, status) {
    var btn = $("#fsl_" + node.tId);
    if (btn.attr("checked") != status) {
        $("#fsl_" + node.tId).attr("checked", Boolean(status));
    }
}

//判断节点是否选中
function isSelectNode(node) {
    return $("#fsl_" + node.tId).attr("checked");
}

//判断节点的子节点是否全部选中
function isSelectAllChildNoes(node) {
    var isSelectAll = true;
    var childNodes = node.children;
    if (childNodes) {
        for (var i = 0; i < childNodes.length; i++) {
            if (!isSelectNode(childNodes[i])) {
                isSelectAll = false;
                break;
            }
        }
    }
    return isSelectAll;
}

//改变节点的所有子节点状态(选中/取消选中)
function changeAllChildNoes(node, status) {
    var childNodes = node.children;
    if (childNodes) {
        for (var i = 0; i < childNodes.length; i++) {
            changeNode(childNodes[i], status);
            changeAllChildNoes(childNodes[i], status);
        }
    }
}

//改变节点的所有父节点状态(选中/取消选中)
function changeAllParentNoes(node, status) {
    var parentNode = node.getParentNode();
    if (parentNode) {
        if (status) {
            if (isSelectAllChildNoes(parentNode)) {
                changeNode(parentNode, status);
            }
        } else {
            changeNode(parentNode, status);
        }
        changeAllParentNoes(parentNode, status);
    }
}

//选中的单选框tId
var global_mark = {};

//复选框改变状态所触发的事件
function change_v2(treeNode, btn) {
    if (btn.attr("checked")) {
        var parentNode = treeNode.getParentNode();
        if (!isSelectNode(parentNode)) {
            changeNode(parentNode, true);
            click_v1(parentNode);
        }
    }
}

//单选框改变状态所触发的事件
function click_v1(treeNode) {
    if (treeNode.tId != global_mark[treeNode.type]) {
        var lastNode = treeObj.getNodeByTId(global_mark[treeNode.type]);
        if (lastNode) {
            changeAllChildNoes(lastNode, false);
        }
        global_mark[treeNode.type] = treeNode.tId;
    }
}

这样就实现了先前所提到的功能。

文章作者: iitshare
本文地址:http://www.iitshare.com/ztree-radio-checkbox.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

更多
本文目前尚无任何评论.

发表评论