layui表格分页 记录勾选的实例

layui 分页之后没有记录之前勾选项的功能 ， 自己写了一个 ， 主要点就是表格的done 函数 ，每次渲染完成之后做表格勾选操作。然后需要一个全局变量记录所有已经勾选的项 。下面是自己的代码 。

首先，监听表格的复选框点击事件 ， 将单选或全选全部记录下来

 var checkArray = new Array();
 // 当前页数据
 var currentArray ;
   //监听行单击事件（单击事件为：rowDouble）
   table.on('checkbox(test)', function(obj){
    var checkData = obj.data ;
    // 如果是全选中
    if(obj.type == 'all' && obj.checked == true){
     var checkStatus = table.checkStatus('demo')
      ,data = checkStatus.data;

     for(var i in data){
      // 如果包含就去掉 ，不包含就添加
      if(checkArray.indexOf(data[i].eventTypeName) > -1){
      }else {
       checkArray.push(data[i].eventTypeName) ;
      }
     }
    }
    // 全不选中
    else if(obj.type == 'all' && obj.checked == false){

     for(var i in currentArray){
      checkArray.remove(currentArray[i].eventTypeName) ;
     }
    }
    // 如果是单选
    else {
     var eventTypeName = checkData.eventTypeName ;
     // 如果包含就去掉 ，不包含就添加
     if(checkArray.indexOf(eventTypeName) > -1){
      checkArray.remove(eventTypeName) ;
     }else {
      checkArray.push(eventTypeName) ;
     }
    }
   });

然后 ，

done: function(res, curr, count){
     //如果是异步请求数据方式，res即为你接口返回的信息。
     //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
     currentArray = res.data ;

     //.假设你的表格指定的 id="maintb"，找到框架渲染的表格
     var tbl = $('#demo').next('.layui-table-view');

     // 渲染选择框
     for(var i in currentArray){

      for(var j in checkArray){
       if(currentArray[i].eventTypeName == checkArray[j]){
        tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);
       }
      }
     }

     form.render('checkbox');
    }

以上这篇layui表格分页 记录勾选的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于LayUI实现前端分页功能的方法

    基于LayUI实现前端分页功能的方法

    一.LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为http://www.layui.com/,下载后引入项目中. <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="exte

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo

  • layui分页效果实现代码

    layui分页效果实现代码

    本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css" > </head> <body

  • layui实现动态和静态分页

    开发管理后台是每一个开发人员都要熟悉的一个环节,作为后端程序员,公司的所有机密数据都掌握在我们手上,所以这个时候,如果不是公司的核心成员,是不能接触到某些数据的,这个时候所有的工作都落到了我们的手上,从PS到Linux都需要我们亲历亲为,还好发现了layui这个前端框架,很大程度上减轻了我们的压力． 今天我们先来学习一下layui实现动态数据表,静态数据表,以及表格的分页,其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能,这个静态分页同样适用在信息类网站,我的工作开发环境是debia

  • layUI实现前端分页和后端分页

    本文实例为大家分享了layUI实现前端分页和后端分页效果,供大家参考,具体内容如下 layui后端分页: function pagination(curr,gwayId,mlity,ePart) { $(".manage_ys_list").html('加载中...'); let dd={ conditions: { gatewayId:gwayId, searchText:"", pageSize:15, pageIndex:curr-1 }, identity:

  • layui实现数据分页功能

    layui实现数据分页功能

    本文实例为大家分享了layui实现数据分页功能,供大家参考,具体内容如下 官网layui table演示页面 示例截图: 页面引入layui.css. layui.js <div id="pTable" style="width: 1200px;"> <table class="layui-table" id="layui_table_id" lay-filter="test"> &

  • 基于LayUI分页和LayUI laypage分页的使用示例

    基于LayUI分页和LayUI laypage分页的使用示例

    本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图:  一.引用js依赖 主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.m

  • layui表格分页 记录勾选的实例

    layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作.然后需要一个全局变量记录所有已经勾选的项 .下面是自己的代码 . 首先,监听表格的复选框点击事件 , 将单选或全选全部记录下来 var checkArray = new Array(); // 当前页数据 var currentArray ; //监听行单击事件(单击事件为:rowDouble) table.on('checkbox(test)', functio

  • layui表格checkbox选择全选样式及功能的实例

    在之前的版本,默认复选框是要有值得,默认为"勾选"两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作. 1.layui版本号为 v1.0.9 rls版本(当前最新版本) <span style="white-space:pre;"> </span><div class="layui-form"> <table class="layui-

  • vue+iview Table表格多选切换分页保持勾选状态

    vue+iview Table表格多选切换分页保持勾选状态

    本文实例为大家分享了vue+iview Table表格多选切换分页保持勾选状态的具体代码,供大家参考,具体内容如下 第一种情况(配合后端做选中数据处理) 定义三个参数,是否为全选(isSelectAll).不是全选时选择的数据(selectObject: []).反选数据(unSelectObject:[]) HTML <Alert show-icon v-show="openTip">                           已选择              

  • layui table复选框禁止某几条勾选的实例

    Layui table复选框禁止勾选 var list = [0,1,3];//获得禁用的tr的行index //遍历设置复选框禁用 for(var i=0;i<list.length;i++){ $(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop('disabled',true); $(".layui-table tr[data-index="+

  • ant design vue 表格table 默认勾选几项的操作

    为什么我同样的功能要用react .vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(- o -)~zZ 在 ant design vue 中,表格的第一列是联动的选择框 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组. onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedR

  • javascript实现用户必须勾选协议实例讲解

    javascript实现用户必须勾选协议实例讲解

    在js中设置用户必须阅读完某项协议 才能勾选登陆或注册 (disabled的使用技巧) 仔细观看两张图片画圈部分是不一样的 当滚轮在上面时下面的表单是不可选中的 第二张在底部表单是可选中的 其中方法为为监听这个滚轮,当滚轮到达底部时 表单变为可选中状态 info.scrollHeight - info.scrollTop == info.clientHeight //判断滚条是否到达了底部 <!DOCTYPE html> <html> <head> <meta c

  • Vue中Table组件Select的勾选和取消勾选事件详解

    简述 之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件. 勾选 首先我们需要说一下这个需求,如下图: 勾选要实现如下的一个效果:对左侧Table的内容进行勾选,然后勾选行的数据传给右侧的Table中. 实现代码如下: ============1.按照官网封装好的样式去写Table组件======= <template> <div> <Table>&l

  • layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下: 1.HTML 搜索输入框 <form class="layui-form"> <div class="layui-input-inlin

  • bootstrap表格分页实例讲解

    bootstrap表格分页实例讲解

    本文实例为大家分享了bootstrap表格分页的具体实现代码,供大家参考,具体内容如下 引用: <script src="~/Scripts/jquery.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script src="~/Scripts/plugins/bootstrap-table/bootstrap

  • 解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能.导致跟后台交互传递参数不全问题. 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <

随机推荐