可以先看我的前一篇文章

bootstrap treeview 增刪改的正確姿勢

樹狀目錄的懶載入就是第一次只加載第一層，然後當用戶點選加號的時候，再從後端取得資料，新增到這個節點下面。優點是對於大量的樹狀目錄資料，不需要一次性查詢到下級節點目錄，速度快，體驗好，缺點是，如果樹狀目錄帶了成果數量的資訊（tags），它還是要遞迴到所有的子節點才能獲取成果數量，效率沒有提高多少。

$(function () {
  var data = 
  [
    {
      text: "系統設定",
      href: "#node-1",
      selectable: true,
      id: '00',
      selectable: false,
      tags: ['available'],
      nodes: 
      [
        { 
          text: "目錄設定",
          id: '01',
          nodeId: '01',
          lazyLoad:true,//本節點為懶載入節點
        }, 
        { 
          text: "爬蟲設定",
          id: '02',
          lazyLoad:true,
        }, 
        { 
          text: "專案許可權",
          id: '03'
        }, 
        { 
          text: "賬號管理",
          id: '04',
          selectable: false,
        }
      ]
    }
  ]

  $('#tree').treeview({
    data: data,         // data is not optional
    levels: 2,
    showTags:true,
    loadingIcon:"fa fa-hourglass",//懶載入過程中顯示的沙漏字元圖示
    lazyLoad:loaddata//loaddata為點選懶載入節點目錄時，執行的函式名稱，把後端的資料新增到這個節點下面
  }); 
})

function loaddata(node,func){//這個技巧真高，即能得到節點資料，又能把節點下級的資料通過函式發回去
  // alert(node.id);
  // alert(func);
  <!-- $.ajax({
    type:"get",
    url:"/project/getprojcate",
    data: {id:node.id},
    success:function(data,status){
      func(data);
    }
  }); -->
  var singleNode = {
    text: "projcatename2",
    id:"08",
  };
  func(singleNode);//把新的下級節點資料發回到後端，這樣明顯優雅很多
  // $("#tree").treeview("addNode", [singleNode,node]);這一句和上面一句等同
}