有时候我们总有这样的需求,针对同一页中不同的数据, 点击他们产生不同的效果,
比如,页面有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的行,不取消选择,并且由于背景为白色,点击颜色也不会变化,就类似该行不可被点击一样