|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<title>Demo</title>
|
|
|
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
|
|
|
<link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
|
|
|
<style>
|
|
|
.woo-tool-text-delimiter {
|
|
|
width: 1px;
|
|
|
height: 12px;
|
|
|
background: #EEEEEE;
|
|
|
display: inline-block;
|
|
|
margin: 0 6px 0 4px;
|
|
|
}
|
|
|
|
|
|
.woo-theme-color {
|
|
|
color: #1e9fff !important;
|
|
|
}
|
|
|
|
|
|
.woo-tool-span {
|
|
|
margin: 0 3px;
|
|
|
position: relative;
|
|
|
top: -1px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.layui-card-body .layui-form {
|
|
|
margin-top: 0 !important;
|
|
|
}
|
|
|
|
|
|
.layui-form-select {
|
|
|
width: 300px;
|
|
|
}
|
|
|
|
|
|
.layui-card {
|
|
|
margin-bottom: 15px;
|
|
|
border-radius: 2px;
|
|
|
background-color: #fff;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<table class="layui-hide" id="ID-table-demo-data"></table>
|
|
|
|
|
|
<script type="text/html" id="table-bar">
|
|
|
<span class="woo-tool-span woo-tool-text-span" lay-event="add"><a
|
|
|
class="woo-theme-color">向下插入</a></span>
|
|
|
<span class="woo-tool-span woo-tool-text-span" lay-event="delete"><a
|
|
|
class="woo-theme-color">删除</a></span>
|
|
|
</script>
|
|
|
|
|
|
<button type="button" class="layui-btn" id="getData">获取数据</button>
|
|
|
|
|
|
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
|
|
|
<script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
|
|
|
<script>
|
|
|
layui.use('table', function () {
|
|
|
var table = layui.table;
|
|
|
var $ = layui.jquery;
|
|
|
|
|
|
var _data = [
|
|
|
{
|
|
|
"行政区划": "昆明市",
|
|
|
"内容一": "1. 与2022年相比，昆明市未来几年，学前教育幼儿入园人数增长不大；",
|
|
|
"学段": "学前",
|
|
|
"内容二": "2. 至2035年预计在十万左右，仅增加几千人；",
|
|
|
"内容三": "3. 未来城区、镇区幼儿入园人数将略有增加，而乡村幼儿入园人数将明显减少。",
|
|
|
"内容四": null,
|
|
|
"类型": "入园幼儿"
|
|
|
},
|
|
|
{
|
|
|
"行政区划": "昆明市",
|
|
|
"内容一": "1. 与2022年相比，昆明市未来几年，学前教育幼儿在园人数将略有增长；",
|
|
|
"学段": "学前",
|
|
|
"内容二": "2. 至2035年预计达到三十三万左右，增加3万人左右。",
|
|
|
"内容三": null,
|
|
|
"内容四": null,
|
|
|
"类型": "在园幼儿"
|
|
|
},
|
|
|
{
|
|
|
"行政区划": "昆明市",
|
|
|
"内容一": "1. 与2022年相比，昆明市未来几年，小学招生数增长不大；",
|
|
|
"学段": "小学",
|
|
|
"内容二": "2.至2035年预计在十万左右，增加约几千人；",
|
|
|
"内容三": "3. 未来城区、镇区小学招生数增长不太大；",
|
|
|
"内容四": "4. 城区招生数所占比重较大，乡村小学招生数将明显减少。",
|
|
|
"类型": "招生总数"
|
|
|
},
|
|
|
{
|
|
|
"行政区划": "昆明市",
|
|
|
"内容一": "1. 小学在校生数略有增长，至2035年预计在60万人左右，增加约5万人；",
|
|
|
"学段": "小学",
|
|
|
"内容二": "2. 未来城区、镇区小学在校生数增长不太大；",
|
|
|
"内容三": "3. 城区在校生数所占比重较大，乡村小学在校生数将明显减少。",
|
|
|
"内容四": null,
|
|
|
"类型": "在校生总数"
|
|
|
},
|
|
|
{
|
|
|
"行政区划": "昆明市",
|
|
|
"内容一": "1. 与2022年相比，昆明市未来几年，初中招生数增长不大；",
|
|
|
"学段": "初中",
|
|
|
"内容二": "2. 至2035年预计在8.5万人左右，增加约几千人；",
|
|
|
"内容三": "3. 未来城区、镇区初学招生数增长变化不明显；",
|
|
|
"内容四": "4. 城区招生数所占比重依然较大，乡村初中招生数明显减少。",
|
|
|
"类型": "招生总数"
|
|
|
},
|
|
|
{
|
|
|
"行政区划": "昆明市",
|
|
|
"内容一": "1. 初中在校生数增加变化也不太大，至2035年预计在25万人左右，增加约2万人；",
|
|
|
"学段": "初中",
|
|
|
"内容二": "2. 未来城区、镇区初学在校生数增长变化不明显；",
|
|
|
"内容三": "3. 城区在校生数所占比重依然较大，乡村初中在校生数明显减少。",
|
|
|
"内容四": null,
|
|
|
"类型": "在校生总数"
|
|
|
},
|
|
|
{
|
|
|
"行政区划": "昆明市",
|
|
|
"内容一": "1. 与2022年相比，昆明市未来几年，普通高中招生数增长近五千人左右，达到约5.5万人；",
|
|
|
"学段": "高中",
|
|
|
"内容二": "2. 未来城区、镇区普通高中招生数增长变化不明显；",
|
|
|
"内容三": "3. 城区招生数所占比重依然较大，乡村普通高中招生数明显减少。",
|
|
|
"内容四": null,
|
|
|
"类型": "招生总数"
|
|
|
},
|
|
|
{
|
|
|
"行政区划": "昆明市",
|
|
|
"内容一": "1. 在校生数增加约一万人左右增长，达到约15.5万人左右；",
|
|
|
"学段": "高中",
|
|
|
"内容二": "2. 未来城区、镇区普通高中在校生数增长变化不明显；",
|
|
|
"内容三": "3. 城区在校生数所占比重依然较大，乡村普通高中在校生数明显减少。",
|
|
|
"内容四": null,
|
|
|
"类型": "在校生总数"
|
|
|
}
|
|
|
];
|
|
|
|
|
|
|
|
|
var _cols = [];
|
|
|
let keys = Object.keys(_data[0]);
|
|
|
|
|
|
keys.forEach((item, index) => {
|
|
|
var _obj = { field: item, title: item, edit: 'text' }
|
|
|
_cols.push(_obj);
|
|
|
});
|
|
|
_cols.push({ title: '操作1', toolbar: '#table-bar' });
|
|
|
|
|
|
|
|
|
|
|
|
// 已知数据渲染
|
|
|
var inst = table.render({
|
|
|
elem: '#ID-table-demo-data',
|
|
|
id: 'ID-table-demo-data',
|
|
|
page: false,
|
|
|
cols: [_cols],
|
|
|
data: _data,
|
|
|
limits: [5, 10, 15],
|
|
|
limit: 5 // 每页默认显示的数量
|
|
|
});
|
|
|
|
|
|
table.on('tool(ID-table-demo-data)', function (obj) {
|
|
|
|
|
|
if (obj.event === 'add') {
|
|
|
|
|
|
let _obj = {
|
|
|
"行政区划": "",
|
|
|
"内容一": "",
|
|
|
"学段": "",
|
|
|
"内容二": "",
|
|
|
"内容三": "",
|
|
|
"内容四": "",
|
|
|
"类型": ""
|
|
|
};
|
|
|
|
|
|
// 在索引3之后插入对象
|
|
|
_data.splice(obj.index + 1, 0, _obj);
|
|
|
|
|
|
table.cache['ID-table-demo-data'] = _data;
|
|
|
|
|
|
table.renderData('ID-table-demo-data');
|
|
|
|
|
|
|
|
|
} else {
|
|
|
var cacheData = table.cache['ID-table-demo-data'];
|
|
|
cacheData.splice(obj.index, 1)
|
|
|
table.renderData('ID-table-demo-data');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
$("#getData").click(function () {
|
|
|
console.log(table.cache['ID-table-demo-data']);
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
