预约型网站模板源码,可以做翻译兼职的网站吗,网站的模版,郴州网红店欢迎来到《小5讲堂》#xff0c;大家好#xff0c;我是全栈小5。 这是《前端》系列文章#xff0c;每篇文章将以博主理解的角度展开讲解#xff0c; 温馨提示#xff1a;博主能力有限#xff0c;理解水平有限#xff0c;若有不对之处望指正#xff01; 目录 表格勾选事… 欢迎来到《小5讲堂》大家好我是全栈小5。 这是《前端》系列文章每篇文章将以博主理解的角度展开讲解 温馨提示博主能力有限理解水平有限若有不对之处望指正 目录 表格勾选事件入口模块常见模块禁止勾选文章推荐 表格勾选事件
在 layui 的 table 表格中想要监听勾选事件可以通过监听 checkbox 类型的列实现。 可以使用 checkbox 类型的列添加 lay-filter 属性并定义一个对应的过滤器然后在表格渲染完成后通过 layui 的事件监听函数监听该过滤器对应的事件。 示例代码如下
!DOCTYPE html
html
headmeta charsetutf-8title监听表格勾选事件示例/titlelink relstylesheet hrefhttps://cdn.staticfile.org/layui/2.5.7/css/layui.css
/head
bodytable iddemo lay-filtertest/tablescript srchttps://cdn.staticfile.org/layui/2.5.7/layui.js/script
script
layui.use([table, form], function(){var table layui.table;// 渲染表格table.render({elem: #demo,url: /demo/table/user/,cols: [[{type: checkbox, LAY_CHECKED: true},{field: id, title: ID, width: 80, sort: true},{field: username, title: 用户名, width: 120},{field: email, title: 邮箱, minWidth: 150},]],page: true});// 监听表格复选框选择table.on(checkbox(test), function(obj){var checkStatus table.checkStatus(demo); // 获取表格的选中状态console.log(checkStatus.data); // 打印选中的数据console.log(obj.checked); // 当前是否选中console.log(obj.data); // 当前行的数据});
});
/script/body
/html
入口模块
在 layui 中layui.use() 方法是用来加载和使用 layui 模块的主要方法。 它接受一个数组作为参数数组中包含了需要使用的 layui 模块的名称同时也可以传入一个回调函数来处理模块加载完成后的逻辑。 具体语法如下
layui.use([module1, module2], function(){// 在这里编写模块加载完成后的逻辑
});
在这个方法中layui.use() 会按照参数中指定的模块顺序加载对应的模块在所有模块加载完成后会执行回调函数中的逻辑。在回调函数中可以进行具体的模块使用和操作确保在模块加载完成后再进行相应的处理。 需要注意的是layui.use() 方法在页面中使用 layui 模块时是必须的因为 layui 采用异步加载模块的机制通过 layui.use() 方法可以确保模块加载完成后再进行后续逻辑处理避免出现模块未加载完成就调用的情况。
常见模块
在 layui 中常用的模块包括但不限于以下几个 1.layui.$ 这是 layui 的 jQuery 版本可以用来操作 DOM、事件处理等功能。
2.layui.layer 弹出层模块用于显示各种类型的弹出窗口包括提示框、询问框、加载层等提供丰富的参数和回调函数来定制不同需求的弹出窗口。
3.layui.table 数据表格模块用于展示和操作数据表格支持表格的渲染、事件监听、数据操作等功能。
4.layui.form 表单模块用于处理表单元素的渲染、事件监听、表单验证等功能可以轻松实现各种表单操作和交互效果。 除了上述列出的模块layui 还包含了众多其他常用的模块如日期时间模块、上传模块、滑块模块等可以根据实际需求来选择加载并使用对应的模块。 禁止勾选
在 layui 的 table 表格中如果想要设置某些行或单元格的勾选状态为禁止勾选可以通过在数据中添加 disabled 字段来实现。具体步骤如下 1.在表格数据中添加一个名为 disabled 的字段用于表示该行或单元格的勾选状态是否禁止。如果 disabled 字段的值为 true则表示该行或单元格禁止勾选如果值为 false 或字段不存在则表示可以正常勾选。 2.在表格的列配置中使用 checkbox 类型的列并在 checkbox 类型的列中设置自定义的模板来控制勾选状态。可以根据数据中的 disabled 字段的值来动态设置禁止勾选的样式。 下面是一个示例代码演示如何在 layui 的 table 表格中设置勾选禁止勾选状态
table.render({elem: #demo,data: [{id: 1, name: Alice, score: 85, disabled: false},{id: 2, name: Bob, score: 76, disabled: true},{id: 3, name: Cindy, score: 92, disabled: false},],cols: [[{type: checkbox},{field: name, title: 姓名},{field: score, title: 分数},]],done: function(res, curr, count) {// 设置禁止勾选状态的样式$(tbody tr).each(function(index, item) {var disabled res.data[index].disabled;if (disabled) {$(this).find(input[typecheckbox]).prop(disabled, true).next().addClass(layui-checkbox-disbaled layui-disabled);}});}
});
在上面的示例中通过在数据中添加 disabled 字段来表示是否禁止勾选在 done 回调函数中根据数据的 disabled 字段值设置禁止勾选的样式实现禁止勾选状态的效果。
文章推荐
【前端】layui table表格勾选事件以及常见模块
【前端】Layui的表格常用功能表单提交事件表格下拉按钮点击事件表格外的按钮点击事件
【Echarts】曲线图上方显示数字以及自定义值标题和副标题居中鼠标上显示信息以及自定义信息
【Echarts】柱状图上方显示数字以及自定义值标题和副标题居中鼠标上显示信息以及自定义信息
【随笔】程序员如何选择职业赛道目前各个赛道的现状如何那个赛道前景巨大
【随笔】程序员的金三银四求职宝典每个人都有最合适自己的求职宝典 总结温故而知新不同阶段重温知识点会有不一样的认识和理解博主将巩固一遍知识点并以实践方式和大家分享若能有所帮助和收获这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。
