前端框架layui
<table class="layui-table" lay-filter="addTable" id="addTable">
<button id="addField" class="layui-btn layui-btn-normal" type="button" lay-filter="addField">添加字段</button>
<button id="reduceField" class="layui-btn layui-btn-normal" type="button" lay-filter="reduceField">减少字段</button>
table.render({
elem: ‘#addTable‘ ,
url: Feng.ctxPath + ‘/reorganizeTemplate/getJson‘,// 返回的是2行空白的json，目的是初始化表格用
page: false,
cellMinWidth: 100,
cols: [
[
{field: ‘id‘, align:‘center‘, title: ‘序号‘},
{field: ‘fieldName‘, align:‘center‘, edit: ‘text‘, title: ‘字段名称‘},
{field: ‘fieldType‘, align:‘center‘, edit: ‘text‘, title: ‘字段类型‘},
]
]
});
?
$(‘#addField‘).on(‘click‘, function(){
table.reload(‘addTable‘,{
url:Feng.ctxPath + ‘/reorganizeTemplate/kAdd‘,// 新增一行空白的json
});
});
?
$(‘#reduceField‘).on(‘click‘, function(){
table.reload(‘addTable‘,{
url:Feng.ctxPath + ‘/reorganizeTemplate/kReduce‘,// 删除一行空白的json
});
});
// 获取表格内所有数据，定义变量接收
var str = JSON.stringify(table.cache)
// 后端用String接收，然后解析json即可
?效果图
总结：
优点：动态渲染表格，可以直接编辑表格内容，
缺点：每次添加或者减少字段，表格都会重载，如果提前填写了数据会消失
前端样式调用后端接口，不推荐使用！ 纯娱乐！