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" }