1. 程式人生 > >ztree外掛同一頁面多個tree想要每個tree有獨立的點選事件

ztree外掛同一頁面多個tree想要每個tree有獨立的點選事件

在同一個頁面如果有兩個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);
     // }
};