LayUI这几年比较流行,里面的Table组件也比较强大,但是前面的CheckBox没有禁止选中功能,今天就来试试,看看能不能给添加一个禁止选中功能。

Fork LayUI源码

  • LayUI项目地址
  • Clone到本地
  • 找到src里面lay下面的modules文件夹里面的table.js

添加字段标记

  • 参照这里我们也添加一个"IS_DISABLE"的标记

  • 添加完如下

 config: {
checkName: 'LAY_CHECKED', //是否选中状态的字段名
indexName: 'LAY_TABLE_INDEX', //下标索引名
disableName: 'LAY_DISABLED' //是否禁用
} //全局配置项

修改代码逻辑

  • 找到区域模板里面的 lay-filter="layTableAllChoose"

  • 在后面添加如下代码

 {{# if(item2[d.data.disableName]){ }} disabled {{# }; }}

测试

  • 在数据里面添加 "LAY_DISABLED": true,
  • 来看看效果

源码

LayUI-Table-添加禁止选中的更多相关文章

  1. Layui Table 分页记忆选中

    Layui Table 分页记忆选中 挺好的功能,之前为什么放弃了,哈哈哈! 在最早的版本中,layui 的 table 会记录每页的勾选状态,但很多用户反馈这是 bug,因为当他们获取选中数据时,其 ...

  2. 关于在layui中的table checkbox 默认选中设置

    一.layui版本 layui-v2.4.5 二.设置table的checkbox默认选中 总共有两种方法: 方法1:在返回的json中设置LAY_CHECKED为true,页面上的checkbox就 ...

  3. layui table 表格上添加日期控件

    方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: &quo ...

  4. layui table 表格模板按钮实例

    这是个是全部的jsp 页面: <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8& ...

  5. layui table 表格查询无效问题

    [热身话题] 在开发的过程中,大量数据的展示大多采用表格的方式,直观,清晰.在这里,我也使用过一些框架Bootstrap.table ,Dev table ,layui table.本次采用的layu ...

  6. layui table 跨页记忆选择

    layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['j ...

  7. layui table 分页 记住之前勾选的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css 禁止选中文本

    css 如何禁止选中文字 .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* ...

  9. 在layui layer 弹出层中加载 layui table

    layui.use('table', function(){ var table = layui.table; layer.open({ type : 1, area : [ "600px& ...

随机推荐

  1. JDK1.8新特性——Stream API

    JDK1.8新特性——Stream API 摘要:本文主要学习了JDK1.8的新特性中有关Stream API的使用. 部分内容来自以下博客: https://blog.csdn.net/icarus ...

  2. Lambda(一)lambda表达式初体验

    Lambda(一)lambda表达式初体验 Lambda引入 : 随着需求的不断改变,代码也需要随之变化 需求一:有一个农场主要从一堆苹果中挑选出绿色的苹果 解决方案:常规做法,source code ...

  3. 探究java对象头

    探究java对象头 研究java对象头,我这里先截取Hotspot中关于对象头的描述,本文研究基于64-bit HotSpot VM 文件路径 openjdk-jdk8u-jdk8u\hotspot\ ...

  4. 【微信小程序】动态设置图片大小

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror   ...

  5. 【推荐】全球最全面的Telegram组群频道的集合网站 持续收集中

    全球最全面的Telegram组群频道的集合网站 https://www.telegramgroup.org Telegram 组群频道分享 可搜索自己想找的组群频道 从小白到大神,一个 telegra ...

  6. CentOS 7上安装Docker

    目录 安装步骤 1.查看Docker的版本 ​ 2.安装 Docker 3.启动Docker 4.设置为开启启动 5.查看Docker安装信息 6.使用Docker 中国加速器 安装步骤 安装操作系统 ...

  7. Linux命令——ethtool

    转自:https://www.cnblogs.com/kelamoyujuzhen/p/10116423.html 参考:9 Linux ethtool Examples to Manipulate ...

  8. jetbrains 系列编辑器

    下载 webstorm下载地址:https://www.jetbrains.com/webstorm/download/previous.html idea下载地址:https://www.jetbr ...

  9. 08webpack-复习

    在调用loader的时候 都是从右往左进行加载的哦 //下面是现在学的webpack的配置文件哦 const path = require("path"); //路径模块 //第2 ...

  10. 什么是微信小程序?简单介绍

    1.微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有色的使用体验. 2.手机端App的另外一种新的展现形式 3.无需下载过多占用手机内存的app,小程序直接打开 ...