1. 程式人生 > >jQuery運用BootStrap風格的Ztree前後臺傳值-多選框

jQuery運用BootStrap風格的Ztree前後臺傳值-多選框

我個人後臺使用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 =[
	{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:"拖拽 節點 高階控制"}
	];
前臺直接 var zNodes = 進行接收。
<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>