layui表格数据复选框回显设置方法

layui2.3版本，本身并不带有复选框回显功能，那么需要从源头解决此事，F12代码调试，找到与复选框关联的地方发现：

我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显。

layui这里有一个坑，设置class属性后会造成二次点击效果，千万不要手动修改class属性，那么应该怎么办呢？

每次**点击**其中一个复选框时都会增加一个class属性，第二次点击又会给删除：

table.render({
 elem: '#LAY_table_topic',
 url: '/admin/topicHandle/getTopicList',
 height: 600,
 done:function(result,currPage,count){//数据回调方法
 var data = result.data;

 data.forEach(function(value, key) {
  //这里必须选择点击方法，不知为何添加layui-form-checked class属性会造成二次点击（即下次点击必须点击两下才能生效）bug，
  //所有类似的手动修改class貌似都会造成二次效果
  if(value.read_total > 10){
  $("div[lay-id='topicList'] td .layui-form-checkbox").eq(key).click();
  }
 })
 },
 cols: [[
 { type:'checkbox'},
 { field:'id', title: '话题ID', width: 80 },
 { field:'image_url', title: '图片', width: 100 , templet:"#showPic"},
 { field:'content', title: '话题内容', width: 260 },
 { field:'read_total', title: '阅读次数', width: 100 , sort:true},
 ]],
 id: 'topicList',
 page: true
});

以上这篇layui表格数据复选框回显设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决layui 复选框等内置控件不显示的问题

    将复选框的代码原封不动地粘上后居然不显示 需要加入下列代码,监听form,才会显示控件 <script> layui.use('form', function () { var form = layui.form; }); </script> tab也是一样的原理,显示tab需要加上 <script> // tab控件必须有下面的代码,才可以切换 layui.use('element', function () { var element = layui.element

  • layui复选框的全选与取消实现方法

    废话不多说啦,直接贴上代码吧!   <div class="layui-form-item layui-form-text">             <label class="layui-form-label">                 <span class="x-red">*</span>权限表             </label>             <d

  • layui从数据库中获取复选框的值并默认选中方法

    如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../../static/js/css/layui.css" rel=

  • layui 监听表格复选框选中值的方法

    需要达到的目的: ajax()异步请求后台时,需要传入表格里复选框选中的id值 注意:在渲染form on 方法的done里面加入 done:function(res){ table_data=res.data; } 将复选框选中的值的id加入数组中,然后传递到后台作为ids参数 //自定义数组 var table_data=new Array(); var ids =new Array(); table.on('checkbox(push_port_table)', function(obj)

  • layui table数据修改的回显方法

    实现的样式给你们看一波 点击这锅按钮 其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event; // 获得 lay-event 对应的值(也可以是表头的event 参数对应的值) var tr = obj.tr; // 获得当前行 tr 的DOM对象 if (l

  • layui表格数据复选框回显设置方法

    layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这里有一个坑,设置class属性后会造成二次点击效果,千万不要手动修改class属性,那么应该怎么办呢? 每次**点击**其中一个复选框时都会增加一个class属性,第二次点击又会给删除: table.render({ elem: '#LAY_table_topic', url: '/admin/to

  • js判断复选框是否选中的方法示例【基于jQuery】

    js判断复选框是否选中的方法示例【基于jQuery】

    本文实例讲述了js判断复选框是否选中的方法.分享给大家供大家参考,具体如下: 代码 //设置选中 $('#check1').prop('checked', true); //是否选中 var isChecked = $('#cb').prop('checked'); //或 var isChecked = $('#cb').is(":checked"); var isChecked = $('#cb').attr('checked'); 代码 function publish() {

  • javascript判断复选框是否选中的方法

    之前总结了一下关于jquery如何判断复选框是否选中的问题,今天总结如何判断js复选框是否选中 javascript判断复选框是否选中,下面通过例子来说明(现在有如下的一组复选框): <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="o

  • Android中CheckBox复选框控件使用方法详解

    Android中CheckBox复选框控件使用方法详解

    CheckBox复选框控件使用方法,具体内容如下 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2.建立CheckBox的XML的Layout文件 3.通过View.inflate()方法创建CheckBox CheckBox checkBox=(CheckBox) View.inflate(this, R.layout.checkbox, null); 4.通过Linea

  • JavaScript检测并限制复选框选中个数的方法

    JavaScript检测并限制复选框选中个数的方法

    本文实例讲述了JavaScript检测并限制复选框选中个数的方法.分享给大家供大家参考.具体如下: 这里用JavaScript判断复选框中否选中,同时可以限制复选框的选中个数,这是一个比较实用的JS表单判断示例,复选框的是否选中曾经让很多人纳闷,现在好了,这段代码帮你解决了难题. 运行效果截图如下: 具体代码如下: <html> <head> <title>判断复选框中否选中</title> <script> var check_num = 0;

  • jQuery切换所有复选框选中状态的方法

    本文实例讲述了jQuery切换所有复选框选中状态的方法.分享给大家供大家参考.具体如下: 这段代码非常简单实用,通过链接切换所有checkbox是否选中 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); 希望本文所述对大家的jq

  • vue+element UI实现树形表格带复选框的示例代码

    一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-10-12 12:06:49 */ "use strict"; import Vue from "vue"; export default function treeToArray( data, expandAll, parent = null, level = null

  • PHP获取表单所有复选框的值的方法

    通常来说,php中总是只获取最后一个复选框的值,那么如何才能获取所有复选框的值? 解决办法如下: form表单的部分代码如下: <input type="checkbox" name="frm_tag[]" value="1">1 <input type="checkbox" name="frm_tag[]" value="2">2 <input type=

  • element table跨分页多选及回显的实现示例

    1.data中定义getRowKeys,记录每行的key值 getRowKeys(row) {    return row.id; }, 2.el-table绑定getRowKeys <el-table     :data="tableData"     @selection-change="handleSelectionChange"     :row-key="getRowKeys" > 3.将selection列的reserve

随机推荐