1.按条件控制Grid不可编辑
Grid编辑其实用到的不多...但是也有要控制权限或者其他条件不能编辑的情况其实挺简单,学过extjs的知道,我现在也只是写前台了,没有写到后台事件,有时间再说吧,如果条件是服务器判断可以参考官网的给行和列加样式的例子,轻轻点我就转到了
我这么好心就吧源码贴出来吧
F.ready(function () {
F('<% = Grid1.ClientID %>').on('beforeedit', function (editor, e) {
//判断数据,注意是ColumnID
if (e.record.get('Gender') == '1') {
F.alert('你是男的你忘了?不能编辑的');
return false;
}
//判断字段,也是ColumnID
else if (e.field != 'Name') {
F.alert('女的就改个名得了呗...只能编辑性名列');
return false;
}
//判断行号
else if (e.rowIdx == 1) {
return false;
}
//判断列号
else if (e.colIdx == 1) {
return false;
}
});
});
注意 : return false; 就是取消编辑,beforeedit就是编辑前事件,么么哒
2.禁止行选择事件
禁止指定行选择也有这个需求,也没写特别好,要自己学下,同样考虑分页和服务器条件的话要参考例子【不要用力点我就转到了】
放出源码
<f:HiddenField ID="highlightRows" Text="1,2,4" runat="server">
</f:HiddenField>
<script src="../res/js/jquery.min.js"></script>
<script>
var highlightRowsClientID = '<%= highlightRows.ClientID %>';
var gridClientID = '<%= Grid1.ClientID %>';
function disabledRowcheck() {
// 增加延迟,等待HiddenField更新完毕
window.setTimeout(function () {
var highlightRows = F(highlightRowsClientID);
var grid = F(gridClientID);
$(grid.el.dom).find('.x-grid-cell-row-checker.x-item-disabled').removeClass("x-item-disabled");
$.each(highlightRows.getValue().split(','), function (index, item) {
if (item !== '') {
var row = grid.getView().getNode(parseInt(item, 10));
$(row).find('.x-grid-cell-row-checker').addClass('x-item-disabled');
}
});
}, 100);
}
F.ready(function () {
F('<% = Grid1.ClientID %>').on('beforeselect', function (t, record, index, e) {
var highlightRows = eval("[" + F(highlightRowsClientID).getValue() + "]");
if (highlightRows.indexOf(index) >= 0) {
F.alert('这行不让选择了');
return false;
}
else { return true; }
});
F('<% = Grid1.ClientID %>').on('columnhide', function () {
disabledRowcheck();
});
F('<% = Grid1.ClientID %>').on('columnshow', function () {
disabledRowcheck();
});
F('<% = Grid1.ClientID %>').getStore().on('refresh', function () {
disabledRowcheck();
});
disabledRowcheck();
});
</script>
我是仿照例子写了 个 disabledRowcheck 方法,移出和新增了 x-item-disabled 样式,是内置的,加上了还点效果,禁止编辑也可以这么写,beforeselect 事件就是选择之前的事件,注意return ,disabledRowcheck 分别在 列隐藏,列显示,刷新事件中触发, 这是由于这几个事件都会重新绘制HTML
以上版本为 4.1.5 ,只是应用了几个extjs 的事件,其他的都来自官方示例,我也就是给出个提示,大家千万不要跪着看我的博客