树形结构--ztree 插件的使用

最新推荐文章于 2021-06-04 06:16:41 发布

mapleYS

最新推荐文章于 2021-06-04 06:16:41 发布

阅读量268

点赞数

分类专栏： js 文章标签： js javascript 树结构

本文链接：https://blog.csdn.net/qq_26287401/article/details/114823835

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ztree简单使用</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <style>
    .danger_note{color: red;vertical-align: sub;}
    .note_text{color: red;font-size: 12px;}
  </style>
</head>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
<body>
<div class="layui-form-item">
    <label class="layui-form-label">权限范围</label>
    <div style="max-height: calc(100% - 39px);overflow: auto">
        <ul id="treeDemo" class="ztree"></ul>
    </div>

    <div style="padding-bottom: 10px;position: fixed;bottom: 0;width: 100%;display: flex;justify-content: center;align-content: flex-end;background: #f2f2f2">
        <button style="margin-top: 5px;" class="layui-btn layuiadmin-btn-admin" data-type="add" onclick="getChildNodes()">提交</button>
    </div>
</div>
</body>
<script src="js/jQuery v3.3.1.js"></script>
<script type="text/javascript" src="js/jquery.ztree.all-3.5.js"></script>
<script>

    let setting = {

        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false,

        },
        check: {
            enable: true,
            chkStyle: "checkbox"
        },
        data: {
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: ""
            }
        },
        callback: {
            // onAsyncSuccess: onAsyncSuccess,
        }

    };
    var a = [{"id":5,"pid":0,"name":"\u515a\u653f\u5e72\u90e8"},{"id":7,"pid":0,"name":"\u4e8b\u6545\u707e\u5bb3"}]; //该处为示例,设置ztree的数据
    let zNodes = a;
    let sid="5,7";//设置选中的子节点
    $(document).ready(function(){
        let ta = $("#treeDemo");
        t = $.fn.zTree.init(ta, setting, zNodes);
        var nodes=t.getNodes();
        console.log(nodes)
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        console.log(sid);
        sid=sid.split(',');
        if (sid!='') {
            for (var i = 0; i < sid.length; i++) {
                var node = zTree.getNodeByParam("id",sid[i]);
                zTree.checkNode(node,true,true);
            }
        }


        //   for(var i=0;i<nodes.length;i++){
        //     while(!in_array('children',$nodes[i])){
        //         if()
        //     }
        //   }
        // t.selectNode(nodes[0],false)
        // t.checkNode(nodes[1]);//根据该节点选中
    });

    function getChildNodes() {
            var layer = layui.layer;//调用的是layer弹窗组件 ,不想用的同学可将layer删除
            var zTreeOjb = $.fn.zTree.getZTreeObj("treeDemo");
            var childNodes = zTreeOjb.getCheckedNodes();
            var nodes = new Array();
            for(i = 0; i < childNodes.length; i++) {
                nodes[i] = childNodes[i].id;
            }
            var ids = nodes.join(",");
            var s_ids = {$pid};
            $.ajax({
                type: "POST",
                url: '{:url("set_types")}',
                data: {s_id: s_ids, ids: ids},
                success: function (res) {
                    console.log(res.code);
                    if (res.code === 1) {
                        layer.msg(res.msgs, {//调用的是layer弹窗组件 ,不想用的同学可将layer删除
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            layer.closeAll();
                        });
                    } else {
                        layer.msg(res.msgs, {//调用的是layer弹窗组件 ,不想用的同学可将layer删除
                            icon: 2,
                            anim: 6,
                            time: 3000
                        });
                    }
                },
                error: function(){
                    layer.msg('保存失败', {//调用的是layer弹窗组件 ,不想用的同学可将layer删除
                        icon: 2,
                        anim: 6,
                        time: 3000
                    });
                }
            });
    }
</script>

先看代码

再附上ztree的官网下载地址http://www.treejs.cn/v3/api.php

mapleYS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树形结构--ztree 插件的使用

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ztree简单使用</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta .
复制链接

扫一扫