zTree学习笔记一：实现checkbox、全选、取消全选功能

最新推荐文章于 2024-05-24 16:59:14 发布

jimjiayu

最新推荐文章于 2024-05-24 16:59:14 发布

阅读量1.3w

点赞数

分类专栏： zTree

本文链接：https://blog.csdn.net/zhongshijun521/article/details/72904270

版权

zTree 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css"> 
    <script src="../js/jquery-1.4.4.min.js"></script>
    <script src="../js/jquery.ztree.all.min.js"></script>
</head>
<body>
<ul id="leftTree" class="ztree"></ul>
<a id="checkAllTrue" href="#" >勾选</a>
<a id="checkAllFalse" href="#">取消勾选</a>
<script>
    var setting = {
        check:{
            enable:true
        },
        view: {
            showLine: true,//显示节点之间的连线。
            selectedMulti: false  //允许同时选中多个节点。
        },
        data: {
            simpleData: {
                enable:true, //使用简单数据模式
                idKey: "id",//节点数据中保存唯一标识的属性名称
                pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称
                rootPId: "" //用于修正根节点父节点数据 默认值：null
            }
        } 
    };
    var nodes = [
        {id :"1",pId:"0",name :"山西省"},
        {id :"2",pId:"0",name : "河北省"},
        {id :"3",pId:"0",name : "内蒙省"},
        {id :"4",pId:"0",name : "吉林省"},
        {id :"11",pId:"1",name: "大同市"},
        {id :"12",pId:"1",name: "朔州市"},
        {id :"21",pId:"2",name: "石家庄"},
        {id :"22",pId:"2",name: "唐山市"},
        {id :"31",pId:"3",name: "赤峰市"},
        {id :"32",pId:"3",name: "呼市"},
        {id :"41",pId:"4",name: "长春市"},
        {id :"42",pId:"4",name: "四平市"},
        {id :"43",pId:"4",name: "辽源市"},
        {id :"111",pId:"11",name:"浑源县"},
        {id :"112",pId:"11",name: "阳高县"},
        {id :"121",pId:"12",name: "山阴县"},
        {id :"122",pId:"12",name: "应县"}
    ];
    var tree  = $.fn.zTree.init($('#leftTree'), setting, nodes);
    tree.expandAll(tree);
    function checkNode(e) {
        var zTree = $.fn.zTree.getZTreeObj("leftTree"),
                type = e.data.type,
                nodes = zTree.getSelectedNodes();
        console.log(type.indexOf("All"));
        if (type.indexOf("All") < 0 && nodes.length == 0) {
            alert("请先选择一个节点");
        }
        if (type == "checkAllTrue") {
            zTree.checkAllNodes(true);
        } else if (type == "checkAllFalse") {
            zTree.checkAllNodes(false);
        }
    }
    $("#checkAllTrue").bind("click", { type: "checkAllTrue" }, checkNode);
    $("#checkAllFalse").bind("click", { type: "checkAllFalse" }, checkNode);
    var zTreeObj = $.fn.zTree.getZTreeObj("leftTree"); //那个树对象
            console.log(zTreeObj);
            var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
            console.log(nodes);

</script>
</body>
</html>

更多demo案例研究，及需要引入的文件下载进入
zTree官网

jimjiayu

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
zTree学习笔记一：实现checkbox、全选、取消全选功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css"> <script src="../js/jquery-1.4.4.min.j
复制链接

扫一扫