extjs Grid 时,默认初始选中

最近在使用带复选框grid组件的时候发现了一个奇怪的问题,第一次载入这个grid组件时就给这个grid组件初始化数据并选中其中的某一项,但始终无法选中,经单步调试发现,选中行的方法已被执行了,只是在所有的东西都执行完后,grid又刷新了一下,导致原先选中的项丢失。
  代码如下:
Js代码
Ext.onReady(function(){
var data = [
['table1','column1','remark1'],
['table2','column2','remark2']
];
var store = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data),
reader : new Ext.data.ArrayReader({},[
{name : 'tableName'},
{name : 'columnName'},
{name : 'remark'}
])
});
var databindsm = new Ext.grid.CheckboxSelectionModel({handleMouseDown : Ext.emptyFn,singleSelect : true});
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
databindsm,
{header : '表名',dataIndex : 'tableName',width : 145},
{header : '字段名',dataIndex : 'columnName',width : 145},
{header : '备注',dataIndex : 'remark',width : 145}
]);
var grid = new Ext.grid.GridPanel({
width : 570,
height : 240,
loadMark : true,
store : store,
cm : cm,
sm : databindsm
});
var viewport = new Ext.Viewport({
height : 240,
width : 570,
items : [grid]
});
store.load(data);
alert("aa");
grid.getSelectionModel().selectRow(1,true);
alert("bb");
});

  经查发现,原来是ext的mvc模式在作怪,源码中有如下方法:
Js代码
// private
afterRender : function(){
Ext.grid.GridPanel.superclass.afterRender.call(this);
this.view.layout();
if(this.deferRowRender){
this.view.afterRender.defer(10, this.view);
}else{
this.view.afterRender();
}
this.viewReady = true;
},

  在render数据后并没有显示页面,而是延迟渲染view,我们在view后再去选中,虽然设置了选中,但被延迟的渲染覆盖掉了,所以导致逻辑正确而显示不正确的结果。
  解决办法:
  1、静态store:在grid中加上一个配置项deferRowRender:false(不执行默认的render代码);
  2、动态store:使用store的load事件,在装载后进行选中
Js代码
grid.store.on("load",function(){
grid.getSelectionModel().selectRow(1,true);
});
### vxe-grid 获取复选框选中数据的方法 在 `vxe-grid` 中,可以通过调用网格实例的 API 来获取复选框选中的数据。具体来说,可以使用 `getCheckboxRecords()` 方法来获取当前选中的行数据[^5]。 以下是完整的示例代码: ```javascript // 假设已经初始化了一个 vxe-grid 实例并绑定了 ref="xGrid" methods: { getSelectedData() { const $grid = this.$refs.xGrid; // 获取 vxe-grid 的实例 if ($grid) { const selectedRows = $grid.getCheckboxRecords(); // 获取选中的行数据 console.log('选中的行数据:', selectedRows); return selectedRows; } } } ``` #### 关键点说明 1. **绑定 Ref** 在模板部分需要通过 `ref` 属性给 `vxe-grid` 组件设置一个引用名称,以便后续能够访问其实例对象。 2. **API 调用** 使用 `$grid.getCheckboxRecords()` 可以返回所有被勾选的行对应的记录数组[^5]。 3. **事件监听** 如果希望实监控用户的勾选操作,可以在 `vxe-grid` 的配置项中定义 `checkbox-config` 并启用相应的事件回调函数,例如 `check-change` 或者全局的 `selection-change`[^6]。 ```javascript { checkboxConfig: { reserve: true, // 是否开启保留行为(分页切换保持已选项) highlight: true, // 当前行高亮显示 trigger: 'manual' // 自定义触发方式 }, events: { selectionChange: ({ records }) => { console.log('当前选中的数据变化:', records); } } } ``` ### 注意事项 - 若启用了分页功能,则默认情况下仅会返回当前页面内的选中数据。如果需要跨页保存选择状态,需额外配置 `reserve` 参数为 `true`[^7]。 - 对于某些特殊场景下的权限控制或者条件限制,可参考提供的其他框架实现逻辑调整适配器,比如 ExtJS 的 `beforeselect` 监听机制[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值