zTree使用总结

来源：互联网发布：html入门书籍推荐知乎编辑：程序博客网时间：2024/05/23 01:21

想要使用zTree实现的效果如下:

即当鼠标点击进入文本框时，即通过ashx文件访问数据库后弹出zTree信息框。当点击窗口其他区域时此信息框隐藏。在这里，访问数据库的代码省略。

具体实现的代码如下：

<!DOCTYPE html><html><head>    <title>ZTREE DEMO </title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <link href="../plugins/JQuery_zTree_v2.5/demo/zTreeStyle/zTreeStyle.css" rel="Stylesheet"        type="text/css" />    <link href="../plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="Stylesheet" type="text/css" />    <script type="text/javascript" src="../js/util/jquery-1.7.2.min.js"></script>    <script type="text/javascript" src="../plugins/zTree/js/jquery.ztree.core-3.5.min.js"></script>    <script type="text/javascript"><!--        var setting = {            view: {                showLine: false,//                showIcon: showIconForTree,                dblClickExpand: true            },            data: {                simpleData: {                    enable: true,                    idKey: "id",                    pIdKey: "pId",                    rootPId: 0                }            },            callback: {                beforeClick: beforeClick,                onClick: onClick            }        };        function createTree() {            var zNodes;            $.ajax({                type: 'POST',                url: '../../caseTypeHandler.ashx?action=GetCaseType', //url  action是方法的名称                data: { id: "0" },                dataType: "text", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json                ContentType: "application/json; charset=utf-8",                success: function (data) {                    zNodes = data;                    $.fn.zTree.init($("#treeDemo"), setting, eval('(' + zNodes + ')'));                },                error: function (msg) {                    alert("失败");                }            });        }        $(document).ready(function () {            createTree();        });        // 控制父节点不显示图标        function showIconForTree(treeId, treeNode) {            return !treeNode.isParent;        };        function beforeClick(treeId, treeNode) {            var check = (treeNode && !treeNode.isParent);            if (!check) alert("请不要选择类别...");            return check;        }        function onClick(e, treeId, treeNode) {            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),nodes = zTree.getSelectedNodes(),v = "";            nodes.sort(function compare(a, b) { return a.id - b.id; });            for (var i = 0, l = nodes.length; i < l; i++) {                v += nodes[i].name + ",";            }            if (v.length > 0) v = v.substring(0, v.length - 1);            var nameObj = $("#nameSel");            nameObj.attr("value", v);            var n = "";            for (var i = 0, l = nodes.length; i < l; i++) {                n += nodes[i].id + ",";            }            if (n.length > 0) n = n.substring(0, n.length - 1);            nameObj.attr("nameid", n);            hideMenu();        }        function showMenu() {            var nameObj = $("#nameSel");            var nameOffset = $("#nameSel").offset();            $("#menuContent").css({ left: nameOffset.left + "px", top: nameOffset.top + nameObj.outerHeight() + "px" }).slideDown("fast");            $("body").bind("mousedown", onBodyDown);        }        function hideMenu() {            $("#menuContent").fadeOut("fast");            $("body").unbind("mousedown", onBodyDown);        }        // 当点击窗口其他区域时zTree消息框隐藏        function onBodyDown(event) {            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {                hideMenu();            }        }//-->    </script>    <style type="text/css">        ul.ztree        {            margin-top: 10px;            border: 1px solid #617775;            background: #f0f6e4;            width: 220px;            height: 360px;            overflow-y: scroll;            overflow-x: auto;        }    </style></head><body>    <div class="content_wrap">        <div class="zTreeDemoBackground">            <ul class="list">                <li class="title"><span class="content_txt">name:</span>                    <input id="nameSel" type="text" readonly value="" nameid="" onclick="showMenu(); return false;" />                </li>            </ul>        </div>        <div id="menuContent" class="menuContent" style="display: none; position: absolute;">            <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">            </ul>        </div>    </div></body></html>

zTree添加自定义属性

zTree节点中添加自定义的属性键值，

可以直接在js中，如下。其中，attr是添加的自定义属性。

var zNodes =[            { id:1, pId:0, name:"pNode 1", open:true, attr:"id1"},            { id:11, pId:1, name:"pNode 11", attr:"id11"},            { id:111, pId:11, name:"leaf node 111", attr:"id111"},            { id:112, pId:11, name:"leaf node 112", attr:"id112"},            { id:12, pId:1, name:"pNode 12", attr:"id12"},            { id:2, pId:0, name:"pNode 2", attr:"id2"},            { id:21, pId:2, name:"pNode 21", open:true, attr:"id21"}];

也可以通过json转化到js对象来添加属性。

调用此属性的方式如下：

var zTree = $.fn.zTree.getZTreeObj("treeDemo")；var nodes = zTree.getSelectedNodes()；nodes.sort(function compare(a, b) { return a.id - b.id; });var v = "";for (var i = 0, l = nodes.length; i < l; i++) {        v += nodes[i].attr+ ",";    }if (v.length > 0) v = v.substring(0, v.length - 1);alert("The attr value of selected nodes:"+v.toString());