-
2020-12-31 00:52:17
//监听头工具栏事件
table.on('toolbar(zq_table)', function(obj){
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data; //获取选中的数据
//json字符串转换成Json数据 eval("("+jsonStr+")") /JSON.parse(jsonStr)
data = eval("("+JSON.stringify(data)+")");
switch(obj.event){
case 'delAll':
if(data.length === 0){
layer.msg('请至少选择1行', { icon: 2, time: 1500 });
}else {
layer.alert('您确认要删除'+data.length+'条数据吗?', {
skin: 'layui-layer-molv' //样式类名layui-layer-lan或layui-layer-molv 自定义样式
,closeBtn: 1 // 是否显示关闭按钮
,anim: 1 //动画类型
,btn: ['确定','取消'] //按钮
,icon: 2 // icon
,yes:function(){
// layer.msg('确定', { icon: 1, time: 1500 });
for (var i=0;i
console.debug("id:======"+data[i].id)
//发送请求到后台
$.post("menu/delete", { id: data[i].id }, function (result){
if (result.code == "1") {//删除成功,刷新当前页表格
// obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
layer.msg(result.msg, { icon: 1, time: 1500 });
// layer.close(index);
$(".layui-laypage-btn").click();//点击分页刷新当前页
}else if(result.code == "-1"){ //删除失败
layer.alert(result.msg, { icon: 2},function (){
$(".layui-laypage-btn").click();
window.location.reload();
});
}
});
}
/* //捉到所有被选中的,发异步进行删除
layer.msg('删除成功', {icon: 1});
$(".layui-form-checked").not('.header').parents('tr').remove();*/
}
,btn2:function(){
layer.msg('好的,暂时不给您删除。',{ icon: 1, time: 1500 });
}
});
}
break;
case 'add':
zq_form('添加菜单','url这个值不管','','');
//数据回显
// $("#zq_form").setForm({id:data.id,name: data.name, url: data.url,icon:data.icon,parent:data.parent,children:data.children});
$("#zq_form").setForm({id:''});
break;
}
});
//监听行工具事件
table.on('tool(zq_table)', function(obj){ //注:tool 是工具条事件名,zq_table 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象
switch(layEvent){
case 'detail':
//json字符串转换成Json数据 eval("("+jsonStr+")") /JSON.parse(jsonStr)
var jsonstr = JSON.stringify(data);//json数据转字符串 JSON.stringify(obj)
layer.alert(jsonstr);
break;
case 'del':
layer.confirm('您确定删除id:'+data.id+'的数据吗?', function(index){
//向服务端发送删除指令,在这里可以使用Ajax异步
$.post("menu/delete", { id: data.id }, function (ret){
if (ret.code == "1") {//删除成功,刷新当前页表格
layer.msg(ret.msg, { icon: 1, time: 1500 }, function (){
obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
layer.close(index);
// $(".layui-laypage-btn").click();//点击分页刷新当前页
});
}else if(ret.code == "-1"){ //删除失败
layer.alert(ret.msg, { icon: 2},function (){
layer.close(index);
// $(".layui-laypage-btn").click();
window.location.reload();
});
}
});
});
break;
case 'edit':
console.debug(data);
zq_form('编辑菜单','url这个值不管',500,400);
//数据回显
$("#zq_form").setForm({id:data.id,name: data.name, url: data.url,icon:data.icon,parent:data.parent,children:data.children});
break;
}
});
更多相关内容 -
layui table分页后记录选中状态
2020-08-01 11:10:12table class="layui-table" lay-size="sm" id="list1" lay-filter="list1"></table> var ids = [];//选中的数据 var dataArr= [];//当前页面数据 table.render({ elem: '#list1', url: '/admin_8v2...<div class="list1"> <table class="layui-table" lay-size="sm" id="list1" lay-filter="list1"></table> </div>
var ids = [];//选中的数据 var dataArr= [];//当前页面数据 table.render({ elem: '#list1', url: '/admin_8v2gpximtrq.php/system_schedule/getorders', totalRow: true, cols: [ [{ type: 'checkbox', fixed: 'left' }, { field: 'id', title: 'ID', width: 60, fixed: 'left', sort: true, } ] ], page: true, response: { statusCode: 200 //重新规定成功的状态码为 200,table 组件默认为 0 }, parseData: function(res) { //将原始数据解析成 table 组件所规定的数据 dataArr = res.data.list; return { "code": res.code, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.data.totalRow, //解析数据长度 "data": dataArr//解析数据列表 }; }, done: function(res) { var len = res.data.length;//当前页面数据长度 var chooseNum = 0; //记录当前页选中的数据行数 for (var i = 0; i < res.data.length; i++) { for (var j = 0; j < ids.length; j++) { if (res.data[i].id == ids[j].id) { res.data[i]["LAY_CHECKED"] = 'true'; var index = res.data[i]['LAY_TABLE_INDEX']; //如果你的页面还有第二个表格,就是.list2 $('.list1 .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true); $('.list1 .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass( 'layui-form-checked'); chooseNum++; } } } if (len != 0 && chooseNum == len) { //表示该页全选 -- 全选按钮样式回显 $('.list1 input[lay-filter="layTableAllChoose"]').prop('checked', true); $('.list1 input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked'); } }, }); //监听全选单选, table.on('checkbox(list1)', function(obj) { let checked = obj.checked; //当前选择的状态,是否选中 if (obj.type == 'all') { //全选 if (checked) { dataArr.forEach(item => {//全部选中,直接向ids push当前选中的数据 ids.push(item) }) } else { dataArr.forEach((item, index) => {//取消全选,循环判断是否相等,相等就删除 ids.forEach((val, i) => { if (item.id == val.id) { ids.splice(i, 1) } }) }) } } else { //单选 if (checked) { ids.push(obj.data);//选中,直接向ids push当前选中的数据 } else { ids.map((item, index) => {//取消选择,循环判断是否相等,相等就删除 if (obj.data.id == item.id) { ids.splice(index, 1) } }) } } });
-
layui 数据表格 点击分页按钮 监听事件的实例
2020-12-22 04:54:45找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起(我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法)先上...找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起
(我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法)
先上图
代码
.html
.js
//页面第一次请求 默认 1页 10条
function dataLists(pageNum, numPerPage) {
$.post(Url + 'pipei_dj/pagelist', {
pageNum: pageNum, // 页码数
numPerPage: numPerPage // 每页条数
}, function (data) {
let datalist = JSON.parse(data)
dataList(datalist) // 数据传到 table组件
page(datalist) // 数据传到 分页组件
})
}
dataLists(1, 10)
function page(data) {
laypage.render({
elem: 'page', //注意,这里的 page 是 ID,不用加 # 号
count: data.totalCount, //数据总数,从服务端得到
limit: data.numPerPage, // 每页条数
limits: [10, 20, 30, 40, 50],
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
jump: function (obj, first) {
//console.log(obj)
//obj包含了当前分页的所有参数,比如:
//console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
//console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
//do something
numpage(obj.curr, obj.limit) // 分页点击传参
}
}
});
}
// 从新写了 一个请求
function numpage(pageNum, numPerPage) {
$.post(Url + 'pipei_dj/pagelist', {
pageNum: pageNum,
numPerPage: numPerPage
}, function (data) {
let datalist = JSON.parse(data)
dataList(datalist) // 传到table组件
})
}
// 表格渲染
function dataList(data) {
table.render({
elem: '#test',
cols: [
[{
title: '序号',
type: "numbers"
}, {
field: 'id',
title: 'id',
hide: true
}, {
field: 'status',
title: '状态',
hide: true
}, {
field: 'danjia',
title: '单价(¥)'
}, {
field: 'createtime',
title: '创建时间'
}, {
field: 'status',
title: '状态',
toolbar: '#barstate'
}, {
title: '操作',
toolbar: '#barDemo'
}]
],
data: data.dataList, // 数据
limit: data.numPerPage, // 显示的条数
//page: true, // 开启分页
});
}
以上这篇layui 数据表格 点击分页按钮 监听事件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
-
layui table获取分页当前页页码page
2020-10-29 09:50:41先定义tablename var table_name = table.render({ }); 然后用tablename来获取 var layui_page = table_name.... table.on('tool(layuiTable)', function(obj){ var data = obj.data; if(obj.event === 'ed先定义tablename
var table_name = table.render({ });
然后用tablename来获取
var layui_page = table_name.config.page.pages;
如果点击下一页,表格重载之后需要获取,就把获取的代码放在那一步操作里就可以了,例如
//监听工具条 table.on('tool(layuiTable)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ console.log(table_name.config.page.pages); window.location.href = "/index.php/admin/good/edit_good?id="+data.id; } else if(obj.event === 'del'){ //代码 } });
-
layui 数据表格 点击分页按钮 监听事件
2019-08-30 17:52:54找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) ... -
layui table 2种分页
2021-08-23 13:20:11第一种 <script type="text/javascript" src="js/common/jquery-1.10.2.min.js"></script> <script src=...table class="layui-table" id="ceshi"> <thead& -
Layui.Table前台分页和后端真分页
2021-03-17 12:35:54最近开发信息发布,前端就用到了layui的插件。快发结束了,用着感觉一直挺好的。最后要完成几个分页列表的时候,按照文档使用,不知道为...1⃣️--------------- js ----------------layui.use('table', function(... -
layui 分页 复选框 全选 实例 事件监听
2020-12-24 01:14:12content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>数据表格 var myTable1Data; // 导出表格数据var root = ...var apis = {MODAL_CONID_LIST: ro... -
layui.table实现分页情况下全表排序
2020-08-13 18:58:27layui.table实现分页情况下全表排序 在项目中,使用layui.table实现数据显示,有排序的需求,但是发现layui.table自带的排序在分页的情况下,只能对当前分页进行排序,而不是全表排序…… 那么如果能对表格排序按钮... -
layui实现数据分页功能
2021-03-17 12:36:13本文实例为大家分享了layui实现数据分页功能,供大家参考,具体内容如下官网layui table演示页面示例截图:页面引入layui.css、 layui.js前台jsvar limitcount = 10;var curnum = 1;//列表查询方法function product... -
layui table表格 监听头删除不请求后台
2021-03-03 15:51:56表格jsfunction getTable() {var table = layui.table //表格var username=$("#username").val();//执行一个 table 实例table.render({elem: '#demo',where: {'username':username}//传值,method: 'post'//请求方式,... -
计算总价监听layui table的某一列的值,动态改变layui table的值,获取layui table某一列全部的值
2019-08-15 11:34:27layui table的创建方式中有一种是通过js来渲染的,也是我们最熟悉的一种方式,那如果我们某一个列当中的数据不想通过后台数据传到所得,而是通过前端某个东西变化所得(例如说计算总价),应该怎么做呢? layui ... -
Layui数据表格的监听事件
2021-12-28 16:54:28Layui数据表格中的回调的使用小结。 编辑单元格监听事件 //通过监听编辑单元格获取input数据 table.on(‘edit(CommportionI)’, function (obj) { console.log(obj.value); //得到修改后的值 console.log(obj.... -
Layui表格监听行单双击事件讲解
2020-12-13 04:59:14而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单... -
layui表格分页 记录勾选的实例
2020-12-10 12:05:07layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作。然后需要一个全局变量记录所有已经勾选的项 。下面是自己的代码 。 首先,监听表格的复... -
Layui表格开启分页与修改删除操作
2020-11-22 15:56:22html <!DOCTYPE html> <... <head> <meta charset="UTF-8"> <title></title>...link href="/layui/css/layui.css" rel="stylesheet" media="all"/> </head&g.. -
layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
2021-05-05 07:12:40给 layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档: 国内下载地址: 扩展功能 表头筛选、自定义条件(支持前端筛选、后台筛选介绍请看 ) 拖动列调整顺序、隐藏显示列 excel导出(根据筛选条件和列... -
layui实现数据表格及分页的方法
2021-03-29 08:02:05前端部分html只需要放一个有id的div就行了,方便js获取渲染区域js部分需要注意url为异步数据接口,done是渲染完表格之后的回调函数table.render({elem: '#data_grid'//,width: 900//,height: 274,cols: [[ //标题栏{... -
layui 动态表格 不分页 limit的设置
2020-10-23 10:23:36layui.use(['table','form'], function(){ var table = layui.table, form =layui.form; table.render({ elem: '#test' ,loading:true ,url:"{:url('AuthRule/index')}" ,where: {key: 'get'} . -
layui实现自带table表格组件分页功能(ajax异步),含条件查询
2019-06-10 15:34:15layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一:引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css"> <script src="${ctxPath}/... -
Layui table 初始化渲染、行监听
2021-01-20 08:15:211.表格初始化渲染, ... var table = layui.table; table.render({ elem: "#search_njq_result", url: ajaxurl.searchNJQInfo + "?qsdw_code=" + code + "&zjrxm=" + zjrxm, method: "GET", request: { ... -
layui table 跨页记忆选择
2018-12-23 21:22:40下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['jquery', 'table'], function (exports) { var $ = layui.jquery , table = layui.table; ... -
基于thinkphp5 + layui-table 实现分页
2020-01-18 13:55:42// model 获取分页数据 class Test extends Model{ /** *page 起始页 limit 每页的条数 ($page -1) *$limit 第几条数据开始查询 * * */ public function paginate($limit = 10, $page = 1, $arr = []) { return ... -
完整layui中table的完整分页加载以及根据条件搜索问题
2020-04-10 14:10:21js代码 layui.use(['table', 'laypage','jquery'], function () { var table = layui.table, laypage = layui.laypage, $ = layui.jquery; //分页 table.render({ elem: '#test' ... -
layui数据表格及分页显示
2019-02-12 16:42:48原本数据显示页面使用框架自带的分页显示,不是异步加载,页面需要重新加载,影响用户体验。因为原本使用的前端框架是layui,故使用layui的数据表格进行数据显示。 layui版本:2.4.5 引入layui的css和js文件,... -
layui实现数据表格table分页功能(ajax异步)
2021-03-17 12:35:23layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。一、引入layUI的相关资源二、html页面代码搜索表单:项目搜索:业务员厂家代表渠道客户项目阶段货物情况实施情况收款情况数据表格:三、后台接收...