layui的数据表格+springmvc实现修改数据功能包括单元格修改和form表单修改:
可以看看:
layui的数据表格+springmvc实现数据显示,分页功能
layui的数据表格+springmvc实现搜索功能
layui的数据表格+springmvc实现增加数据功能
1.单元格修改:通过ajax传数据
js:
if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.word
}, function(value, index){
EidtUv(data,value,index,obj);
});
}
function EidtUv(data,value,index,obj) {
$.ajax({
url: "<%=request.getContextPath()%>/admin/modiSens",
type: "POST",
data:{"id":data.id,"word":value},
dataType: "json",
success: function(result){
if(result>=1){
layer.close(index);
//同步更新表格和缓存对应的值
obj.update({
word: value
});
layer.msg("修改成功", {icon: 6});
}else{
layer.msg("修改失败", {icon: 5});
}
}
});
}
js全貌:
<script>
layui.use('table', function(){
var table = layui.table;
//渲染
table.render({
elem: '#test' //绑定table表格
,height: 450
,url: '<%=request.getContextPath()%>/admin/backSens' //后台springmvc接收路径
,page:true //true表示分页
,limit: 10
,id:'senstable'
,toolbar: '#toolbarDemo'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'id', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'word', title:'敏感词', width:120}
,{field:'time', title:'创建时间', width:180, sort: true}
,{field:'right', title: '操作', width:177,toolbar:"#barDemo"}
]]
});
//监听表格行点击
table.on('tr', function(obj){
console.log(obj)
});
//监听表格复选框选择
table.on('checkbox(test)', function(obj){
console.log(obj)
});
//监听表格单选框选择
table.on('radio(test2)', function(obj){
console.log(obj)
});
//监听单元格编辑
table.on('edit(test2)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
$.ajax({
url: "<%=request.getContextPath()%>/admin/delSens",
type: "POST",
data:{"id":data.id},
dataType: "json",
success: function(data){
obj.del();
layer.close(index);
layer.msg("删除成功", {icon: 6});
},
error:function (data) {
layer.msg("删除失败", {icon: 5});
}
});