Layui表格行监听与字体颜色的改变

文献种类:专题技术总结文献

开发工具与关键技术:          MVC jq技术                    

作者:彭智豪      ;年级:2004    ;撰写时间:2021   年 7  月 28日

文献编号:                归档时间:   年   月   日

Layui表格行监听与字体颜色的改变

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术: MVC jq技术

作者:彭智豪

撰写时间:2021/7/28 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                                         ​​​​​​

1.在项目开始写之前,一定要引入layui、jq等文件;

2.下面这张是设置了字体的颜色

 

3.下面这张是行的单击监听事件,layui表格行变色;

 

4.下面是具体代码;

 

 

5. 要看清stat设置的位置,row行监听事件

6. 因为我数据库设置的原因,所以data.bookstate中的bookstate是我数据库里面的字段,即“在借”,“归还”的这些关键名,这个你就要活用了!

以上是我写的关于layui表格监听与字体的颜色改变的案例,我要分享给你们,希望可以帮助到你们。

也不知道这波操作有没有吸引到您的眼球,不管怎样,小试一番才知道效果,赶紧行动起来吧!

新手上道,请多多指教。如果有更好的方法或不懂的地方欢迎在评论区教导和提问!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layui 表格中,可以通过监听复选框的选择来实现批量操作等功能。具体实现步骤如下: 1. 在表格中添加复选框列,并设置lay-skin属性为primary,表示使用layui风格的复选框。 ``` <table class="layui-table" lay-data="{...}"> <colgroup> ... <col width="50"> </colgroup> <thead> ... <th lay-data="{field:'checkbox', width:50, templet:'#checkboxTpl'}"></th> </thead> <tbody> ... </tbody> </table> <script type="text/html" id="checkboxTpl"> <input type="checkbox" lay-skin="primary"> </script> ``` 2. 在JavaScript代码中监听复选框的选择事件,可以使用layui的form模块来实现。需要注意的是,由于表格是动态生成的,所以需要使用layui的form.render()方法重新渲染表单元素。 ``` layui.use(['table', 'form'], function(){ var table = layui.table, form = layui.form; // 监听复选框选择 table.on('checkbox(test)', function(obj){ console.log(obj.checked); // 当前是否选中状态 console.log(obj.data); // 原始数据 console.log(obj.type); // 类型,如果选则为:row,如果全选则为:all,如果取消选择则为:uncheck console.log(table.checkStatus('test').data); // 获取选中的数据 }); // 重新渲染表单元素 form.render(); }); ``` 3. 表格中如果存在分页,则需要在分页时重新渲染表单元素。 ``` table.on('page(test)', function(){ form.render(); }); ``` 以上就是监听表格复选框选择的实现方法。需要注意的是,表格中的复选框列必须有唯一的字段名,否则无法在JavaScript代码中获取选中的数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值