easyui datagrid 让某行复选框置灰不能选

最近做项目需要类似如标题的效果,根据实际需求整合了一下网上的,内容如下:

$('#dg').datagrid({
    url:"url",
    method:'post',
    singleSelect: false,
    collapsible: true,
    autoRowHeight: 35,
    fitColumns: true,
    pagination: true,
    rownumbers: true,
    rowStyler:function(index,row){
        if(row.isFinanceExamine==1){
            return 'background-color:#6293BB;color:#fff;font-weight:bold;';
        }
    },
    onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历
        if (data.rows.length > 0) {
            //循环判断操作为新增的不能选择
            for (var i = 0; i < data.rows.length; i++) {
                //根据isFinanceExamine让某些行不可选
                if (data.rows[i].isFinanceExamine == 1) {
                    $("input[type='checkbox']")[i + 1].disabled = true;
                }
            }
        }
    },
    onClickRow: function(rowIndex, rowData){
        //加载完毕后获取所有的checkbox遍历
        $("input[type='checkbox']").each(function(index, el){
            //如果当前的复选框不可选,则不让其选中
            if (el.disabled == true) {
                $('#dg').datagrid('unselectRow', index - 1);
            }
        })
    }
});

欢迎交流,共同学习~~

转载于:https://www.cnblogs.com/gscq073240/articles/6914495.html

你可以按照以下步骤实现: 1. 在easyui datagrid中添加一个复选框列,可以使用“checkbox”属性来实现: ```html <th data-options="field:'ck',checkbox:true"></th> ``` 2. 在datagrid的底部添加一个合计行: ```html <div id="dg" class="easyui-datagrid" style="width:100%;height:300px" data-options=" url:'datagrid_data.json', singleSelect:true, rownumbers:true, pagination:true, fitColumns:true, toolbar:'#tb', onLoadSuccess:calcTotal "> <thead> <tr> <th data-options="field:'name'">Name</th> <th data-options="field:'price'">Price</th> <th data-options="field:'quantity'">Quantity</th> <th data-options="field:'amount'">Amount</th> <th data-options="field:'ck',checkbox:true"></th> </tr> </thead> <tfoot> <tr> <td colspan="3" style="text-align:right">Total:</td> <td id="totalAmount"></td> <td></td> </tr> </tfoot> </div> ``` 3. 编写一个JavaScript函数来计算选中行的合计值,并更新合计行的数据: ```javascript function calcTotal() { var rows = $('#dg').datagrid('getSelections'); var total = 0; for (var i = 0; i < rows.length; i++) { total += rows[i].amount; } $('#totalAmount').text(total); } ``` 4. 在datagrid的属性中添加“onLoadSuccess”事件,将它绑定到上一步编写的函数上,这样每次加载数据或选中行时都会重新计算合计值并更新合计行的数据。 ```javascript onLoadSuccess:calcTotal ``` 这样就可以实现在easyui datagrid中添加一个复选框和合计行,并根据选中的行数自动改变合计值了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值