layui table 多选功能（单选功能）
jsp页面
引入的js
<script src="${baseurl}/layuimin/lib/layui/layui.js" charset="utf-8"></script>
js代码 checkbox多选框-B
{type: 'radio',title: '单选' }
layui.use([ 'table'], function () {
var $ = layui.jquery,
table = layui.table;
table.render({
elem: '#currentTableId',
url: '${baseurl}/自己写的接口路径/list',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type:'checkbox', fixed: 'left'},
{field: 'id', width: 80, title: 'ID',hide: true},
{field: 'title', minWidth: 180, title: '题目'},
{field: 'answer', minWidth: 180, title: '答案'},
{field: 'resolve', minWidth: 180, title: '解析'},
{field: 'timing', width: 75, title: '时长'},
{field: 'grade', width: 75, title: '分数'},
{field: 'categoryname', width: 120, title: '类别'},
{field: 'typename', width: 90, title: '类型',templet:function (d) {
if(d.typeid == 1 || d.typeid == 2){
return ''+d.typename+'';
}else {
return d.typename;
}
}},
{field: 'createuser', width: 150, title: '创建人员',hide: true},
{field: 'createtime', width: 180, title: '创建时间',hide: true},
{field: 'updateuser', width: 150, title: '修改人员',hide: true},
{field: 'updatetime', width: 180, title: '修改时间',hide: true},
{
field: 'opt', width: 80, align: 'center',fixed: "right", templet: function (d) {
if (d.del == 1) {
return '禁用';
}else {
return '启用';
}
}, title: '锁定'
},
{title: '操作', width: 300, templet: '#currentTableBar', fixed: "right", align: "center"}
]],
id: 'testReload' ,
limits: [10, 15, 20, 25, 50, 100],
limit: 10,
page: true,
height: 'full-200',
cellMinWidth: 80,
request: {
pageName: 'page', //页码的参数名称，默认：page
limitName: 'rows' //每页数据量的参数名，默认：limit
},
});
body中代码-A
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div class="demoTable">
名称：
<div class="layui-inline">
<input class="layui-input" name="title" id="title" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
<button class="layui-btn layui-bg-cyan" data-type="delCheckData">批量操作</button>
</div>
</fieldset>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-bg-cyan" lay-event="add"> 添加</button>
<button class="layui-btn layui-btn-sm layui-bg-red" lay-event="upload"> 导入管理</button>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-xs layui-bg-gray" lay-event="see">预览</a>
<a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-bg-cyan" lay-event="delete">删除</a>
</script>
</div>
</div>
js代码-C
var $ = layui.$, active = {
// 选项
reload: function(){
var title = $('#title');
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
key: {
title : title.val()
}
}
}, 'data');
},
delCheckData: function(){
//获取选中数据
var checkStatus = table.checkStatus('testReload')
,data = checkStatus.data;
var newJson = []
$.each(data, function (index, item) {
newJson.push(item.id);
})
newJson.join(",");
if (newJson.length == 0){
layer.msg("请选择需要操作数据")
}else {
layer.confirm('注：批量操作选项', {
skin: 'demo-class',
title: "选择",
btn : ['删除','取消'],
btn1:function(index){
var indexs = layer.load(2, {
time: 60000,
shade: [0.5, 'gray'], //0.5透明度的灰色背景
content: '数据执行中......',
success: function (layero) {
layero.find('.layui-layer-content').css({
'padding-top': '39px',
'width': '150px'
});
}
});
$.ajax({
url : "请求的url地址?id="+newJson, //请求的url地址
dataType : "json", //返回格式为json
async : true,//请求是否异步，默认为异步，这也是ajax重要特性
type : "POST", //请求方式
success : function(data) {
// 关闭弹出层
layer.close(indexs);
// 提示和刷新数据
layer.msg(data.msg, {
icon: 1,
time: 1500 //1.5秒关闭（如果不配置，默认是3秒）
}, function(){
if (data.success == true) {
// 关闭弹出层
$(".layui-laypage-btn").click();
layer.close(index);
layui.table.reload('testReload');
}
});
},
complete : function() {
//请求完成的处理
},
error : function() {
//请求出错处理
layer.alert("系统异常");
}
});
},
btn2:function(index){
return ;
},
btn3:function(){
return ;
}
});
}
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
java 代码
结果集-D
public class AjaxJson {
private Integer code;
private String msg;
private long count;
private Object data;
setter和getter省略......
}
java方法-E
@RequestMapping("/list")
@ResponseBody
public Object list(HttpServletRequest request, 对象 vo){
AjaxJson info = new AjaxJson ();
try {
// 分页功能
if(vo.getPage() != null && vo.getPage() != 0){
vo.setPage((vo.getPage() - 1) * vo.getRows());
}
// 这个是获取页面传过来的数据查询功能 必须按照 key[名称]来获取
vo.setUsername(request.getParameter("key[username]"));
//总数
long count = matterService.sercvice方法(vo);
//列表
List<对象> list = matterService.sercvice方法(vo);
info.setCount(count);
info.setData(list);
// 请求成功必须为0
info.setCode(0);
}catch (Exception e){
info.setMsg(e.toString());
log.info(e.toString());
e.printStackTrace();
}
return info;
}
一个具有注脚的文本。12
JSP页面顺序按照 A->B->C ↩︎
java代码顺序按照D->E ↩︎