layui table表格的复选框checkbox设置部分为不可选

需求:如上图,某些数据禁用删除功能,那么全选时,这些数据前面的复选框也不能选。

实现:在layui数据表格中设置了字段为 type:checkbox 但是想要实现部分不显示,不可选的功能。layui内置没有该功能,所以只能自己实现。

table.render({elem: '#junTable',url: '',cols: [[{templet: "#checkbd",title: "<input type='checkbox' name='siam_all' title='' lay-skin='primary' lay-filter='siam_all'> ",width: 60,},{ type: 'numbers', title: '序号', fixed: 'left' }, { field: 'z_id', title: 'id' }]],page: true,limit: 10,...done: function(res){//防止全选后表格翻页,复选框选中样式依然存在$("input[name='siam_all']").prop("checked", false);                form.render("checkbox");}
});<script type="text/html" id="checkbd">{{#  if (d.status=== 1){ }}// 这里是判断要不要显示的条件<input type="checkbox" name="siam_one" title="" lay-skin="primary" data-id = "{{ d.noteId }}">{{#  } }}
</script>

        table.render() 中的 cols 是设置表头复选框,<script>标签中的判断是设置表格数据中的复选框显示。

        到这里就可以部分数据不显示复选框了,但是全选功能和获取id的功能还是不正常,需要做以下操作:

设置全选功能:

form.on("checkbox(siam_all)", function () {var status = $(this).prop("checked");$.each($("input[name=siam_one]"), function (i, value) {$(this).prop("checked", status);});form.render();
});

获取选中的数据:

var ids = [];
$.each($("input[name=siam_one]:checked"), function (i, value) {ids[i] = $(this).attr("data-id");  // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了
});

        网上搜索到的做法是:使用done函数禁用。但是有瑕疵,全选不可用,并且不可选状态和可选状态的复选框样式很接近,建议重写不可选的样式。

转载:layui数据表格的checkbox设置部分为不可选_璞~的博客-CSDN博客_checkbox设置不可选

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362365.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

layui upload阻止文件上传问题,及多选文件上传

1、效果展示&#xff1a; 2、需求&#xff1a; 下拉框及月份都为不空&#xff0c;且有文件数据才能提交上传。 3、环境&#xff1a; 目前项目中引用的 layui 版本是 2.4.5。在 before 中进行判断&#xff0c;使用 return false 想要阻止文件上传没反应&#xff0c;文件仍然会…

2019.06.17课件:[洛谷P1310]表达式的值 题解

P1310 表达式的值 题目描述 给你一个带括号的布尔表达式&#xff0c;其中表示或操作|&#xff0c;*表示与操作&&#xff0c;先算*再算。但是待操作的数字&#xff08;布尔值&#xff09;不输入。 求能使最终整个式子的值为0的方案数。 题外话 不久之前我在codewars上做过一…

vue+element 封装日期范围组件(双向绑定)

像这样的日期组件&#xff0c;在后台管理项目中是比较多的&#xff0c;而且加了快捷选项&#xff0c;代码量较多&#xff0c;因此封装成组件。 封装这一类型的组组件&#xff0c;主要是了解输入框双向绑定 v-model 的过程。 1、了解输入框双向绑定的过程&#xff1a; 官网&am…

用Hystrix保护您的应用程序

在之前的帖子http://www.javacodegeeks.com/2014/07/rxjava-java8-java-ee-7-arquillian-bliss.html中&#xff0c;我们讨论了微服务以及如何使用&#xff08;RxJava&#xff09;的Reactive Extensions编排微服务。 但是&#xff0c;如果一项或多项服务由于已被暂停或引发异常而…

若依 从下载到成功运行及打包

官网&#xff1a;http://www.ruoyi.vip/ 目录 一、下载并运行项目 二、关于 若依 接口地址配置 2.1 若依的跨域代理介绍 2.2 配置跨域代理&#xff0c;调用后台接口 2.2.1 配置 后台 ip 地址 2.2.2 页面报“系统接口404”错误 三、打包配置 3.1 打包之后静态资源404…

uniAPP小程序 子组件使用watch不生效,H5正常,小程序不正常(其实是子组件model选项的问题)

第一次用 uniapp 写小程序&#xff0c;还是遇到挺多问题的。写了一个下拉多选组件&#xff0c;发现同样的代码&#xff0c;在H5上运行效果正常&#xff0c;在小程序上压根不走 watch 。 uniapp官网&#xff1a;【全局配置 | uni-app官网】 看文档 watch 是支持H5、小程序的&…

jQuery EasyUI/TopJUI创建日期时间输入框

jQuery EasyUI/TopJUI创建日期时间输入框 日期时间输入框组件 HTML 和日期输入框类似&#xff0c;日期时间输入框允许用户选择日期和指定的时间并按照指定的输出格式显示。相比日期输入框&#xff0c;它在下拉面板中添加了一个时间微调器。 <div class"topjui-containe…

table 设置边框

本文引自&#xff1a;https://www.cnblogs.com/leona-d/p/6125896.html 示例代码&#xff1a; <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width…

uniapp小程序 设置自定义导航栏

如下截图&#xff0c;通过 wx.getSystemInfoSync 计算得到的整个导航栏高度&#xff0c;其实是有3个部分的&#xff1a; 黄色&#xff1a;状态栏高度&#xff0c;uniapp文档中有给出&#xff1b;红色&#xff1a;胶囊高度&#xff0c;可以计算得出&#xff1b;绿色&#xff1a;…

Akka Notes –演员记录和测试

在前两部分&#xff08; 一 &#xff0c; 二 &#xff09;中&#xff0c;我们简要讨论了Actor以及消息传递的工作方式。 在这一部分中&#xff0c;让我们看一下如何修复并记录我们的TeacherActor 。 概括 这就是我们上一部分中的Actor的样子&#xff1a; class TeacherActor …

vue笔记(二)Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器

vue官网 一 、class、style操作 二、事件 三、计算属性 四、数据监听、观测 五、指令自定义指令 六、过滤器 一 、class、style操作 官网 1. class使用&#xff1a; &#xff08;1&#xff09;v-bind:class“数据|属性|变量|表达式” &#xff08;2&#xff09;v-bind:class“…

Nsum问题

题目 题解 暴力法 class Solution:def fourSum(self, nums: List[int], target: int) -> List[List[int]]:if len(nums) < 4:return []nums.sort()N len(nums)res []for i in range(N-3):for j in range(i1, N-2):for k in range(j1, N-1):for m in range(k1, N):tmp…

js笔记(一)js基础、程序结构、函数

大标题小节一、js 基础1. javascript的组成&#xff1b;2. 运行js&#xff1b;3. 打印信息&#xff1b;4. 关键字var&#xff1b;5. js中的数据类型&#xff1b;6. NaN&#xff08;not a number&#xff09;&#xff1b;7. js运算符&#xff1b;8. 数据类型转换&#xff1b;9. …

DB2 9 底子(730 考试)认证指南,第 3 局部: 拜访 DB2 数据(3)

建树第一个数据库First Steps在 DB2 的安顿进程中&#xff0c;会表示 First Steps 面板&#xff0c;它答运用户生成要操作的示例数据库&#xff1a; 选择 Database Creation 选项将表示一个附加菜单&#xff0c;可以建树 SAMPLE 数据库。 大大都用户希冀建树 SAMPLE 数据库并运…

新的自定义控件:TaskProgressView

我已经编写了一个新的自定义控件&#xff0c;并将其提交到ControlsFX项目。 这是一个高度专业的控件&#xff0c;用于显示后台任务&#xff0c;其当前状态和进度的列表。 这实际上是我为ControlsFX编写的第一个控件&#xff0c;只是出于乐趣的考虑&#xff0c;这意味着我自己没…

js笔记(三)ES5、ES5新增的数组的方法、字符串的方法、字符编码、对象的序列化和反序列化、bind

数组方法、字符串方法总结 大目录小目录一、ES5严格模式1. 严格模式&#xff1b;2. 严格模式的行为变更&#xff1b;二、ES5新增的数组的方法1. 判断是否为数组&#xff1a;Array.isArray()&#xff1b;2. 判断数组中是否存在某个值&#xff1a;indexOf(data, start)、lastInd…

SVG入门

1、简介 使用xml描述的矢量文件。 2、兼容性 https://caniuse.com/#searchsvg 3、使用方式 &#xff08;1&#xff09;浏览器直接打开 &#xff08;2&#xff09;html中使用img引用 <p><img src"simple.svg" width"50" height"50"…

js 值和引用

1、概述 简单值&#xff08;基本类型&#xff09;通过值复制的方式来赋值/传递。 复合值&#xff08;对象&#xff09;通过引用复制的方式来赋值/传递。 <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><title…

js笔记(六)事件、正则

数组方法、字符串方法总结 大标题小节一、事件1.1 事件&#xff1b;1.2 事件对象&#xff1b;1.3 键盘事件的keyCode&#xff1b;1.4 关于鼠标的尺寸&#xff1b;1.5 事件冒泡&#xff1b;1.6 事件的默认行为&#xff1b;1.7 事件监听&#xff1b;1.8 事件委托&#xff08;事件…

神州泰岳2050万元收买并增资奇点国际

网易科技讯 3月7日消息&#xff0c;神州泰岳来日诰日颁布发表关照公告&#xff0c;将经由股权让渡体例共付出1450万元股权让渡款获得奇点国际100%股权&#xff0c;同时神州泰岳与邵起明分别出资600万元、200万元对奇点国际举行增资。本次增资后&#xff0c;奇点国际注册资金增进…