easyui datagrid

有时候我们总有这样的需求,针对同一页中不同的数据, 点击他们产生不同的效果,

比如,页面有10条数据,

其中2条数据的属性Sort=0

5条数据的属性Sort=1

剩余Sort属性为2

要求页面加载完成时候Sort=0的数据默认选中(checkbox),sortt=2也为选中但checkbox成灰色禁用状态点击Sort=2的的行不产生效果,

$("#dag").datagrid({
                url: '@Url.Action("GetDepartment", "ClinicUser")?id=' + id + '',
                rownumbers: 'true',
                pagination: 'true',
                pageSize: 15,
                pageList: [10, 15, 20],
                onClickRow: function(rowIndex, rowData) {
                    if (rowData.Sort == "2") {
                        $('#dag').datagrid("selectRow", rowIndex);
                    }
                },
                onLoadSuccess: function(data) {
                    $('.datagrid-header-check input[type="checkbox"]').hide();
                    if (data && data.rows.length > 0) {
                        $.each(data.rows, function(i) {
                            if (data.rows[i].Sort == "0") {
                                $('#dag').datagrid('checkRow', i);
                            }
                            if (data.rows[i].Sort == "2") {
                                $('#dag').datagrid('checkRow', i);
                                $('.datagrid-row[datagrid-row-index="' + i + '"] input[type="checkbox"]')[0].disabled = true;
                                //$('.datagrid-row[datagrid-row-index="' + i + '"] input[type="checkbox"]').hide();
                                $('.datagrid-row[datagrid-row-index="' + i + '"] input[type="checkbox"]').parents('tr').css('background', '#ffffff');
                                //$(".datagrid-row-selected").css('background', '#ffffff');
                            }
                        });
                    }
                }
            });
        }

  分解

 $('#dag').datagrid('checkRow', i);
                                $('.datagrid-row[datagrid-row-index="' + i + '"] input[type="checkbox"]')[0].disabled = true;
                                //$('.datagrid-row[datagrid-row-index="' + i + '"] input[type="checkbox"]').hide();
                                $('.datagrid-row[datagrid-row-index="' + i + '"] input[type="checkbox"]').parents('tr').css('background', '#ffffff');
                                //$(".datagrid-row-selected").css('background', '#ffffff');

以上代码根据easyui-datagrid生成的HTML页面禁用掉sort为2的数据的checkbox,并且背景颜色设置为白色(则点击无效果变化)

onClickRow: function(rowIndex, rowData) {
                    if (rowData.Sort == "2") {
                        $('#dag').datagrid("selectRow", rowIndex);
                    }

上面代码:点击sort=2的行,不取消选择,并且由于背景为白色,点击颜色也不会变化,就类似该行不可被点击一样

有时候不是我们失去了目标,而是失去了方向。
原文地址:https://www.cnblogs.com/871735097-/p/3773871.html