layui的table 中 禁用某行勾选

最新推荐文章于 2024-06-05 09:55:19 发布
最新推荐文章于 2024-06-05 09:55:19 发布
阅读量905 收藏 10
点赞数 9
文章标签： 前端 java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39654518/article/details/135849242
版权
文章描述了如何在前端代码中，通过API获取数据后，根据发票状态处理表格中checkbox的勾选和禁用功能，以实现对发票信息的筛选和管理。
摘要由CSDN通过智能技术生成 
            done: function (res, curr, count) {
                var suborders_data_arr = res.data;
                for (let suborders_key in suborders_data_arr) {
                    if (suborders_data_arr[suborders_key]['checkStatus'] == 0) {
                        let index = suborders_data_arr[suborders_key]['LAY_TABLE_INDEX'];
                        $('tr[data-index=' + index + '] input[type="checkbox"]').prop('disabled', true).attr("name","layTableCheckboxDisabled"); // 禁止部分选择
                        $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', false);   // 取消选中
                    }
                };
                form.render('checkbox');
            }

全部代码块

        //渲染发票tab表格
        table.render({
            elem: '#overdueTable',
            data: invoce,
            cols: [[
                {type: 'checkbox',width: 60},
                {field: 'number',type: 'numbers',title: '序号',width: 60},
                {field: 'checkedState',title: '勾选状态',width: 100,
                    templet: function (data) {
                        if (data.checkedState == '0') {
                            return '未勾选';
                        } else if (data.checkedState == '1') {
                            return '已勾选';
                        } else {
                            return ''
                        }
                    }
                },
                {field: 'invoiceFrom',title: '发票来源',width: 160,
                    templet: function (data) {
                        if (data.invoiceFrom == '0') {
                            return '增值税发票管理系统';
                        } else if (data.invoiceFrom == '1') {
                            return '电子发票服务平台';
                        } else {
                            return ''
                        }
                    }
                },
                {field: 'sdpNumber',title: '数电票号码',width: 160},
                {field: 'invoiceCode',title: '发票代码',width: 160},
                {field: 'invoiceNumber',title: '发票号码',width: 160},
                {field: 'invoiceDate',title: '开票日期',width: 120},
                {field: 'amountMoney',title: '金额',width: 100},
                {field: 'faceTaxAmount',title: '票面税额',width: 100},
                {field: 'deductionTaxAmount',title: '有效抵扣税额',width: 120},
                {field: 'taxpayerName',title: '销售方纳税人名称',width: 160},
                {field: 'taxpayerNumber',title: '销售方纳税人识别号',width: 160},
                {field: 'ticketType',title: '票种',width: 120,                     
                    templet: function (data) {
                        if (data.ticketType == '0') {
                            return '数电票（增值税专用发票）';
                        } else if (data.ticketType == '1') {
                            return '数电票（普通发票）';
                        } else if (data.ticketType == '2') {
                            return '数电票纸质发票（增值税专用发票）';
                        } else if (data.ticketType == '3') {
                            return '数电票纸质发票（普通发票）';
                        } else if (data.ticketType == '4') {
                            return '数电票（机动车销售统一发票）';
                        } else if (data.ticketType == '5') {
                            return '数电纸质发票（机动车销售统一发票）';
                        } else if (data.ticketType == '6') {
                            return '数电票(航空运输电子客行程单)';
                        } else if (data.ticketType == '7') {
                            return '数电票(铁路电子客票)';
                        } else if (data.ticketType == '8') {
                            return '机动车销售统一发票';
                        } else if (data.ticketType == '9') {
                            return '增值税专用发票';
                        } else if (data.ticketType == '10') {
                            return '增值税通发票';
                        } else if (data.ticketType == '11') {
                            return '增值税电子专用发票';
                        } else if (data.ticketType == '12') {
                            return '增值税电子普通发票';
                        } else {
                            return ''
                        }
                    }
                },
                {field: 'invoiceStatus',title: '发票状态',width: 120,
                    templet: function (data) {
                        if (data.invoiceStatus == '0') {
                            return '正常';
                        } else if (data.invoiceStatus == '1') {
                            return '作废';
                        } else if (data.invoiceStatus == '2') {
                            return '已红冲-部分';
                        } else if (data.invoiceStatus == '3') {
                            return '已红冲-全额';
                        } else {
                            return ''
                        }
                    }
                },
                {field: 'redFontLockFlag',title: '红字锁定标志',width: 120,
                    templet: function (data) {
                        if (data.redFontLockFlag == '0') {
                            return '未锁定';
                        } else if (data.redFontLockFlag == '1') {
                            return '已锁定';
                        } else {
                            return ''
                        }
                    }
                },
                {field: 'checkDate',title: '勾选时间',width: 120},
                {field: 'invoiceRiskLevel',title: '发票风险等级',width: 120,fixed: 'right',
                    templet: function (data) {
                        var str = ""
                        if (data.invoiceRiskLevel == '0') {
                            str  = '正常';
                        } else if (data.invoiceRiskLevel == '1') {
                            str  = '疑点发票';
                        } else if (data.invoiceRiskLevel == '2') {
                            str  = '异常凭证';
                        } else {
                            str  = '';
                        }
                        return '<div><span style="color:#00A870; background: #DCF5ED;padding: 6px 8px;">' + str + '</span></div>'
                    }
                },
                {field: 'redFontLockFlag',title: '红字锁定',width: 120,fixed: 'right',
                    templet: function (data) {
                        if (data.redFontLockFlag == '0') {
                            return '未锁定';
                        } else if (data.redFontLockFlag == '1') {
                            return '已锁定';
                        } else {
                            return ''
                        }
                    }
                }
            ]],
            page: true,
            id: 'invoiceTable',
            limit: 10,
            limits: [5, 10, 15],
            done: function (res, curr, count) {
                var suborders_data_arr = res.data;
                for (let suborders_key in suborders_data_arr) {
                    if (suborders_data_arr[suborders_key]['checkStatus'] == 0) {
                        let index = suborders_data_arr[suborders_key]['LAY_TABLE_INDEX'];
                        $('tr[data-index=' + index + '] input[type="checkbox"]').prop('disabled', true).attr("name","layTableCheckboxDisabled"); // 禁止部分选择
                        $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', false);   // 取消选中
                    }
                };
                form.render('checkbox');
            }

        })

小陈平安
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui table 多选 指定数据 不可选中_饿了么UI表格实现多选功能
weixin_28950543的博客
11-26 1194
3 个需求勾选后台返回来的数据进行操作根据后台的打 √ 集合来进行勾选实现禁用只查看的功能解决方案使用饿了么 UI 的表格用到的方法select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, rowselect-all 当用户手动勾选全选 Checkbox 时触发的事件 selectionselection-change 当选择项发生变化时会触发该事件 s...
PHP使用Layui解决表格复选框禁选的问题
Peter_Pan0_0的博客
02-17 1346
PHP使用Layui解决表格复选框禁选的问题
layui table复选框禁止某几条勾选的实例
10-16
今天小编就为大家分享一篇layui table复选框禁止某几条勾选的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layer表格复选框，禁止勾选某行
夏已微凉、
12-09 2176
Layer表格复选框，禁止勾选某行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模块快速使...
禁用layui树形表格的多选框checkbox
最新发布
m0_71959044的博客
06-05 423
根据条件禁用layui树形表格的多选框
layui数据表格table增加复选框禁止勾选功能
SuperYoung的博客
10-08 2463
LayUI的CheckBox没有禁止选中功能，添加一个禁止选中功能。 找到src里面lay下面的modules文件夹里面的table.js 添加disableName: 'LAY_DISABLED' //是否禁用 config: { checkName: 'LAY_CHECKED', //是否选中状态的字段名 indexName: 'LAY_TABLE_INDEX', //下标索引名 disableName: 'LAY_DISABL
Layui列表复选框根据条件禁用
bigboss_666的博客
08-16 1104
【代码】Layui列表复选框根据条件禁用。
Layui禁止表格部分复选框，layui禁止表格自带第一列复选框，layui禁止表格部分复选框，layui获取表格复选框选中数据
weixin_43992507的博客
06-14 1725
Layui禁止表格部分复选框，layui禁止表格自带第一列复选框，layui禁止表格部分复选框，layui获取表格复选框选中数据
layui的table单击行勾选checkbox功能方法
01-19
//单击行勾选checkbox事件 $[removed](click,.layui-table-body table.layui-table tbody tr, function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'); //...
layui table设置某一行的字体颜色方法
10-16
今天小编就为大家分享一篇layui table设置某一行的字体颜色方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
LayUI table新增空白行
08-18
在使用LayUI框架开发网页应用时，可能会遇到需要在表格中添加空白行的需求，以实现某种特定的视觉效果或用户交互。然而，LayUI官方文档并未提供直接的新增空白行方法，这使得开发者需要自行寻找解决方案。在这种情况...
layui table 使用复选框checkbox，根据状态禁用
weixin_38817361的博客
08-06 2596
layui table 使用复选框checkbox，根据状态禁用
layui Table 复选框禁止选中设置
qq_35513303的博客
04-16 3190
//在 done: function (res, curr, count) {} 中写入如下代码 var tableElem = this.elem.next('.layui-table-view'); layui.each(table.cache.goodsTable, function (index, data) { //table.cache.goodsTable 获取当前页面表格的数据 if (data.isSale == 1) { //isSale:上下架 1：上架 2：下架 ...
Layui表格某行复选框变为不可选状态
withwindluo的博客
03-16 2024
设置第index行不可选 function disabledRow(index){ //第index行复选框不可选 let t = $(".layui-table tr[data-index="+index+"] input[type='checkbox']"); t.prop('disabled',true); t.addClass('layui-btn-disabled'); t.next().css("cursor","not-allowed"); //
Layui数据表格动态禁用checkbox
夏已微凉、
11-27 4223
Layui数据表格动态禁用checkbox 在数据表格的done中进行操作 done:function(res, curr, count){ //table_data = res.data; trNum = count; for(var i = 0;i&lt...
layui table中复选框禁用
lizaiismy的博客
12-06 2071
在table的done函数添加如下代码 且加上自己的逻辑代码 done: function (res, curr, count) { let state = ""; for (var i in res.rows) { let item = res.rows[i]; if ((item.approveStatus === 1)) {// 这里是判断需要禁用的条件（如：状态为0的） // check
实现控制layui表格某些特定条件的行不让选择的功能
zongmaomx的博客
03-20 633
在表格渲染完的done回调中，监听全选复选框和每行复选框，实现全选时所有可选行勾选，可选行全部勾选时全选复选框自动勾选，不是全选时全选复选框自动取消勾选。title定义一个name为check_all，lay-filter为checkall的复选框，内容定义#checkbd模板，但是layui并没有自带这样的功能，设置表头属性type后无法针对某一行进行判断。注意lay-filter不能用含下划线的字符串，虽然官网说的是任意字符。
layui，table，禁止全选，禁止部分选择
猴子年华的专栏
05-29 9965
layui 中 table禁止多选 【 注意 numbers 和 checkbox 顺序 】： table.render({ elem : '#abc', height : 'full', width : 'full', where : {a: 1, b: 2}, url : "", //数据接口 ...
layui table更新某个表格某行数据
06-13
可以使用layui中的`table.update`方法来更新某个表格中的某一行数据。具体的实现步骤如下： 1. 获取表格对象：使用`layui.table`中的`getTable`方法获取指定id的表格对象。 ```javascript var table = layui.table;...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值