layui表格动态渲染
动态表格的渲染
layui.use(['table','form','layer','jquery'], function() {
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
var $ = layui.jquery;
//动态表格渲染
table.render({
elem: '#test',
url: '${pageContext.request.contextPath }/TeacherInfoController/selectAllTeacherInfo',
toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '教师信息表',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
title: '教师信息标表',
response: {
statusName: 'code' //数据状态的字段名称，默认：code
,statusCode: 0 //成功的状态码，默认：0
,msgName: '' //状态信息的字段名称，默认：msg
,countName: 'count' //数据总数的字段名称，默认：count
,dataName: 'data' //数据列表的字段名称，默认：data
},
cols: [
[{
type: 'checkbox',
fixed: 'left'
}, {
field: 'tid',
title: '序号',
width: 60,
}, {
field: 'tname',
title: '教师姓名',
width: 80,
}, {
field: 'tpolitical',
title: '政治面貌',
width: 90,
edit: 'text'
}, {
field: 'tidnetitycard',
title: '身份证号',
width: 115,
edit: 'text',
}, {
field: 'taddress',
title: '住址'
}, {
field: 'timg',
title: '教师头像',
width: 95
}, {
field: 'tphone',
title: '手机号码',
width: 90,
edit: 'text',
}, {
field: 'temial',
title: '邮箱',
width: 85,
}, {
field: 'tsex',
title: '性别'
}, {
field: 'tbirthday',
title: '出生日期',
width: 108,
}, {
field: 'teducation',
title: '学历',
width: 90,
}, {
field: 'tgraduate',
title: '毕业学校',
width: 108,
}, {
field: 'tmajor',
title: '所学专业',
width: 108,
}, {
field: 'thiredate',
title: '入职时间',
width: 108,
},{
field: 'tnum',
title: '教师编号',
width: '85',
},{
field: 'ttile',
title: '职称',
width: '80',
}, {
field: 'tpostion',
title: '职位',
width: '75',
},{
filed:'operation',
toolbar: '#barDemo',
title:'操作',
width:150
}]
],
page: true,
limit:5,
limits:[5,8,10,15,20],//可选择每页显示的数量
skin:'row',
even:true
});
根据条件查询
1.页面代码部分
<form class="layui-form layui-col-md12 x-so" id="complain_search">
教师姓名:
<div class="layui-input-inline">
<input type="text" name="tname" id="tname" placeholder="请输入查询的教师姓名" autocomplete="off" class="layui-input">
</div>
<button id="search" class="layui-btn" lay-submit lay-filter="teachSearch">
<i class="layui-icon"></i>
</button>
</form>
2.实现部分：
2.1.方法一：
layui.define(['form','table'],function () {
var form = layui.form;
var table = layui.table;
form.on('submit(teachSearch)',function (data) {
var tname = data.field.tname;
alert(tname);
table.reload('test',{
page:{curr:1},
where:{tname:tname},
method:'post',
url:'${pageContext.request.contextPath }/TeacherInfoController/selectTeacherInfoByName'
});
return false;
});
});
2.2.方法2：（一般推荐使用方法2）
layui.use(['table','form','layer'],function(){
var $ = layui.jquery;
//搜索功能第二种
$('.teacher_search.layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
var $ = layui.$, active = {
reload: function () {
var tname = $('#tname');
//执行重载
table.reload('tname', {
page:{curr:1},
where: {
key: {
field: tname.val()
}
},
method:'post',
url:'${pageContext.request.contextPath }/TeacherInfoController/selectTeacherInfoByName'
});
}
};
$('.teacher_search .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
// 刷新表格
$('#btn-refresh').on('click', function () {
tableIns.reload()
});
});
3.修改操作
3.1.修改部分代码
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
3.2.弹框部分代码
<div class="layui-row" id="popUpdateTeacherInfo" style="display:none;">
<div class="layui-col-md10">
<form class="layui-form layui-from-pane" lay-filter="formTeacherFilter" action="" style="margin-top:20px" >
<div class="layui-form-item">
<label class="layui-form-label">教师编号:</label>
<div class="layui-input-block">
<input type="text" name="teacherNum" id="teacherNum" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">教师职称</label>
<div class="layui-input-block">
<input type="text" name="teacherTitle" id="teacherTitle" required lay-verify="required" autocomplete="off" placeholder="请输入教师职务" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top:40px">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="upload">确认修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</body>
3.3.核心部分代码
在这里插 //修改
else if(obj.event === 'edit') {
//弹出修改教师信息页面
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
}else if(obj.event === 'edit'){
//弹出修改框
layer.open({
type:1, //layer提供了5种层类型。可传入的值有：0:（信息框，默认）,1:（页面层）,2:（iframe层）,3:（加载层）,4:（tips层）
title:'修改教师信息',
area:['420px','300px'],
content:$("#popUpdateTeacherInfo") //引入弹出层页面
})
uploadFormValue(obj,data);
}
}
});
//监听弹出框表单提交，massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
function uploadFormValue (obj,data) {
form.val("formTeacherFilter",{
"teacherNum":data.tnum,
"teacherTitle":data.ttile
});
form.on('submit(upload)',function (message) {
var teacherNum = document.getElementById("teacherNum").value;
var teacherTitle = document.getElementById("teacherTitle").value;
$.ajax({
type:'post',
url:'${pageContext.request.contextPath }/TeacherInfoController/updateTeacherInfoByTeacherNum',
data:{
teacherNum:teacherNum,
teacherTitle:teacherTitle
},success:function(data){
alert(data);
if (data == 1){
layer.closeAll('loading'),
layer.load(3);
layer.msg("修改数据成功",{icon:6});
setTimeout(function () {
alert("恭喜修改成功,3秒后跳转")
},3000);
window.location.href ="${pageContext.request.contextPath }/pageJumpController/enterTeacherInfoList";
layer.closeAll();
}
if(data == 0){
layer.msg("修改数据失败",{icon:5});
}
}
})
})
}
});入代码片
4.删除操作
//监听行工具事件
table.on('tool(test)', function(obj) {
var data = obj.data;
console.log(obj);
//查看
if (obj.event == 'detail'){layer.msg('ID：' + data.id + ' 的查看操作');}
//删除
else if(obj.event === 'del') {
layer.confirm('真的删除行么', function(index) {
$.ajax({
type:'post',
url:'${pageContext.request.contextPath }/TeacherInfoController/deleteTeacherInfoByTeacherNum',
data:{teacherNum:data.tnum},
success:function(data){
if (data == 1){
obj.del();
layer.close(index);
parent.layer.msg("删除成功", {icon: 6});
//parent.location.reload();
window.location.href ="${pageContext.request.contextPath }/pageJumpController/enterTeacherInfoList";
}
if(data == 0){
parent.layer.msg("删除失败", {icon: 5});
}
}
})
});
}
批量删除
/头工具栏事件
table.on('toolbar(test)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event) {
case 'getCheckData':
var data = checkStatus.data;
if(data == 0){layer.msg("至少选择一行数据进行删除吧",{icon:2});}
else{
layer.alert(JSON.stringify(data));
var tinfos = "";
var tinfo = new Array();
/*for (var i = 0; i<data.length; i++){
tinfo.push(data[i].tid);
if (data[i].size-1 == i){
tinfo.push(data[i].tid+",");
}
}*/
for (var i in data){
tinfos += data[i].tid +",";
}
//alert(tinfo);
alert(tinfos)
layer.msg("开始批量删除中。。。。",{icon:16,shade:0.2,time:5000,})
$.ajax({
type:'post',
url:'${pageContext.request.contextPath }/TeacherInfoController/batchDeletionTeacherInfo',
data:{tinfos,tinfos},
success:function (data) {
parent.layer.closeAll('loading.....');
if(data == 1){
parent.layer.msg('批量删除成功！', {icon: 1,time:3000,shade:0.3});
window.location.href ="${pageContext.request.contextPath }/pageJumpController/enterTeacherInfoList";
}
if(data == 0){
parent.layer.msg('批量删除失败！', {icon: 2,time:3000,shade:0.3});
}
}
});
};
break;
注：批量删除sql语句写法
在这里插<delete id="batchDeletionTeacherInfoByTeacherID">
delete from teacher where tid in
<!-- forEach : 用来循环 collection : 用来指定循环的数据的类型 可以填的值有：array,list,map item
: 循环中为每个循环的数据指定一个别名 index : 循环中循环的下标 open : 开始 close : 结束 separator : 数组中元素之间的分隔符 -->
<foreach collection="list" item="tlist" open="(" close=")" separator=",">
#{tlist}
</foreach>
</delete>入代码片
1223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
