ztree简单使用样式以及常用获取数据操作

最新推荐文章于 2022-03-30 15:38:40 发布

图纸t

最新推荐文章于 2022-03-30 15:38:40 发布

阅读量583

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/asdfghjkl110292/article/details/89154531

版权

笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="/Scripts/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/ztree/jquery.ztree.core.min.js" type="text/javascript"></script>
    <!--   <script src="/Scripts/ztree/jquery.ztree.all.min.js" type="text/javascript"></script>-->
    <script src="/Scripts/ztree/jquery.ztree.exhide.min.js" type="text/javascript"></script>
    <!--<script src="/Scripts/layer/layer.js" type="text/javascript"></script>
    <script src="/Scripts/layui/layui.all.js" type="text/javascript"></script>-->
    <link rel="stylesheet" href="/Scripts/layui/css/layui.css" />
    <link rel="stylesheet" href="/Scripts/ztree/zTreeStyle.css" />
    <!--<link rel="stylesheet" href="/Scripts/ztree/metroStyle/metroStyle.css" />-->
    <!--<script type="text/javascript">
        $(document).ready(function () {
            layui.upload.render({
                elem: '#test10'
                        , url: '/upload/'
                        , done: function (res) {
                            console.log(res)
                        }
            });
        })
    </script>-->
    <!--下拉框从数据库获取数据-->
    <script type="text/javascript">

        var zTreeObj;

        var setting = {};

        var setting = {             //这样设置了，才能用下面那种Json
            check: {
                enable: true//checkbox
            },
            view: {

                nameIsHTML: true, //允许name支持html				
                selectedMulti: false
            },
            edit: {
                enable: false,
                editNameSelectAll: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {

                //onClick: onClick
            }
        };
        $(document).ready(function () {
            $.get("/menu/ss", function (data) {  //data是string类型的json
                //  alert(data);
                console.log(data);
                var zNode = JSON.parse(data);
                console.log(zNode);
                // alert(zNode.Table[0].id);

                //console.log(zNode);
                var znode = zNode.Table;

                zTreeObj = $.fn.zTree.init($("#menuTree"), setting, znode);
//-------------------------------------------------------------------------------------------                
               // 获取复选框/单选框选中的节点：
				//var checkedNodes = zTreeObj.getCheckedNodes();
//----------------------------------------------------------------------------------------
				//获取光标选中的(selected)
				//var selectedNodes = zTreeObj.getSelectedNodes();


            })
        })
    </script>
</head>
<body>
    <div>
        <ul id="menuTree" class="ztree"></ul>
    </div>
</body>
</html>

如果是第一种json字符串的话，得把它变成json对象才可以作为ztree的数据
在这里插入图片描述

图纸t

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ztree简单使用样式以及常用获取数据操作

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <...
复制链接

扫一扫

专栏目录