zTree简单使用和代码结构

1、页面使用元素代码

     <input type="text" id="key" class="Side_Toput2" name="name" value="" /><input type="button"  value="查找"  onclick="searchNode();" />
            
            <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的初始化设置的时候映射一下，希望可以为来我这查阅的童鞋们，

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