MVC 動態TreeView運用疑問- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1670

會員總數：243884
討論主題：188363

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> ASP.NET >> MVC 動態TreeView運用疑問

[]

[我要回覆]

12 最後一頁(2)

MVC 動態TreeView運用疑問
價值 : 50 QP 點閱數:787 回應數:22

樓主

Jason

0	33
850	124

發送站內信

我使用ASP.NET C# 開發一個網頁

我想運用TreeView方式提供使用者可編輯自己的Sidebar順序
所以我有建立一張資料表專門記錄登入者ID 與與該名使用者之Sidebar階層關係
目前遇到2個問題

1.如遇無限階層該如何寫

例如:
名稱父階ID ID
頁面1 0 1
頁面2 1 2
頁面3 1 3
頁面4 3 4
頁面5 1 5
頁面6 0 6
頁面7 6 7
頁面8 0 8

像這樣而我參考了 https://demos.shieldui.com/web/treeview/drag-and-drop
進行練習發現我不知道如何撰寫一個可不限總共有幾階的程式想請教各位大大我該如何撰寫

目前我的寫法是先找父階為0 再去用他的ID找父階是他的ID的但這樣變成是假如有3階我就要寫3個foreach 4階就4個....
能有有大大可以教我該如何寫呢?

2.使用者拖曳完成後我該如何取得使用者修改後階層，因為要回存至資料庫

搜尋相關Tags的文章： [ ASP.NET ] , [ TreeView ] ,
本篇文章發表於2017-12-04 10:22


別忘捐VP感謝幫助你的人	新手會員瞧一瞧

16樓最有價值解答 topcat	小喵自己來吧從官方下載的範例中，找到目錄檔案為：「exedit/drag.html」相關內容如下： <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../../css/demo.css" type="text/css"> <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script> <SCRIPT type="text/javascript"> <!-- var setting = { edit: { enable: true, showRemoveBtn: false, showRenameBtn: false }, data: { simpleData: { enable: true } }, callback: { beforeDrag: beforeDrag, beforeDrop: beforeDrop } }; var zNodes =[ { id:1, pId:0, name:"can drag 1(1)", open:true}, { id:11, pId:1, name:"can drag 1-1(11)"}, { id:12, pId:1, name:"can drag 1-2(12)", open:true}, { id:121, pId:12, name:"can drag 1-2-1(121)"}, { id:122, pId:12, name:"can drag 1-2-2(122)"}, { id:123, pId:12, name:"can drag 1-2-3(123)"}, { id:13, pId:1, name:"can't drag 1-3(13)", open:true, drag:false}, { id:131, pId:13, name:"can't drag 1-3-1(131)", drag:false}, { id:132, pId:13, name:"can't drag 1-3-2(132)", drag:false}, { id:133, pId:13, name:"can drag 1-3-3(133)"}, { id:2, pId:0, name:"can drag 2(2)", open:true}, { id:21, pId:2, name:"can drag 2-1(21)"}, { id:22, pId:2, name:"can't drop 2-2(22)", open:true, drop:false}, { id:221, pId:22, name:"can drag 2-2-1(221)"}, { id:222, pId:22, name:"can drag 2-2-2(222)"}, { id:223, pId:22, name:"can drag 2-2-3(223)"}, { id:23, pId:2, name:"can drag 2-3(23)"} ]; function beforeDrag(treeId, treeNodes) { for (var i=0,l=treeNodes.length; i<l; i++) { if (treeNodes[i].drag === false) { return false; } } return true; } function beforeDrop(treeId, treeNodes, targetNode, moveType) { console.log(treeNodes); console.log(targetNode); let ShowMoveNode='NodeId:' + treeNodes[0].id + '<br/>ParentId:' + targetNode.id; $('#divShowMoveNode').html(ShowMoveNode); return targetNode ? targetNode.drop !== false : true; } function setCheck() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), isCopy = $("#copy").attr("checked"), isMove = $("#move").attr("checked"), prev = $("#prev").attr("checked"), inner = $("#inner").attr("checked"), next = $("#next").attr("checked"); zTree.setting.edit.drag.isCopy = isCopy; zTree.setting.edit.drag.isMove = isMove; showCode(1, ['setting.edit.drag.isCopy = ' + isCopy, 'setting.edit.drag.isMove = ' + isMove]); zTree.setting.edit.drag.prev = prev; zTree.setting.edit.drag.inner = inner; zTree.setting.edit.drag.next = next; showCode(2, ['setting.edit.drag.prev = ' + prev, 'setting.edit.drag.inner = ' + inner, 'setting.edit.drag.next = ' + next]); } function showCode(id, str) { var code = $("#code" + id); code.empty(); for (var i=0, l=str.length; i<l; i++) { code.append("<li>"+str[i]+"</li>"); } } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); setCheck(); $("#copy").bind("change", setCheck); $("#move").bind("change", setCheck); $("#prev").bind("change", setCheck); $("#inner").bind("change", setCheck); $("#next").bind("change", setCheck); }); //--> </SCRIPT> </HEAD> <BODY> <h1>Normal Drag Node Operation</h1> <h6>[ File Path: exedit/drag.html ]</h6> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul class="info"> <li class="title"><h2>1, Explanation of setting</h2> <ul class="list"> <li>This Demo only shows how to drag & drop nodes using the basic method and configure parameters.</li> <li class="highlight_red">1) Must set 'setting.edit' attributes, see the API documentation for more related contents.</li> <li class="highlight_red">2) If you want to use drag & drop callback, muse to set 'setting.callback.beforeDrag / onDrag / beforeDrop / onDrop' attributes, see the API documentation for more related contents.</li> <li><p>Basic settings:<br/> <input type="checkbox" id="copy" class="checkbox first" checked /><span>can Copy</span> <input type="checkbox" id="move" class="checkbox " checked /><span>can Move</span><br/> <ul id="code1" class="log" style="height:42px;"></ul></p> </li> <li><p>Position settings:<br/> <input type="checkbox" id="prev" class="checkbox first" checked /><span>prev</span> <input type="checkbox" id="inner" class="checkbox " checked /><span>inner</span> <input type="checkbox" id="next" class="checkbox " checked /><span>next</span><br/> <ul id="code2" class="log" style="height:65px;"></ul></p> </li> </ul> </li> <li class="title"><h2>2, Explanation of treeNode</h2> <ul class="list"> <li>No special requirements on the node data, the user can add custom attributes.</li> </ul> </li> </ul> </div> </div> <div id="divShowMoveNode"> </div> </BODY> </HTML> 小喵在beforeDrop這個function加上觀察的console.log，觀察出相關的物件為treeNodes, targetNode 進一步，從treeNodes[0].id可取得移動Node的id 從targetNode.id可取得他後來的pid 最後小喵把結果顯示在divShowMoveNode中您參考看看 ^.^a 本篇文章回覆於2017-12-07 10:30 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
17樓作者回應 Jason	<SCRIPT type="text/javascript"> var setting = { edit: { drag: { autoExpandTrigger: true, prev: dropPrev, inner: dropInner, next: dropNext }, enable: true, showRemoveBtn: false, showRenameBtn: false }, data: { simpleData: { enable: true } }, callback: { beforeDrag: beforeDrag, beforeDrop: beforeDrop, beforeDragOpen: beforeDragOpen, onDrag: onDrag, onDrop: onDrop, onExpand: onExpand } }; var zNodes =[ @if(@ViewData["TreeView"] != null) { @Html.Raw(ViewData["TreeView"]); } ]; function dropPrev(treeId, nodes, targetNode) { var pNode = targetNode.getParentNode(); if (pNode && pNode.dropInner === false) { return false; } else { for (var i=0,l=curDragNodes.length; i<l; i++) { var curPNode = curDragNodes[i].getParentNode(); if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) { return false; } } } return true; } function dropInner(treeId, nodes, targetNode) { if (targetNode && targetNode.dropInner === false) { return false; } else { for (var i=0,l=curDragNodes.length; i<l; i++) { if (!targetNode && curDragNodes[i].dropRoot === false) { return false; } else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) { return false; } } } return true; } function dropNext(treeId, nodes, targetNode) { var pNode = targetNode.getParentNode(); if (pNode && pNode.dropInner === false) { return false; } else { for (var i=0,l=curDragNodes.length; i<l; i++) { var curPNode = curDragNodes[i].getParentNode(); if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) { return false; } } } return true; } var log, className = "dark", curDragNodes, autoExpandNode; function beforeDrag(treeId, treeNodes) { className = (className === "dark" ? "":"dark"); showLog("[ " + getTime() + " beforeDrag ]     drag: " + treeNodes.length + " nodes."); for (var i=0,l=treeNodes.length; i<l; i++) { if (treeNodes[i].drag === false) { curDragNodes = null; return false; } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) { curDragNodes = null; return false; } } curDragNodes = treeNodes; return true; } function beforeDragOpen(treeId, treeNode) { autoExpandNode = treeNode; return true; } function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) { className = (className === "dark" ? "":"dark"); showLog("[ "+getTime()+" beforeDrop ]     moveType:" + moveType); showLog("target: " + (targetNode ? targetNode.name : "root") + " -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move")); return true; } function onDrag(event, treeId, treeNodes) { className = (className === "dark" ? "":"dark"); showLog("[ "+getTime()+" onDrag ]     drag: " + treeNodes.length + " nodes." ); } function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) { className = (className === "dark" ? "":"dark"); showLog("[ "+getTime()+" onDrop ]     moveType:" + moveType); showLog("target: " + (targetNode ? targetNode.name : "root") + " -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move")) } function onExpand(event, treeId, treeNode) { if (treeNode === autoExpandNode) { className = (className === "dark" ? "":"dark"); showLog("[ " + getTime() + " onExpand ]    " + treeNode.name); } } function showLog(str) { if (!log) log = $("#log"); log.append("<li class='"+className+"'>"+str+"</li>"); if(log.children("li").length > 8) { log.get(0).removeChild(log.children("li")[0]); } } function getTime() { var now= new Date(), h=now.getHours(), m=now.getMinutes(), s=now.getSeconds(), ms=now.getMilliseconds(); return (h+":"+m+":"+s+ " " +ms); } function setTrigger() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.setting.edit.drag.autoExpandTrigger = $("#callbackTrigger").attr("checked"); } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); $("#callbackTrigger").bind("change", {}, setTrigger); }); //--> //按鈕觸發事件 function Onclick() { //取得所有<li>的ID var TempID = "" var TempC = "" $('.node_name').each( function () { num = $(this).attr("id") //依ID取得階層 TempC += document.getElementById(num).pId } ) alert(TempC) </SCRIPT> 最後我希望用按鈕取得所有階層的資訊本篇文章回覆於2017-12-07 10:38 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
18樓作者回應 Jason	好的謝謝您我試試看本篇文章回覆於2017-12-07 10:39 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
19樓作者回應 Jason	我在想是否有方法能在我點擊按鈕時將當前最後所有階層資訊一次取出，因為拖曳時移動的Log其實對我來說是不需要的本篇文章回覆於2017-12-07 10:52 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
20樓回應 topcat	我在想是否有方法能在我點擊按鈕時將當前最後所有階層資訊一次取出，因為拖曳時移動的Log其實對我來說是不需要的需求又變了喔 ^.^a 建議您未來提問 1.相關線索提供完整 2.提問精準，把您真正想要的，直接講清楚說明白 ^.^a 去看官網的API，可以看到getNodes的function 所以可以用這個著手 $('#btnGetTreeNodes').click(function(){ var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getNodes(); console.log(JSON.stringify(nodes)); }); ^.^a 本篇文章回覆於2017-12-07 13:33 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
21樓回應 topcat	小喵個人覺得把整顆樹丟出來，不見得會比較好維護資料庫小喵做的話，會有兩種做法 1.自己記錄異動，然後傳回有異動的相關內容，一次維護 2.即時維護，有異動發生，即時ajax傳回後台，直接維護異動當下的那一個node 您參考看看~ ^_^ 本篇文章回覆於2017-12-07 13:39 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
22樓作者回應 Jason	好的謝謝您本篇文章回覆於2017-12-07 14:15 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

12 最後一頁(2)

回覆

如要回應,請先登入.

16樓最有價值解答 topcat	小喵自己來吧從官方下載的範例中，找到目錄檔案為：「exedit/drag.html」相關內容如下： <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../../css/demo.css" type="text/css"> <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script> <SCRIPT type="text/javascript"> <!-- var setting = { edit: { enable: true, showRemoveBtn: false, showRenameBtn: false }, data: { simpleData: { enable: true } }, callback: { beforeDrag: beforeDrag, beforeDrop: beforeDrop } }; var zNodes =[ { id:1, pId:0, name:"can drag 1(1)", open:true}, { id:11, pId:1, name:"can drag 1-1(11)"}, { id:12, pId:1, name:"can drag 1-2(12)", open:true}, { id:121, pId:12, name:"can drag 1-2-1(121)"}, { id:122, pId:12, name:"can drag 1-2-2(122)"}, { id:123, pId:12, name:"can drag 1-2-3(123)"}, { id:13, pId:1, name:"can't drag 1-3(13)", open:true, drag:false}, { id:131, pId:13, name:"can't drag 1-3-1(131)", drag:false}, { id:132, pId:13, name:"can't drag 1-3-2(132)", drag:false}, { id:133, pId:13, name:"can drag 1-3-3(133)"}, { id:2, pId:0, name:"can drag 2(2)", open:true}, { id:21, pId:2, name:"can drag 2-1(21)"}, { id:22, pId:2, name:"can't drop 2-2(22)", open:true, drop:false}, { id:221, pId:22, name:"can drag 2-2-1(221)"}, { id:222, pId:22, name:"can drag 2-2-2(222)"}, { id:223, pId:22, name:"can drag 2-2-3(223)"}, { id:23, pId:2, name:"can drag 2-3(23)"} ]; function beforeDrag(treeId, treeNodes) { for (var i=0,l=treeNodes.length; i<l; i++) { if (treeNodes[i].drag === false) { return false; } } return true; } function beforeDrop(treeId, treeNodes, targetNode, moveType) { console.log(treeNodes); console.log(targetNode); let ShowMoveNode='NodeId:' + treeNodes[0].id + '<br/>ParentId:' + targetNode.id; $('#divShowMoveNode').html(ShowMoveNode); return targetNode ? targetNode.drop !== false : true; } function setCheck() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), isCopy = $("#copy").attr("checked"), isMove = $("#move").attr("checked"), prev = $("#prev").attr("checked"), inner = $("#inner").attr("checked"), next = $("#next").attr("checked"); zTree.setting.edit.drag.isCopy = isCopy; zTree.setting.edit.drag.isMove = isMove; showCode(1, ['setting.edit.drag.isCopy = ' + isCopy, 'setting.edit.drag.isMove = ' + isMove]); zTree.setting.edit.drag.prev = prev; zTree.setting.edit.drag.inner = inner; zTree.setting.edit.drag.next = next; showCode(2, ['setting.edit.drag.prev = ' + prev, 'setting.edit.drag.inner = ' + inner, 'setting.edit.drag.next = ' + next]); } function showCode(id, str) { var code = $("#code" + id); code.empty(); for (var i=0, l=str.length; i<l; i++) { code.append("<li>"+str[i]+"</li>"); } } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); setCheck(); $("#copy").bind("change", setCheck); $("#move").bind("change", setCheck); $("#prev").bind("change", setCheck); $("#inner").bind("change", setCheck); $("#next").bind("change", setCheck); }); //--> </SCRIPT> </HEAD> <BODY> <h1>Normal Drag Node Operation</h1> <h6>[ File Path: exedit/drag.html ]</h6> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul class="info"> <li class="title"><h2>1, Explanation of setting</h2> <ul class="list"> <li>This Demo only shows how to drag & drop nodes using the basic method and configure parameters.</li> <li class="highlight_red">1) Must set 'setting.edit' attributes, see the API documentation for more related contents.</li> <li class="highlight_red">2) If you want to use drag & drop callback, muse to set 'setting.callback.beforeDrag / onDrag / beforeDrop / onDrop' attributes, see the API documentation for more related contents.</li> <li><p>Basic settings:<br/> <input type="checkbox" id="copy" class="checkbox first" checked /><span>can Copy</span> <input type="checkbox" id="move" class="checkbox " checked /><span>can Move</span><br/> <ul id="code1" class="log" style="height:42px;"></ul></p> </li> <li><p>Position settings:<br/> <input type="checkbox" id="prev" class="checkbox first" checked /><span>prev</span> <input type="checkbox" id="inner" class="checkbox " checked /><span>inner</span> <input type="checkbox" id="next" class="checkbox " checked /><span>next</span><br/> <ul id="code2" class="log" style="height:65px;"></ul></p> </li> </ul> </li> <li class="title"><h2>2, Explanation of treeNode</h2> <ul class="list"> <li>No special requirements on the node data, the user can add custom attributes.</li> </ul> </li> </ul> </div> </div> <div id="divShowMoveNode"> </div> </BODY> </HTML> 小喵在beforeDrop這個function加上觀察的console.log，觀察出相關的物件為treeNodes, targetNode 進一步，從treeNodes[0].id可取得移動Node的id 從targetNode.id可取得他後來的pid 最後小喵把結果顯示在divShowMoveNode中您參考看看 ^.^a 本篇文章回覆於2017-12-07 10:30 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
17樓作者回應 Jason	<SCRIPT type="text/javascript"> var setting = { edit: { drag: { autoExpandTrigger: true, prev: dropPrev, inner: dropInner, next: dropNext }, enable: true, showRemoveBtn: false, showRenameBtn: false }, data: { simpleData: { enable: true } }, callback: { beforeDrag: beforeDrag, beforeDrop: beforeDrop, beforeDragOpen: beforeDragOpen, onDrag: onDrag, onDrop: onDrop, onExpand: onExpand } }; var zNodes =[ @if(@ViewData["TreeView"] != null) { @Html.Raw(ViewData["TreeView"]); } ]; function dropPrev(treeId, nodes, targetNode) { var pNode = targetNode.getParentNode(); if (pNode && pNode.dropInner === false) { return false; } else { for (var i=0,l=curDragNodes.length; i<l; i++) { var curPNode = curDragNodes[i].getParentNode(); if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) { return false; } } } return true; } function dropInner(treeId, nodes, targetNode) { if (targetNode && targetNode.dropInner === false) { return false; } else { for (var i=0,l=curDragNodes.length; i<l; i++) { if (!targetNode && curDragNodes[i].dropRoot === false) { return false; } else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) { return false; } } } return true; } function dropNext(treeId, nodes, targetNode) { var pNode = targetNode.getParentNode(); if (pNode && pNode.dropInner === false) { return false; } else { for (var i=0,l=curDragNodes.length; i<l; i++) { var curPNode = curDragNodes[i].getParentNode(); if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) { return false; } } } return true; } var log, className = "dark", curDragNodes, autoExpandNode; function beforeDrag(treeId, treeNodes) { className = (className === "dark" ? "":"dark"); showLog("[ " + getTime() + " beforeDrag ]     drag: " + treeNodes.length + " nodes."); for (var i=0,l=treeNodes.length; i<l; i++) { if (treeNodes[i].drag === false) { curDragNodes = null; return false; } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) { curDragNodes = null; return false; } } curDragNodes = treeNodes; return true; } function beforeDragOpen(treeId, treeNode) { autoExpandNode = treeNode; return true; } function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) { className = (className === "dark" ? "":"dark"); showLog("[ "+getTime()+" beforeDrop ]     moveType:" + moveType); showLog("target: " + (targetNode ? targetNode.name : "root") + " -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move")); return true; } function onDrag(event, treeId, treeNodes) { className = (className === "dark" ? "":"dark"); showLog("[ "+getTime()+" onDrag ]     drag: " + treeNodes.length + " nodes." ); } function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) { className = (className === "dark" ? "":"dark"); showLog("[ "+getTime()+" onDrop ]     moveType:" + moveType); showLog("target: " + (targetNode ? targetNode.name : "root") + " -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move")) } function onExpand(event, treeId, treeNode) { if (treeNode === autoExpandNode) { className = (className === "dark" ? "":"dark"); showLog("[ " + getTime() + " onExpand ]    " + treeNode.name); } } function showLog(str) { if (!log) log = $("#log"); log.append("<li class='"+className+"'>"+str+"</li>"); if(log.children("li").length > 8) { log.get(0).removeChild(log.children("li")[0]); } } function getTime() { var now= new Date(), h=now.getHours(), m=now.getMinutes(), s=now.getSeconds(), ms=now.getMilliseconds(); return (h+":"+m+":"+s+ " " +ms); } function setTrigger() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.setting.edit.drag.autoExpandTrigger = $("#callbackTrigger").attr("checked"); } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); $("#callbackTrigger").bind("change", {}, setTrigger); }); //--> //按鈕觸發事件 function Onclick() { //取得所有<li>的ID var TempID = "" var TempC = "" $('.node_name').each( function () { num = $(this).attr("id") //依ID取得階層 TempC += document.getElementById(num).pId } ) alert(TempC) </SCRIPT> 最後我希望用按鈕取得所有階層的資訊本篇文章回覆於2017-12-07 10:38 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
18樓作者回應 Jason	好的謝謝您我試試看本篇文章回覆於2017-12-07 10:39 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
19樓作者回應 Jason	我在想是否有方法能在我點擊按鈕時將當前最後所有階層資訊一次取出，因為拖曳時移動的Log其實對我來說是不需要的本篇文章回覆於2017-12-07 10:52 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
20樓回應 topcat	我在想是否有方法能在我點擊按鈕時將當前最後所有階層資訊一次取出，因為拖曳時移動的Log其實對我來說是不需要的需求又變了喔 ^.^a 建議您未來提問 1.相關線索提供完整 2.提問精準，把您真正想要的，直接講清楚說明白 ^.^a 去看官網的API，可以看到getNodes的function 所以可以用這個著手 $('#btnGetTreeNodes').click(function(){ var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getNodes(); console.log(JSON.stringify(nodes)); }); ^.^a 本篇文章回覆於2017-12-07 13:33 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
21樓回應 topcat	小喵個人覺得把整顆樹丟出來，不見得會比較好維護資料庫小喵做的話，會有兩種做法 1.自己記錄異動，然後傳回有異動的相關內容，一次維護 2.即時維護，有異動發生，即時ajax傳回後台，直接維護異動當下的那一個node 您參考看看~ ^_^ 本篇文章回覆於2017-12-07 13:39 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
22樓作者回應 Jason	好的謝謝您本篇文章回覆於2017-12-07 14:15 == 簽名檔 == --未登入的會員無法查看對方簽名檔--