直接上代码了。没什么好说的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reports using TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css" />
<link rel="stylesheet" type="text/css" href="css/icon.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/constant.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Reports using TreeGrid</h2>
<p>Using TreeGrid to show complex reports.</p>
<div style="margin:20px 0;"></div>
<table id="tg" title="Reports using TreeGrid" class="easyui-treegrid" style="1000px;height:550px"
data-options="
url: 'treegrid_data4.json',
method: 'get',
rownumbers: true,
showFooter: true,
idField: 'id',
treeField: 'name'
">
<thead frozen="true">
<tr>
<th field="name" width="300">模板名称</th>
</tr>
</thead>
<thead>
<tr>
<th field='permission_archive' id="permission_archive" width='60' align='center'
formatter='formatPrice'>
查询
</th>
<th field='permission_commit' id="permission_commit" width='60' align='center' formatter='formatPrice1'>
新增
</th>
<th field='permission_confirm' id="permission_confirm" width='60' align='center'
formatter='formatPrice2'>
修改
</th>
<th field='permission_modify' id="permission_modify" width='60' align='center' formatter='formatPrice3'>
删除
</th>
<th field='permission_read' id="permission_read" width='60' align='center' formatter='formatPrice4'>
提交
</th>
<th field='permission_reject' id="permission_reject" width='60' align='center' formatter='formatPrice5'>
确认
</th>
<th field='permission_remove' id="permission_remove" width='60' align='center' formatter='formatPrice6'>
打回
</th>
<th field='permission_undo_archive' id="permission_undo_archive" width='60' align='center'
formatter='formatPrice7'>
归档
</th>
<th field='permission_write' id="permission_write" width='60' align='center' formatter='formatPrice8'>
归档撤销
</th>
</tr>
</thead>
</table>
<button onclick="b()">点击查看所有数据</button>
</body>
<script>
function formatPrice(val, row) {
if (row.permission_archive == false) {
return `<input onclick="a(this)" name="${row.id}" type="checkbox" value="${row.permission_archive}" />`;
} else if (row.permission_archive == true) {
return `<input onclick="a(this)" name="${row.id}" type="checkbox" value="${row.permission_archive}" checked = "checked"/>`;
}
}
function formatPrice1(val, row) {
if (row.permission_commit == false) {
return `<input onclick="a1(this)" name="${row.id}" type="checkbox" value="${row.permission_commit}" />`;
} else if (row.permission_commit == true) {
return `<input onclick="a1(this)" name="${row.id}" type="checkbox" value="${row.permission_commit}" checked = "checked"/>`;
}
}
function formatPrice2(val, row) {
if (row.permission_confirm == false) {
return `<input onclick="a2(this)" name="${row.id}" type="checkbox" value="${row.permission_confirm}" />`;
} else if (row.permission_confirm == true) {
return `<input onclick="a2 (this)" name="${row.id}" type="checkbox" value="${row.permission_confirm}" checked = "checked"/>`;
}
}
function formatPrice3(val, row) {
if (row.permission_modify == false) {
return `<input onclick="a3(this)" name="${row.id}" type="checkbox" value="${row.permission_modify}" />`;
} else if (row.permission_modify == true) {
return `<input onclick="a3 (this)" name="${row.id}" type="checkbox" value="${row.permission_modify}" checked = "checked"/>`;
}
}
function formatPrice4(val, row) {
if (row.permission_read == false) {
return `<input onclick="a4(this)" name="${row.id}" type="checkbox" value="${row.permission_read}" />`;
} else if (row.permission_read == true) {
return `<input onclick="a4 (this)" name="${row.id}" type="checkbox" value="${row.permission_read}" checked = "checked"/>`;
}
}
function formatPrice5(val, row) {
if (row.permission_reject == false) {
return `<input onclick="a5(this)" name="${row.id}" type="checkbox" value="${row.permission_reject}" />`;
} else if (row.permission_reject == true) {
return `<input onclick="a5 (this)" name="${row.id}" type="checkbox" value="${row.permission_reject}" checked = "checked"/>`;
}
}
function formatPrice6(val, row) {
if (row.permission_remove == false) {
return `<input onclick="a6(this)" name="${row.id}" type="checkbox" value="${row.permission_remove}" />`;
} else if (row.permission_remove == true) {
return `<input onclick="a6 (this)" name="${row.id}" type="checkbox" value="${row.permission_remove}" checked = "checked"/>`;
}
}
function formatPrice7(val, row) {
if (row.permission_undo_archive == false) {
return `<input onclick="a7(this)" name="${row.id}" type="checkbox" value="${row.permission_undo_archive}" />`;
} else if (row.permission_undo_archive == true) {
return `<input onclick="a7 (this)" name="${row.id}" type="checkbox" value="${row.permission_undo_archive}" checked = "checked"/>`;
}
}
function formatPrice8(val, row) {
if (row.permission_write == false) {
return `<input onclick="a8(this)" name="${row.id}" type="checkbox" value="${row.permission_write}" />`;
} else if (row.permission_write == true) {
return `<input onclick="a8 (this)" name="${row.id}" type="checkbox" value="${row.permission_write}" checked = "checked"/>`;
}
}
function a8(val) {
var node = $('#tg').treegrid('find', val.name);
if (node.permission_write == false) { node.permission_write = true } else if (node.permission_write == true) { node.permission_write = false }
}
function a7(val) {
var node = $('#tg').treegrid('find', val.name);
if (node.permission_undo_archive == false) { node.permission_undo_archive = true } else if (node.permission_undo_archive == true) { node.permission_undo_archive = false }
}
function a6(val) {
var node = $('#tg').treegrid('find', val.name);
if (node.permission_remove == false) { node.permission_remove = true } else if (node.permission_remove == true) { node.permission_remove = false }
}
function a5(val) {
var node = $('#tg').treegrid('find', val.name);
if (node.permission_reject == false) { node.permission_reject = true } else if (node.permission_reject == true) { node.permission_reject = false }
}
function a4(val) {
var node = $('#tg').treegrid('find', val.name);
if (node.permission_read == false) { node.permission_read = true } else if (node.permission_read == true) { node.permission_read = false }
}
function a3(val) {
var node = $('#tg').treegrid('find', val.name);
if (node.permission_modify == false) { node.permission_modify = true } else if (node.permission_modify == true) { node.permission_modify = false }
}
function a2(val) {
var node = $('#tg').treegrid('find', val.name);
if (node.permission_confirm == false) { node.permission_confirm = true } else if (node.permission_confirm == true) { node.permission_confirm = false }
}
function a1(val) {
var node = $('#tg').treegrid('find', val.name);
if (node.permission_commit == false) { node.permission_commit = true } else if (node.permission_commit == true) { node.permission_commit = false }
}
function a(val) {
var node = $('#tg').treegrid('find', val.name);
if (node.permission_archive == false) { node.permission_archive = true } else if (node.permission_archive == true) { node.permission_archive = false }
}
function b() {
var cx = $("#tg").treegrid('getData');
var abc = []
cx.forEach(item => {
if (item.children != undefined) {
item.children.forEach(item1 => {
abc.push(item1)
})
}
})
console.log(abc)
}
</script>
</html>
treegrid_data4.json
{
"rows": [
{
"id": "ff808181795a6bbb01795acaff57001a",
"name": "全院"
},
{
"id": "ff808181795a6bbb01795acdb50f001b",
"name": "全院"
},
{
"id": "ff808181795a6bbb01795ad8d70e0029",
"name": " 医院"
},
{
"id": "ff808181795a6bbb01795ae5f999002e",
"name": " abc"
},
{
"id": "ff808181795a6bbb01795e0fdb90006c",
"name": " 病危通知单"
},
{
"id": "ff808181795a6bbb01795e132a850070",
"name": " 医院模板"
},
{
"_parentId": "ff808181795a6bbb01795e132a850070",
"id": "ff808181795f4a1e017963722ecd0076",
"name": " 测试222",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "e4e448c2795f215a01795f2396490002"
},
{
"_parentId": "ff808181795a6bbb01795e132a850070",
"id": "ff808181795f4a1e017963722ecf0077",
"name": " 测试333",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "e4e448c2795f215a01795f5c0b70002e"
},
{
"_parentId": "ff808181795a6bbb01795e132a850070",
"id": "ff808181795f4a1e017963722ed00078",
"name": " 333",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "e4e448c2795f215a01795f6f8a12002f"
},
{
"_parentId": "ff808181795a6bbb01795e132a850070",
"id": "ff808181795f4a1e017963722ed10079",
"name": " 测试444",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "e4e448c2795f215a01795f78538d0031"
},
{
"_parentId": "ff808181795a6bbb01795e132a850070",
"id": "ff808181795f4a1e017963722ed1007a",
"name": " 测试无数据源无id",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "e4e448c2795f215a01795f988dd10036"
},
{
"_parentId": "e4e4482178d832b60179120cf1d70441",
"id": "ff808181795f4a1e017963722ed3007b",
"name": "new template",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "ff808181795a6bbb01795af47d490037"
},
{
"_parentId": "ff808181795a6bbb01795ae5f999002e",
"id": "ff808181795f4a1e017963722ed4007c",
"name": " 123",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "ff808181795a6bbb01795af4b1490038"
},
{
"_parentId": "ff808181795a6bbb01795e132a850070",
"id": "ff808181795f4a1e017963722ed4007d",
"name": " 病危通知单",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "ff808181795a6bbb01795e13604b0071"
},
{
"_parentId": "ff808181795a6bbb01795e132a850070",
"id": "ff808181795f4a1e017963722ed6007e",
"name": " 24小时出入院记录",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "ff808181795a6bbb01795e18d3240072"
},
{
"_parentId": "ff808181795a6bbb01795e132a850070",
"id": "ff808181795f4a1e017963722ed7007f",
"name": " 出院记录",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "ff808181795a6bbb01795e2007860074"
},
{
"_parentId": "ff808181795a6bbb01795ae5f999002e",
"id": "ff808181795f4a1e017963722ed70080",
"name": " 测试111111",
"permission_archive": false,
"permission_commit": false,
"permission_confirm": false,
"permission_modify": false,
"permission_read": false,
"permission_reject": false,
"permission_remove": false,
"permission_undo_archive": false,
"permission_write": false,
"template_id": "ff808181795a6bbb01795e25e4640075"
}
],
"msg": "执行成功"
}
最终效果
点击查看所以数据后会将页面上所以的子级行的json打印出来，按照要求传给后台即可