zTree简单使用和代码结构

来源：互联网发布：淘宝首页海报是指什么编辑：程序博客网时间：2024/05/18 01:31

1、页面使用元素代码

1      <input type="text" id="key" class="Side_Toput2" name="name" value="" /><input type="button"  value="查找"  onclick="searchNode();" />2             3             <ul id="leftTree" class="ztree"></ul>

2.引用zTree的js文件

   <link href="../../../Content/JavaScript/zTree/css/demo.css" rel="stylesheet" />    <link href="../../../Content/JavaScript/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />    <script src="../../../Content/JavaScript/zTree/js/jquery.ztree.all-3.5.js"></script>

3、开始代码构造，初始化zTree

 ///初始化树    function InitTree() {        var setting = {            //check: {            //    enable: true            //},            view: {                fontCss: getFontCss,                dblClickExpand: false,                showLine: false            },             data: {                key: {                    title: "t"                },                simpleData: {                    enable: true                     //checked: true                }            },            callback: {                onClick: onClick            }        };        //请求树状数据，初始化树//var zNodes =[            { id:1, pId:0, name:"父节点1 - 展开", open:true},            { id:11, pId:1, name:"父节点11 - 折叠"}];//返回的数据格式,如上，注意一点自己拼接字符串返回的会有问题        $.ajax({            type: 'Get',            url: '?rootid=0',            dataType: "json", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json            success: function (data) {                $.fn.zTree.init($("#leftTree"), setting, data);            },            error: function (msg) {                alert(" 数据加载失败！" + msg);            }        });    }

4、后台数据，使用了自定义model，使用Newtonsoft.Json插件转换为json，返回给前台页面

//自定义model，字段要和demo的字段一样  protected class JosnModel    {        public string id;        public string pId;        public string name;        public bool open;        public string url;        public string icon;        public string title;    }获取数据，打造json

 private void GetTreeData()    {        //  DataTable dtData = null;        //   string serror = "";        //  string strSQL = @"SELECT * FROM [DOC_CLASS] where 1=1 and dc_is_delete=0 ";        //   dtData = Common.GetDataTableBySQL(strSQL, ref serror);        DocClass.dtDocClass = null;//此处可以换成自己的读取数据的，由于数据量不是很大，我这里是一次加载全部（一万多，数度也相当快），所以没做异步处理        DataTable dtData = UIHelper.GetDocClass();        StringBuilder sb = new StringBuilder();        sb.Append("[");        sb.Append("{\"id\": 0, \"pId\": \"-1\", \"name\": \"产业链 \", \"open\": \"true\" ,\"title\":\"产业链\"},");         for (int i = 0; i < dtData.Rows.Count; i++)        {               string id = dtData.Rows[i]["DC_ID"].ToString();            string name = dtData.Rows[i]["dc_name"].ToString();            string pid = dtData.Rows[i]["DC_PAR_ID"].ToString();            JosnModel model = new JosnModel() { id = id, name = name, open = false, pId = pid, url = "", icon = "", title = name };            sb.Append(JsonHelper.JsonToString(model));            if (i != dtData.Rows.Count - 1)            {                sb.Append(",");             }          }         sb.Append("]");        Response.Clear();        Response.Write(sb.ToString() );        Response.End();    }

5、树的的click事件，可以写很多关于树的跳转，展开，不是很难，不做具体分析，我这里是单机节点，Iframe的src 切换页面

    function onClick(e, treeId, treeNode) {　　　　　//这是单机节点展开        //var zTree = $.fn.zTree.getZTreeObj("leftTree");        //zTree.expandNode(treeNode);        //判断是否是ie浏览器，对iframe赋值        var kws = treeNode.name;        var url = "BigDataIndex.aspx?prokw=" + escape(kws) + "&entname=" + escape(kws) + "&time=" + new Date().getTime();         //由于ie和火狐，其他浏览器不同，ie支持location,貌似不支持src,不知道是什么原因，所以做了判断，可能是iframe的原因吧，没做深究，　　　　　　//有大神可以告诉我一下        if ($.browser.msie) {　　　　　　///获取iframe的id            window.parent.frames['FlashData'].location = url;        }        else {            window.parent.frames['FlashData'].src = url;        }    }

6、树节点搜索，定位并展开节点，有一个问题，就是如果该节点没有子节点，可以搜索到，但不能直观的定位到，有个想法：可以搜索到该节点，变红，然后展开其父节点，

应该可以做到，由于时间原因，没过多深究，有哪位知道，可以告诉小弟一下

//搜索变色function getFontCss(treeId, treeNode) {              return (!!treeNode.highlight) ? { color: "#A60000", "font-weight": "bold" } : { color: "#333", "font-weight": "normal" };    }

  文本框获取焦点的颜色变化，我这里去掉了自动的搜索，使用enter建和搜索按钮才会搜索定位function focusKey(e) {        if (key.hasClass("empty")) {            key.removeClass("empty");        }    }    function blurKey(e) {        if (key.get(0).value === "") {            key.addClass("empty");        }    }

 //搜索节点，不使用模糊，使用全匹配，当然也可以使用节点ID，文字，模糊查询所有节点，也很简单，不做叙述，类似下面，只是调用方法不同function searchNode(e) {        var zTree = $.fn.zTree.getZTreeObj("leftTree");        updateNodes(false);        var value = $.trim(key.get(0).value);        if (value != "") {            var keyType = "name";            nodeList = zTree.getNodesByParam(keyType, value);            updateNodes(true);        }           }//更新节点，使其高亮显示，我这里自己加了展开节点，达到了定位的效果    function updateNodes(highlight) {        var zTree = $.fn.zTree.getZTreeObj("leftTree");        for (var i = 0, l = nodeList.length; i < l; i++) {            nodeList[i].highlight = highlight;            //定位到节点并展开            zTree.expandNode(nodeList[i]);            zTree.updateNode(nodeList[i]);        }    }

7、搜索代码如下

 var key;    var lastValue = "", nodeList = [], fontCss = {};    $(document).ready(function () {        InitTree();        key = $("#key");        key.bind("focus", focusKey)        .bind("blur", blurKey);               $('#key').keydown(function (e) {            if (e.keyCode == 13) {                searchNode();                e.keyCode = 0;                window.event.keyCode = 0;                e.preventDefault();                return;            }        });      });

8、补充以上遗留问题，方便大家立即可以上手用，对于树的属性，刚开始觉得应该是固定的，刚发现，属性可以自定义，但是要做对应，类似映射一下

 var setting = {            //check: {            //    enable: true            //},            view: {                fontCss: getFontCss,                dblClickExpand: false,                showLine: false            },             data: {                key: {                    title: "title"                },                simpleData: {                    enable: true                     //checked: true                }            },            callback: {                onClick: onClick            }        };

这里的key,就是映射的自己的属性，比如你返回的title取名t,那你的映射应该是，title:"t";映射不对的话，你的title 取值不对，取不到值undefined，

这个我还真是浪费了不少时间，当然其他属性，也是一样，可以自定义，但需要在zTree的初始化设置的时候映射一下，希望可以为来我这查阅的童鞋们，

节省一部分读取文档的时间

阅读全文

0 0