• 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的行,不取消选择,并且由于背景为白色,点击颜色也不会变化,就类似该行不可被点击一样

    有时候不是我们失去了目标,而是失去了方向。
  • 相关阅读:
    npm依赖版本变动引发的惨案
    Flutter ListTile
    操作系统的发展史(科普章节)
    操作系统的发展史(科普章节)
    如何在电脑上保存微信公众号文章封面图片?
    如何在电脑上保存微信公众号文章封面图片?
    操作系统(科普章节)
    操作系统(科普章节)
    前端面试之前要准备的那些事
    前端面试之前要准备的那些事
  • 原文地址:https://www.cnblogs.com/871735097-/p/3773871.html
Copyright © 2020-2023  润新知