ztree外掛同一頁面多個tree想要每個tree有獨立的點選事件
阿新 • • 發佈:2018-11-13
在同一個頁面如果有兩個tree,而且想要兩個tree的點選事件區別開來,需要設定獨立的一套setting和回撥函式,如下:
//第一棵樹
var setting = { isSimpleData : true, //資料是否採用簡單 Array 格式,預設false treeNodeKey : "id", //在isSimpleData格式下,當前節點id屬性 treeNodeParentKey : "pId", //在isSimpleData格式下,當前節點的父節點id屬性 view: {showIcon: false, addHoverDom: false, removeHoverDom: false, selectedMulti: false }, data: { simpleData: { enable: true } }, callback: { onClick: zTreeOnClickcar } }; /*var zNodes =[ {id:1, pId:0, name:"奧迪"}, {id:101, pId:1, name:"一汽-大眾"},{id:102, pId:101, name:"邁騰"}, {id:103, pId:101, name:"奧迪A4"}, {id:2, pId:0, name:"巴博斯"}, {id:201, pId:2, name:"巴博斯1"}, {id:202, pId:2, name:"巴博斯2"}, {id:3, pId:0, name:"寶馬"}, {id:301, pId:3, name:"寶馬1"}, {id:302, pId:3, name:"寶馬2"}, {id:4, pId:0, name:"長城"}, {id:401, pId:4, name:"長城1"},{id:402, pId:4, name:"長城2"}, {id:5, pId:0, name:"大眾"}, {id:501, pId:5, name:"大眾1"}, {id:502, pId:5, name:"大眾2"} ];*/ var zNodes; $(document).ready(function(){ $.ajax({ dataType : "json", url: "js/data/carztree.json",//請求的路徑 success:function(data){ //請求成功後處理函式。 zNodes = data.data; //把後臺封裝好的簡單Json格式賦給treeNodes }, error: function () {//請求失敗處理函式 alert('請求失敗'); } }); $.fn.zTree.init($("#carztree"), setting, zNodes); }); function zTreeOnClickcar(event, treeId, treeNode) { // alert(treeNode.tId + ", " + treeNode.name); //顯示tree的id和名字 if(treeNode.tId == "carztree_3"){ gotoUrl(105); } };
//第二棵樹
var setting1 = { isSimpleData : true, //資料是否採用簡單 Array 格式,預設false treeNodeKey : "id", //在isSimpleData格式下,當前節點id屬性 treeNodeParentKey : "pId", //在isSimpleData格式下,當前節點的父節點id屬性 view: { showIcon: false, addHoverDom: false, removeHoverDom: false, selectedMulti: false }, data: { simpleData: { enable: true } }, callback: { onClick: zTreeOnClick } }; var zNodes2; $(document).ready(function(){ $.ajax({ dataType : "json", url: "js/data/carchildren.json",//請求的路徑 success:function(data){ //請求成功後處理函式。 zNodes2 = data.data; //把後臺封裝好的簡單Json格式賦給treeNodes }, error: function () {//請求失敗處理函式 alert('請求失敗'); } }); $.fn.zTree.init($("#modelcarztree"), setting1, zNodes2); }); function zTreeOnClick(event, treeId, treeNode) { // alert(treeNode.tId + ", " + treeNode.name); //顯示tree的id和名字 if(treeNode.tId == "modelcarztree_3"){ gotoUrl(107); } // if(treeNode.tId == "modelcarztree_4"){ // gotoUrl(107); // } };