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的初始化設置的時候映射一下，希望可以為來我這查閱的童鞋們，
節省一部分讀取文檔的時間