楠槡

jQuery 操作 JSON 对象 修改 ztree 结构

2018-12-11

前一篇提到了 ztree 渲染用户列表,在渲染列表的时候遇到了需要对 JSON 对象进行操作,来改变 ztree 的结构。

ztree 引用了系统中 部门试图的数据集结果,存储为一个 json 对象。其中,通过每个数据的 ParentId 来对应关联树状结构。

需求是,将其中的第二级菜单,也就是部门员工的头衔给删掉。

现有的数据结构大致如下:

结构

所以,思路就是通过遍历,筛选出 type = 0 的数据的 ParentId 为 type = 2 的 id 的数据,并将其 ParentID 赋值为 type = 2 的 ParentId 的数据。

说起来很拗口,看代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//odata 元数据, 通过操作后,push 到新的 data 数据
var odata=@Html.Raw(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() 来进行操作。

官方示例:

1
2
3
4
5
6
//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" }

使用支付宝打赏
使用微信打赏

若你觉得我的文章对您有帮助,点击上方按钮请我喝杯咖啡☕

若文章中存在问题,或您有任何意见和疑问,均可与我联系

扫描二维码,分享此文章 📱