javascript - 如何在javascript中实现分层多级数据表?
问题描述
我在不使用任何插件或库的情况下实现多级数据表。我想基于 javaScript、JQuery 或 angular js 来实现。我检查了以下链接,
但我的 json 结构与上面的链接不同。
我需要在树结构 UI 中显示我的 JSON。我没有在 html 中硬编码级别。所有级别都应由javascript处理。
我已经实现了 jsfiddle:http: //jsfiddle.net/varunPes/0n9fmawb/40/
JSON结构
[ {
Home:{
"checkbox_view":true,
"checkbox_edit":false,
"checkbox_delete":true
}
},
{
"watchColorWorld":{
"local":{
"app-local-black":{
"checkbox_view":true,
"checkbox_edit":true,
"checkbox_delete":true
}
},
"global":{
"app-global-red":{
"checkbox_view":true,
"checkbox_edit":true,
"checkbox_delete":true
}
},
"world":{
"app-world-green":{
"checkbox_view":true,
"checkbox_edit":true,
"checkbox_delete":true
}
}
}
},
{
"systemMgmt":{
"checkbox_view":true,
"checkbox_edit":true,
"checkbox_delete":true
}
},
{
"rules":{
"Rule1":{
"rule2":{
"rule3":{
"checkbox_view":true,
"checkbox_edit":true,
"checkbox_delete":true
}
}
}
}
}
]
你回答对我有价值。提前致谢。
解决方案
我能想到的使用 vanilla Javascript 完成此任务的最简单方法是修改对象的深度优先遍历:
function renderJSON(json) {
const wrapper = document.createElement('div');
const stack = [{
node: json,
name: 'root',
parentEl: wrapper
}];
while (stack.length > 0) {
let current = stack.pop();
let currentObj = current.node;
let currentParentEl = current.parentEl;
let level = document.createElement('div');
level.classList.add('level');
level.textContent = current.name + ': ';
if (currentObj.renderContent) {
// render custom html content
currentObj.renderContent(level);
} else if (!(currentObj instanceof Object)) {
level.textContent += currentObj;
}
currentParentEl.append(level);
if (currentObj instanceof Object) {
let keys = Object.keys(currentObj);
if (!currentObj.skipChildren) {
// push in reverse to preserve key order
for (let i = keys.length - 1; i >= 0; i--) {
let key = keys[i];
let node = currentObj[key];
stack.push({
node: node,
name: key,
parentEl: level
});
}
}
}
}
return wrapper;
}
// Example Use Case:
const Permissions = function Permissions() {
this.skipChildren = true;
this.view = false;
this.edit = false;
this.delete = false;
};
Permissions.prototype = {
renderContent(el) {
const fields = ['view', 'edit', 'delete'];
for (let field of fields) {
const label = document.createElement('label');
label.textContent = field;
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = this[field];
label.appendChild(checkbox);
el.appendChild(label);
}
}
};
const rendered = renderJSON({
element1: {
a: 4,
b: 6,
c: 24,
element1a: {
a: 'hello'
}
},
element2: {
a: 'abc',
permissions: new Permissions()
},
element3: ["first", "second", "third"]
});
document.body.append(rendered);
.level {
margin-left: 1em;
}
根据您的需要,您可以通过多种不同的方式分支此代码。由于您首先获得了一个 JSON 字符串,因此您需要找到某种方法将其转换为 Javascript 对象,从而产生您想要的结果。
推荐阅读
- c - C : 如何将特定位置的位更改为特定值?
- android - 当方法抛出异常甚至尝试捕获时,JUnit 测试失败
- react-native - 无法从发布 apk 中的资产 index.android.bundle 加载脚本
- json - Spring Boot JPA 异常:无法处理托管/反向引用“defaultReference”:反向引用类型
- android - 调试Android内核时的下一步错误
- .htaccess - 如何使用 htaccess 文件将 http 重定向到 https://www.example.com?
- java - 如何仅获取名称easyImage Android?
- firebase - 尝试在 Firebase 上部署时出现“SyntaxError: Unexpected token =”
- python-3.x - 如何运行位于 aws s3 存储桶中的 python 脚本和文件
- javascript - 如何使数据表页脚出现在打印页面上