11月26日总结生成数据前端代码

<div id="page-wrapper" >
<table class="layui-table" lay-data="{url: '${pageContext.request.contextPath}/sqlServlet', id:'test3', escape: true}" lay-filter="test3">
<thead>
<tr>
<th lay-data="{type:'checkbox'}">ID</th>
<th lay-data="{field:'column_name', 80, sort: true}">列名</th>
<th lay-data="{field:'remarks', 120, sort: true, edit: 'text'}">具体含义</th>
<th lay-data="{field:'column_def', edit: 'text', minWidth: 150}">默认值</th>
<th lay-data="{field:'type_name', 80, edit: 'text'}">字段类型</th>
<th lay-data="{field:'is_nullable', edit: 'text', minWidth: 100}">是否可为空</th>
<th lay-data="{field:'is_auto', sort: true, edit: 'text'}">是否为主键</th>
<th lay-data="{field:'size', sort: true, edit: 'text'}">字段大小</th>
<th lay-data="{field:'danwei', sort: true, edit: 'text'}">单位</th>
</tr>
</thead>
</table>


<script src="assets/js/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script>
<%
String colname=request.getParameter("colname");
request.getSession().setAttribute("colname",colname);
%>
layui.use(['table', 'util'], function(){
var table = layui.table
,util = layui.util;

//监听单元格编辑
table.on('edit(test3)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field//得到字段
var selector = obj.tr.selector+' td[data-field="'+obj.field+'"] div';
// 单元格编辑之前的值
var oldtext = $(selector).text();
layer.msg('[id: '+ data.column_name+'] ' + field + ' 字段更改值为:'+ util.escape(value));
$.ajax({
url: "editServlet",
type: "POST",
data: {field:field,value:value,data:data.column_name},
success: function (msg) {
var json = JSON.parse(msg);
var returnCode = json.returnCode;
if (returnCode == 200) {
//删除这一行
obj.del();
//关闭弹框
layer.close(index);
layer.msg("删除成功", {icon: 6});
} else {
layer.msg("删除失败", {icon: 5});
}
}
});
});
});
</script>


<!-- /. PAGE INNER -->
</div>
原文地址:https://www.cnblogs.com/lkwkk/p/15609629.html