<table class="layui-hide" id="user-index" lay-filter="user-index"></table>
<script>
layui.use(['layer', 'table'], function () {
var $ = layui.$
, layer = layui.layer
, form = layui.form
, table = layui.table; //独立版的layer无需执行这一句
var tableId = 'user-index';
var tableToolbar = 'user-index-toolbar';
var tableSearchForm = 'user-index-search';
var minWidth = 768;
// 表格渲染
table.render({
elem: '#' + tableId
, toolbar: '#' + tableToolbar
, defaultToolbar: ['filter'] // ['filter', 'print', 'exports']
, url: '/User/list'
,where:{'username':'','realname':'','tel':'','city':'','isdelete':0}
, method: 'get'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
, cols: [[
{type: 'checkbox', id:'cb',fixed: 'left'}
, {field: 'id', width: 80, title: 'ID', sort: true}
, {field: 'username', width: 212, title: '用户名', sort: true}
, {field: 'realname', width: 100, title: '姓名'}
, {field: 'sex', width: 105, title: '性别'}
, {field: 'tel', width: 180, title: '手机号'}
, {field: 'city', width: 120, title: '城市', sort: true}
, {field: 'role', width: 100, title: '角色ID', sort: true}
, {
title: '状态', width: 150,
templet: function (res) {
if (res.status == '1') {
return '已激活(使用中)';
} else {
return '<span style="color: #F581B1;">冻结(过期请续费)</span>';
}
}
}
]]
, page: true
,limit:7
, height: 'full-60' // 100
});
头工具栏的监听
table.on('toolbar(' + tableId + ')', function (obj) {
var checkStatus = table.checkStatus(obj.config.id)
, data = checkStatus.data;
console.log(data) //获取选中行的数据
结果我选中一条或者是多条数据之后都获取不到数据,table的id我也检查过了没问题。
前端控制台输出是这样的:
Object
data: Array(0)
length: 0
__proto__: Array(0)
isAll: false
__proto__: Object
但是我又试了全选,神奇的发现全选能选择,有没有大佬能帮忙解释下这是什么问题啊,怎么才能解决
全选数据都是有的,但单选或者选择部分就不行,输出都都是0
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
<body>
<table class="layui-hide" id="user-index" lay-filter="user-index"></table>
<script type="text/html" id="user-index-toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-3.4.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.all.js"></script>
<script>
layui.use(['layer', 'table'], function () {
var $ = layui.$
, layer = layui.layer
, form = layui.form
, table = layui.table; //独立版的layer无需执行这一句
var tableId = 'user-index';
var tableToolbar = 'user-index-toolbar';
var tableSearchForm = 'user-index-search';
var minWidth = 768;
// 表格渲染
table.render({
elem: '#'+tableId
, toolbar: '#' + tableToolbar
, defaultToolbar: ['filter'] // ['filter', 'print', 'exports']
, url: '${pageContext.request.contextPath}/list'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 ,where:{'username':'','realname':'','tel':'','city':'','isdelete':0}
,where:{'username':'','realname':'','tel':'','city':'','isdelete':0}
, method: 'get'
, cols: [[
{type: 'checkbox', id: 'cb', fixed: 'left'}
, {field: 'id', width: 80, title: 'ID', sort: true}
, {field: 'username', width: 212, title: '用户名', sort: true}
, {field: 'password', width: 100, title: '姓名'}
]]
, page: true
, limit: 7
, height: 'full-60' // 100
,request:{
pageName:'requestPage', //页码
limitName:'pageSize' //每页的数量
},
response: {
statusName: 'status', //数据状态的字段名称,默认:code
statusCode: true, //成功的状态码,默认:0
countName: 'totalCount', //数据总数的字段名称,默认:count
dataName: 'resultLists' //数据列表的字段名称,默认:data
}
});
table.on('toolbar(' + tableId + ')', function (obj) {
var checkStatus = table.checkStatus(obj.config.id)
, data = checkStatus.data;
console.log(data) //获取选中行的数据
});
});
</script>
</html>
阿斯顿
应该是 js 和 引入得 jqery 版本冲突了
请问解决了吗?我也遇到同样的问题了
请问你解决了吗,我也碰到这个问题...
解决了,这个跟引layui的js包有关。我是把原来项目中的layui-js包在文件夹中删了,重新放了在官网下的最新的放进去,再引用,最好是用那个all-js。就解决了
我的解决方式:table.rander()中添加id参数{id: 'id'}