layui的数据表格+springmvc实现修改数据功能包括单元格修改和form表单修改：
可以看看：
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});
}
});
});
} else 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});
}
}
});
}
var $ = layui.jquery, active = {
getCheckData: function(){//获取选中数据
var checkStatus = table.checkStatus('senstable')
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
,getCheckLength: function(){//获取选中数目
var checkStatus = table.checkStatus('senstable')
,data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
}
,isAll: function(){//验证是否全选
var checkStatus = table.checkStatus('senstable');
layer.msg(checkStatus.isAll ? '全选': '未全选')
}
,parseTable: function(){
table.init('parse-table-demo', {
limit: 3
});
}
,add: function(){
layer.open({
title:'新增敏感词语',
type:1,
area:['400px','300px'],
content:$("#form")
});
}
,delete: function(){
layer.confirm('确认删除吗？', function(index){
table.deleteRow('test')
layer.close(index);
});
}
,reload:function () {
var keyWord=$("#keyWord").val();
var keyType=$("#key_type option:selected").val();
table.reload('senstable',{
method:'post',
where:{keyWord:keyWord,keyType:keyType}
});
}
};
$('i').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$('.layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
}
</script>springmvc控制层：ajax返回数据到前端页面：
/**
* 修改敏感词
* @param sensitive
* @return
*/
@RequestMapping("/modiSens")
@ResponseBody
public int modiSens(Sensitive sensitive){
System.out.println("修改敏感词：");
System.out.println("ss:"+sensitive.toString());
int result=sensitiveService.updateSensitive(sensitive);
return result;
}
2.form表单修改：通过form表单的action传递数据，然后重定向回到页面
js:
if(obj.event === 'edit'){
//这里一般是发送修改的Ajax请求
EidtUv(data,obj);
}
function EidtUv(data,obj) {
$("#id").val(data.id);
$("#account").val(data.account);
$("#password").val(data.password);
$("#name").val(data.name);
$("#phone").val(data.phone);
$("#power").val(""+data.power);
$("#status").find("option[value = '"+data.status+"']").attr("selected","selected");
layer.open({
title:'修改管理员',
type:1,
area:['400px','400px'],
content:$("#form1")
});
}
jsp页面form表单：
<%--修改的弹框--%>
<form class="layui-form layui-form-pane1" id="form1" name="form1" style="display: none;" action="<%=request.getContextPath()%>/admin/modiAdmin" method="post" lay-filter="first1">
<div class="layui-form-item" style="display: none">
<label class="layui-form-label">id</label>
<div class="layui-input-inline">
<input type="text" name="id" id="id" lay-verify="required|title" required placeholder="请输入账号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="account" id="account" lay-verify="required|title" required placeholder="请输入账号" readonly="readonly" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" id="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" name="name" id="name" lay-verify="required|" required placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机</label>
<div class="layui-input-inline">
<input type="tel" name="phone" id="phone" lay-verify="required|number" placeholder="请输入使用者手机号码" lay-verType="tips" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限</label>
<div class="layui-input-inline">
<select name="power" id="power" lay-verify="required|" lay-filter="interest-search" lay-search>
<option value=""></option>
<option value="一般管理员">一般管理员</option>
<option value="超级管理员" >超级管理员</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<select name="status" id="status" lay-verify="required|" lay-filter="interest-search" lay-search>
<option value=""></option>
<option value="启用">启用</option>
<option value="停用" >停用</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">修改</button>
</div>
</div>
</form>
js全貌：
<script>
layui.use('table', function(){
var table = layui.table;
//渲染
table.render({
elem: '#test' //绑定table表格
,height: 450
,url: '<%=request.getContextPath()%>/admin/backAdmins' //后台springmvc接收路径
,page:true //true表示分页
,limit: 10
,id:'adminstable'
,toolbar: '#toolbarDemo'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'account', title:'账号', width:120}
,{field:'password', title:'密码', width:120}
,{field:'name', title:'姓名', width:100}
,{field:'phone', title:'电话', width:120}
,{field:'power', title:'权限', width:100}
,{field:'status', title:'状态', width:120}
,{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/delAdmin",
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});
}
});
});
} else if(obj.event === 'edit'){
//这里一般是发送修改的Ajax请求
EidtUv(data,obj);
}
});
function EidtUv(data,obj) {
$("#id").val(data.id);
$("#account").val(data.account);
$("#password").val(data.password);
$("#name").val(data.name);
$("#phone").val(data.phone);
$("#power").val(""+data.power);
$("#status").find("option[value = '"+data.status+"']").attr("selected","selected");
layer.open({
title:'修改管理员',
type:1,
area:['400px','400px'],
content:$("#form1")
});
}
var $ = layui.jquery, active = {
getCheckData: function(){//获取选中数据
var checkStatus = table.checkStatus('adminstable')
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
,getCheckLength: function(){//获取选中数目
var checkStatus = table.checkStatus('adminstable')
,data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
}
,isAll: function(){//验证是否全选
var checkStatus = table.checkStatus('adminstable');
layer.msg(checkStatus.isAll ? '全选': '未全选')
}
,parseTable: function(){
table.init('parse-table-demo', {
limit: 3
});
}
,add: function(){
layer.open({
title:'增加管理员',
type:1,
area:['400px','400px'],
content:$("#form")
});
}
,delete: function(){
layer.confirm('确认删除吗？', function(index){
table.deleteRow('test')
layer.close(index);
});
}
,reload:function () {
var keyWord=$("#keyWord").val();
var keyType=$("#key_type option:selected").val();
table.reload('adminstable',{
method:'post',
where:{keyWord:keyWord,keyType:keyType}
});
}
};
$('i').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$('.layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$('#exportExcel').on('click',function () {
alert("expppppppppppp");
var checkStatus = table.checkStatus('adminstable')
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
$.ajax({
type:"post",
url: "<%=request.getContextPath()%>/export",
async:true,
contentType : "application/json",
dataType: "json",
data:{
list:JSON.stringify(data)
},
success: function( data ) {
alert("sdfsf")
}
});
})
});
</script>
springmvc控制层：重定向回到页面
/**
* 修改管理员信息
* @param admins
* @return
*/
@RequestMapping("/modiAdmin")
public String modiAdmin(Admins admins){
System.out.println("修改开始");
int index=adminsService.modiAdmin(admins);
return "redirect:/admin/backAdminsjsp";
}
/**
* 跳转到后台管理员页面
* @return
*/
@RequestMapping("/backAdminsjsp")
public String backContentjsp(){
return "/backpages/adminslist";
}
我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。
