自定義js樹上的圖標

Question

我想爲關閉和展開添加一個文件夾打開關閉圖標，併爲葉節點添加一個葉子圖標。

請幫

編輯：

嘗試添加該類型的插件，但似乎並沒有工作。

var data = { 
     'core': { 
      'data': dataObj 
     }, 
     "search": { 
      "case_insensitive": true, 
      "show_only_matches": true 
     }, 
     "plugins": ["search", "themes"] 
    }; 
    $('#jstree_category').jstree(data); 
    $('#jstree_category').on("loaded.jstree", function (e, data) { 
     _this.treeLoaded = true; 
     if (!_this.dataFetched) { 
      return; 
     } 
    }); 
    // bind customize icon change function in jsTree open_node event. 
    $('#jstree_category').on('open_node.jstree', function (e, data) { 
     $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first() 
      .removeClass('glyphicon glyphicon-folder-close').addClass('glyphicon glyphicon-folder-open'); 
     $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon') 
      .addClass('glyphicon glyphicon-leaf'); 
    }); 
    // bind customize icon change function in jsTree close_node event. 
    $('#jstree_category').on('close_node.jstree', function (e, data) { 
     $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first() 
      .removeClass('glyphicon glyphicon-folder-open').addClass('glyphicon glyphicon-folder-close'); 
     $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon') 
      .addClass('glyphicon glyphicon-leaf'); 
    }); 

Answer 1

這裏是你工作的小提琴。你應該在JSON數據對象中提到你的節點的類型。

var jsonData = [ 
    { 
    id : 1, 
    text : "Folder 1", 
    type: "root", 
    state : { 
     selected : false 
    }, 
    children : [ 
     { 
     id : 2, 
     text : "Sub Folder 1", 
     type: "child", 
     state : { 
      selected : false 
     }, 
     }, 
     { 
     id : 3, 
     text : "Sub Folder 2", 
     type: "child", 
     state : { 
      selected : false 
     }, 
     } 
    ] 
    }, 
    { 
    id: 4, 
    text : "Folder 2", 
    type: "root", 
    state : { 
     selected : true 
    }, 
    children : [] 
    } 
]; 

$('#jstree-tree') 
    .jstree({ 
    core: { 
    data: jsonData 
    }, 
    types: { 
    "root": { 
     "icon" : "glyphicon glyphicon-plus" 
    }, 
    "child": { 
     "icon" : "glyphicon glyphicon-leaf" 
    }, 
    "default" : { 
    } 
    }, 
    plugins: ["search", "themes", "types"] 
}).on('open_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-minus"); 
}).on('close_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-plus"); }); 

JSFiddle