jQuery運用BootStrap風格的Ztree前後臺傳值-多選框
阿新 • • 發佈:2019-02-16
我個人後臺使用List<Map<String,Object>>拼接,轉換為Json陣列傳遞到前臺,程式碼片段如下:
List<Map<String, Object>> resultList = new ArrayList<Map<String, Object>>();
JSONArray jsonStr = null; Map<String, Object> orgMap = new HashMap<String, Object>(); orgMap.put("open", true); //根節點展開 orgMap.put("id", 1);//根節點的ID orgMap.put("pId", 0);//父id orgMap.put("name", "Name"); //根節點的名字 resultList.add(orgMap); //列表中先新增第一級的資料
jsonStr = JSONArray.fromObject(resultList);//轉換為Json陣列
return jsonStr.toString();
因為前臺需要的是下面的結構,所以拼接上述程式碼。前臺直接 var zNodes = 進行接收。var zNodes =[ {id:1, pId:0, name:"[core] 基本功能 演示", open:true,}, {id:101, pId:1, name:"標準 JSON 資料"}, {id:102, pId:1, name:"簡單 JSON 資料"}, {id:2, pId:0, name:"單選框功能 演示", open:false}, {id:201, pId:2, name:"Checkbox 勾選操作"}, {id:206, pId:2, name:"Checkbox演示"}, {id:3, pId:0, name:"編輯功能 演示", open:false}, {id:301, pId:3, name:"拖拽 節點 基本控制"}, {id:302, pId:3, name:"拖拽 節點 高階控制"} ];
<script type="text/javascript"> var setting = { view: { //addHoverDom: addHoverDom,//用於當滑鼠移動到節點上時,顯示使用者自定義控制元件,顯示隱藏狀態同zTree 內部的編輯、刪除按鈕 //removeHoverDom: removeHoverDom,//用於當滑鼠移出節點時,隱藏使用者自定義控制元件,顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕 selectedMulti: false //設定是否允許同時選中多個節點。 }, check: { //設定zTree是否可以被勾選,及勾選的引數配置 chkStyle: "checkbox", enable: true, //設定 zTree 的節點上是否顯示 checkbox / radio chkboxType : { "Y" : "", "N" : "" } }, data: { simpleData: { enable: true //確定 zTree 初始化時的節點資料、非同步載入時的節點資料、或 addNodes 方法中輸入的 newNodes 資料是否採用簡單資料模式 (Array) } }, edit: { //可以編輯節點 : 增 刪 改 enable: false //設定 zTree 是否處於編輯狀態, }, callback: { onCheck: onCheckNodeSite, //回撥函式,獲取選節點 beforeCheck : function(treeId, treeNode) {//該函式為不選中根節點 if (treeNode.pId == null) {//判斷節點點pId為null時,不被選中 alert("請選擇子節點!"); return false; } } } }; var zNodes = <#ztreeList>;//接收後臺傳過來的json陣列 $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); var nodeJson = []; var treenode; function onCheckNodeSite(){//獲取所有被選中節點的回撥函式 treenode = $.fn.zTree.getZTreeObj("treeDemo"); var chkNodeArr = treenode.getCheckedNodes(true); //true獲取選中節點,false未選中節點,預設為true for (var i = 0; i < chkNodeArr.length; i++) { var channelStr = parentPathName(chkNodeArr[i].parentTId);//獲取選中節點的所有父節點名稱返回的字串 nodeJson[i] = { "id": chkNodeArr[i].id, "name": chkNodeArr[i].name}; alert(nodeJson[i]); } }; /* 遞迴查詢選中節點的所有父節點 */ function parentPathName(parentTId){ var treenode = $.fn.zTree.getZTreeObj("treeDemo"); var str=""; if(parentTId!=null){ var node = treenode.getNodeByTId(parentTId); if(node!=null && typeof(node)!='undefined'){ str=parentPathName(node.parentTId); str+=node.name+"/"; } return str; } return ""; } //刪除選中欄目,呼叫每個節點上的button函式removeChannel(this),給該button寫入id,為chkNodeArr[i].tId,呼叫下面函式 button程式碼,寫在獲取所有被選中節點的回撥函式的迴圈中 <button style="background:none;border:none;float:right;" id="'+chkNodeArr[i].tId+'" type="button" onclick="removeChannel(this)"></button> function removeChannel(btn){//刪除選中欄目 var node = treenode.getNodeByTId(btn.id); treenode.checkNode(node); onCheckNodeSite(); } /* 刪除全部選中 */ function deleteAll(){ treenode.checkAllNodes(false); } </script>