前一篇提到了 ztree 渲染用户列表,在渲染列表的时候遇到了需要对 JSON 对象进行操作,来改变 ztree 的结构。
ztree 引用了系统中 部门试图的数据集结果,存储为一个 json 对象。其中,通过每个数据的 ParentId 来对应关联树状结构。
需求是,将其中的第二级菜单,也就是部门员工的头衔给删掉。
现有的数据结构大致如下:
所以,思路就是通过遍历,筛选出 type = 0
的数据的 ParentId 为 type = 2
的 id 的数据,并将其 ParentID 赋值为 type = 2
的 ParentId 的数据。
说起来很拗口,看代码:
//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() 来进行操作。
官方示例:
//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" }