easyui datagrid

最新推荐文章于 2024-05-07 16:07:47 发布

转载最新推荐文章于 2024-05-07 16:07:47 发布 · 87 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/871735097-/p/3773871.html

标签

#javascript #ViewUI

本文详细介绍了如何使用EasyUI datagrid插件实现不同数据属性的行点击响应及禁用效果。通过JavaScript代码，可以针对特定属性（如Sort=2）的数据行进行禁用并设置其checkbox为灰色，同时保持Sort=0的数据行默认选中状态。此外，还展示了如何在点击Sort=2的行时，不取消选择状态且改变视觉效果，使行看似不可点击。

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

比如，页面有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