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. datalab （原发布 csdn 2018年09月21日 20:42:54）

    首先声明datalab本人未完成,有4道题目没有做出来.本文博客记录下自己的解析,以便以后回忆.如果能帮助到你就更好了,如果觉得本文没啥技术含量,也望多多包涵. /* * bitAnd - x& ...

  2. Markdown 基础学习

    Markdown是什么?    Markdwon是一种轻量级标记语言,它以纯文本形式(易读.易写.易更改)编写文档,并最终以HTLM格式发布.Markdown也可以理解为将以 MARKDOWN语法编写 ...

  3. python接口上传图片和文件的方法

    import requests def sendImg(img_path, img_name, img_type='image/jpeg'): """ :param im ...

  4. Python基础24

    import 与 from import 知乎上说的简洁明了,zhihu.com/question/38857862 from import, 导入之后就能拿来用了,直接用!到处用!

  5. jQuery 杂项方法大全

    下表列出了所有jQuery 杂项方法: 方法 描述 data() 将数据附加到选定元素或从中获取数据 get() 获取选择器匹配的DOM元素 index() 从匹配的元素中搜索给定的元素 $.noCo ...

  6. 【转】Python学习---超详细字符串用法大全，好文推荐！

    来自:Python编程与实战(微信号:pthon1024),作者:Jerryning 没有办法转,整个复制下来了 本文要点 字符串拼接 拆分含有多种分隔符的字符串 判读字符串a是否以字符串b开头或结尾 ...

  7. git报错 - remote: HTTP Basic: Access denied

    十年河东,十年河西,莫欺少年穷 学无止境,精益求精 git 拉取代码报: remote: HTTP Basic: Access denied,这是因为你的GIT密码修改后,需要重新认证授权,那么怎么操 ...

  8. js javascript 如何获取某个值在数组中的下标

    js 某个值在数组中的下标javascript中知道一个数组中的一个元素的值,如何获取数组下标JS 获取数组某个元素下标 函数方法 采用prototype原型实现方式,查找元素在数组中的索引值js查找 ...

  9. vue中利用Promise封装jsonp并调取数据

    Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功).Rejected(失败 ...

  10. springBoot实现发送QQ邮件

    一.导依赖 <!-- mail依赖--> <dependency> <groupId>org.springframework.boot</groupId> ...