精华内容
下载资源
问答
  • layui table 监听
    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:12
    table 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)
    				}
    			})
    		}
    	}
    });
    
    展开全文
  • 找了 很多 关于表格分页 点击事件 请求, 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'){
    			//代码
    		}
    	});
    
    展开全文
  • 找了 很多 关于表格分页 点击事件 请求, 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的插件。快发结束了,用着感觉一直挺好的。最后要完成几个分页列表的时候,按照文档使用,不知道为...1⃣️--------------- js ----------------layui.use('table', function(...
  • content="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:27
    layui.table实现分页情况下全表排序 在项目中,使用layui.table实现数据显示,有排序的需求,但是发现layui.table自带的排序在分页的情况下,只能对当前分页进行排序,而不是全表排序…… 那么如果能对表格排序按钮...
  • 本文实例为大家分享了layui实现数据分页功能,供大家参考,具体内容如下官网layui table演示页面示例截图:页面引入layui.css、 layui.js前台jsvar limitcount = 10;var curnum = 1;//列表查询方法function product...
  • 表格jsfunction getTable() {var table = layui.table //表格var username=$("#username").val();//执行一个 table 实例table.render({elem: '#demo',where: {'username':username}//传值,method: 'post'//请求方式,...
  • layui table的创建方式中有一种是通过js来渲染的,也是我们最熟悉的一种方式,那如果我们某一个列当中的数据不想通过后台数据传到所得,而是通过前端某个东西变化所得(例如说计算总价),应该怎么做呢? layui ...
  • Layui数据表格中的回调的使用小结。 编辑单元格监听事件 //通过监听编辑单元格获取input数据 table.on(‘edit(CommportionI)’, function (obj) { console.log(obj.value); //得到修改后的值 console.log(obj....
  • layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单...
  • layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作。然后需要一个全局变量记录所有已经勾选的项 。下面是自己的代码 。 首先,监听表格的复...
  • html <!DOCTYPE html> <... <head> <meta charset="UTF-8"> <title></title>...link href="/layui/css/layui.css" rel="stylesheet" media="all"/> </head&g..
  • layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档: 国内下载地址: 扩展功能 表头筛选、自定义条件(支持前端筛选、后台筛选介绍请看 ) 拖动列调整顺序、隐藏显示列 excel导出(根据筛选条件和列...
  • 前端部分html只需要放一个有id的div就行了,方便js获取渲染区域js部分需要注意url为异步数据接口,done是渲染完表格之后的回调函数table.render({elem: '#data_grid'//,width: 900//,height: 274,cols: [[ //标题栏{...
  • layui 动态表格 不分页 limit的设置

    千次阅读 2020-10-23 10:23:36
    layui.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分页功能,异步加载,表格渲染,含条件查询。 一:引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css"> <script src="${ctxPath}/...
  • 1.表格初始化渲染, ... 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 ...
  • js代码 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分页功能,异步加载,表格渲染,含条件查询。一、引入layUI的相关资源二、html页面代码搜索表单:项目搜索:业务员厂家代表渠道客户项目阶段货物情况实施情况收款情况数据表格:三、后台接收...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,097
精华内容 438
关键字:

layui table 监听分页