JQuery-Jquery的TreeGrid插件 · PHP筆記

一、TreeGrid組件相關的類 1、TreeGrid(_config) _config：json格式的數據，組件所需要的數據都通過該參數提供。 2、TreeGridItem(_root, _rowId, _rowIndex, _rowData) _root：顯示組件實例的目標容器對象。 _rowId：選中行的id。 _rowIndex：選中行的索引。 _rowData：json格式的行數據。二、_config參數詳解 id：組件實例的id。 width：組件實例的寬度。 renderTo：用于顯示組件實例的容器對象的id。一般用div作為容器。 headerAlign：標題行的對齊方式。 headerHeight：標題行的高度。 dataAlign：數據行的對齊方式。 indentation：層級縮進量。 folderColumnIndex：顯示圖標的數據列的索引，從0開始。 folderOpenIcon：節點展開時的圖標。 folderCloseIcon：節點關閉時的圖標。 defaultLeafIcon：葉節點的圖標。 hoverRowBackground：鼠標滑過數據行時，背景色是否改變。 itemClick：單擊數據行后觸發的事件。事件方法包含三個參數，分別是：行的id、行的索引、行數據。 expandLayer：初始展開層數，默認只展開第1層。 columns：值為數組，數組元素為json對象。定義數據欄相關信息。數組元素的屬性： headerText：欄的標題。 dataField：欄數據對應的字段名。 headerAlign：欄頭對齊方式。 dataAlign：欄數據對齊方式。 width：欄的寬度。 handler：通過指定的方法來自定義欄數據。 folderHidden：在文件夾行隱藏單元格值。 data：組件的數據集。三、TreeGrid的方法 show：顯示填充數據后的組件對象。 expandAll：展開、關閉所有節點。該方法有一個參數，參數值為Y時表示展開，參數值為N時表示關閉。 getSelectedItem：獲取當前選中的數據行，返回TreeGridItem對象。四、TreeGridItem組件 1、組件屬性 id：數據行的id。 index：數據行的索引。 data：json格式的行數據。 2、組件方法 getParent：獲取父數據行。方法返回TreeGridItem對象。 getChildren：獲取子數據行集。方法返回一個數組，數組元素為TreeGridItem對象。效果圖： ![](https://img.kancloud.cn/78/a8/78a8270e57379dac9c6de9693d722e70_1016x602.png) ## TreeGrid頁面數據顯示結構： table結構 ![](https://img.kancloud.cn/ad/e8/ade8ee8d1b9eebcfd112c83f34ba5bcd_870x402.png) ## data.js ``` var dataSet=[ {name:"福建省",code:"FJS",children:[ {name: "福州市", code: "china", assignee: "ld", children:[ {name: "臺江區", code:"FJS",assignee: "hr", children:[]}, {name: "鼓樓區", code:"FZ", children:[{name: "西洪社區", code:"CS", children:[]}, {name: "白馬社區", code:"TJ", children:[]}, {name: "五鳳社區", code:"GL", children: [{name: "丞相坊", code:"WF"}, {name: "鳳舞家園", code:"BM"}, {name: "鳳儀家園", code:"RJ"}, {name: "五鳳蘭庭", code:"XH"} ]} ]}, {name: "晉安區", code:"JA", children:[]} ]}, {name: "三明市", code: "SM", assignee: "lyx", children:[]}, {name: "廈門市", code: "XM", assignee: "jtq", children:[]}, {name: "龍巖市", code: "LY", assignee: "llx", children:[]} ] }, {name:"江西省",code:"JXS", children:[{name:"南昌市",code:"NC",children:[]} ] } ]; ``` ## html頁面 ``` <HTML> <HEAD> <TITLE>樹狀圖</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <META NAME="Generator" CONTENT="EditPlus"> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="TreeGrid.js"></script> <script type="text/javascript" src="data.js"/></script> <link type="text/css" rel="stylesheet" href="TreeGrid.css"/> </HEAD> <BODY> <input type="button" value="關閉所有節點" οnclick="expandAll('N')"> <input type="button" value="展開所有節點" οnclick="expandAll('Y')"> <input type="button" value="取得當前行的數據" οnclick="selectedItem()"> <input type="button" value="全選/全不選" οnclick="selectAll()"> <input type="button" value="查看選中情況" οnclick="showChecked()"> <br> <br> 當前選中的行：<input type="text" id="currentRow" size="110"> <div id="div1"></div> <script language="javascript"> var config = { id: "tg1", width: "800", renderTo: "div1", headerAlign: "left", headerHeight: "30", dataAlign: "left", indentation: "20", folderOpenIcon: "images/folderOpen.gif", folderCloseIcon: "images/folderClose.gif", defaultLeafIcon: "images/defaultLeaf.gif", hoverRowBackground: "false", folderColumnIndex: "1", itemClick: "itemClickEvent", columns:[ {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"}, {headerText: "地名", dataField: "name", headerAlign: "center", handler: "customOrgName"}, {headerText: "簡寫", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "負責人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"} ], data:dataSet }; /* 單擊數據行后觸發該事件 id：行的id index：行的索引。 data：json格式的行數據對象。 */ function itemClickEvent(id, index, data){ jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data)); } /* 通過指定的方法來自定義欄數據 */ function customCheckBox(row, col){ return "<input type='checkbox' name='city_name' οnclick='selCk(this)' id='"+row.code+"'>"; } function customOrgName(row, col){ var name = row[col.dataField] || ""; return name; } function customLook(row, col){ return "<a href='' style='color:blue;'>查看</a>"; } //------------------ //<span style="color:#ff0000;">獲得選中的數據Code</span> function showChecked() { var resArr =$("input[name='city_name']"); var codeId=''; resArr.each(function() { if($(this).attr("checked") == true) { var curId=$(this).attr("id"); if(curId!="") { codeId=codeId+curId+","; } } }); if(codeId=="") { confirm("你未勾選如何資源！"); }else { alert("你選中的資源Code是:"+codeId.substring(0,codeId.length-1)); } } <span style="color:#ff0000;">//級聯選中、取消選中 //(取消)選中父節點，其子節點自動(取消)選中具體可以看TreeGrid.js中的實現方法，在下載包中</span> function selCk(ck) { var ckId = $(ck).attr("id"); var tr = $(ck).parent().parent(); treeGrid.checkSubs(tr.attr("id"),$(ck).attr("checked")); } <span style="color:#ff0000;">//全選或是全不選</span> var isSelectAll=false; function selectAll() { if(!isSelectAll) { $("input[name='city_name']").attr('checked',true);<span style="color:#ff0000;"> //這里有的是true ，有的要寫"checked"</span> isSelectAll=true; }else { $("input[name='city_name']").attr('checked',false); isSelectAll=false; } } //創建一個組件對象 var treeGrid = new TreeGrid(config); treeGrid.show(); /* 展開、關閉所有節點。 isOpen=Y表示展開，isOpen=N表示關閉 */ function expandAll(isOpen){ treeGrid.expandAll(isOpen); } /* 取得當前選中的行，方法返回TreeGridItem對象 */ function selectedItem(){ var treeGridItem = treeGrid.getSelectedItem(); if(treeGridItem!=null){ //獲取數據行屬性值 alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name); //獲取父數據行 var parent = treeGridItem.getParent(); if(parent!=null){ console.log(parent); alert("parent："+parent.data.name); //jQuery("#currentRow").val(parent.data.name); }else{ alert("選中節點沒有父節點"); } //獲取子數據行集 var children = treeGridItem.getChildren(); //暫時無法獲得選中節點的子節點的名稱 if(children!=null && children.length>0){ var child_id=''; for(var i=0;i<children.length;i++) { console.log(children[i]); child_id=child_id+children[i].id+','; } alert("選中節點子節點的ID:"+child_id.substring(0,child_id.length-1)); //jQuery("#currentRow").val(children[0].data.name);<span style="color:#ff0000;">//這個無法取到數據，可以看下圖Children圖中的data</span> }else{ alert("選中節點沒有子節點"); } } } </script> </BODY> </HTML> ``` ## children圖 ![](https://img.kancloud.cn/d2/ac/d2ac25f546392c060ef9773fa07416c8_696x182.png)