jQuery 操作 JSON 對象 修改 ztree 結構

• 2019 年 12 月 4 日
• 筆記

前一篇提到了 ztree 渲染用戶列表，在渲染列表的時候遇到了需要對 JSON 對象進行操作，來改變 ztree 的結構。

ztree 引用了系統中 部門試圖的數據集結果，存儲為一個 json 對象。其中，通過每個數據的 ParentId 來對應關聯樹狀結構。

需求是，將其中的第二級菜單，也就是部門員工的頭銜給刪掉。

現有的數據結構大致如下：

所以，思路就是通過遍歷，篩選出 type = 0 的數據的 ParentId 為 type = 2 的 id 的數據，並將其 ParentID 賦值為 type = 2 的 ParentId 的數據。

說起來很拗口，看程式碼：

//odata 元數據， 通過操作後，push 到新的 data 數據  var [email protected](ViewBag.Department);  odata.push({ Id: "0", ParentId: null, Name: '組織機構', Type: typeRoot, open: true });  var data = [];  //通過type 刪除職位  for (var o in odata) {      if (odata[o].Type != 2) {          var item = {};          $.extend(item, odata[o]);          if (odata[o].Type == 0) {              for (var j in odata) {                  if (odata[o].ParentId == odata[j].Id) {                      //odata[o].ParentId = odata[j].ParentId;                      item.ParentId = odata[j].ParentId;                      console.log(odata[o].ParentId + " " + odata[j].ParentId);                  }              }          }          data.push(item);      }  }

注意：其中最主要的是 $.extend(item, odata[o]); 這個操作。 因為如果直接進行 = 賦值，就會導致數據值判斷條件被覆蓋，從而遍歷異常，而操作無效。

原本我是打算使用 odata[o].ParentId = odata[j].ParentId; 這樣在遍歷之後，會再經行一次 PraentId 的賦值，導致整個數據集的異常。

在同事指導下，使用 jQuery 的 extend() 來進行操作。

官方示例：

//jQuery 程式碼:  var settings = { validate: false, limit: 5, name: "foo" };  var options = { validate: true, name: "bar" };  jQuery.extend(settings, options);  //結果:  //settings == { validate: true, limit: 5, name: "bar" }