zTree简单使用和代码结构

1、页面使用元素代码1 2 3

2.引用zTree的js文件 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的初始化设置的时候映射一下，希望可以为来我这查阅的童鞋们，节省一部分读取文档的时间