如何取出 Grid 中被选中的值JS堂-JavaScript开源社区-s ArchiverJS堂-JavaScript开源社区- ? Ext UI ? Ex
如何取出 Grid 中被选中的值
JS堂-JavaScript开源社区-'s Archiver
JS堂-JavaScript开源社区- ? Ext UI ? Ext JS Grid 专区 ? 请问如何取出 Grid 中被选中的值
kangkangxiong 发表于 2007-8-23 01:07
请问如何取出 Grid 中被选中的值
请问如何取出 Grid 中被选中的值,是不是和 dataSource 有关啊?
zym16621 发表于 2007-8-23 09:32
可以使用getSelectionModel()得到Grid的RowSelectionModel;
然后监听RowSelectionModel的rowselect事件,该事件第三个参数是该行对应的Ext.data.Record对象,根据Record对象可以取得该行的数据。
gavin213 发表于 2007-8-23 15:56
回复 #2 zym16621 的帖子
那么怎么在grid 中每行记录前都显示一个checkbox,就是多一checkbox列,由checkbox的选取来取得想要的记录值呢?
dearplato 发表于 2007-8-23 22:22
var objRecord = Ext.data.Record.create([{name: 'TablePrimaryKey', type: 'string'}]); var objDS = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: strUrl}), reader : new Ext.data.XmlReader({record : 'root',success: '@success'}, objRecord) }); var objCM = new Ext.grid.ColumnModel([{header: 'Action', dataIndex: 'TablePrimaryKey', width: 60, locked: true, renderer: formatBoolean, hidden:false, align: 'center'}]); var objGrid=new Ext.grid.Grid('objHtmlElementId',{ds:objDS,cm:objCM,.........}); function formatBoolean(value, cellmeta, record, RowIndex, ColumnIndex, store){ var strTemp = ''; strTemp += '<input id="checkbox_'+ record.id + '" type="checkbox" style="padding:0px;margin:0px;height:13px;" ' + (objGrid.getSelectionModel().isSelected(RowIndex) ? 'checked="true"' : 'checked="false"') + '>'; return strTemp; }; objDS.load({params:{start:0, limit:intPageSize}});
gavin213 发表于 2007-8-24 11:17
回复 #4 dearplato 的帖子
那如何获得,选取行的值呢?请指教
dearplato 发表于 2007-8-24 12:01
value就是ColumnModel中定義的dataIndex欄位值
record就是被選取行的全部值, record.get("TablePrimaryKey") 就可以取出指定欄位的值.
renderer可用的6個參數說明,請看Ext.data.Record, Ext.grid.ColumnModel 的API.
function formatBoolean(value, cellmeta, record, RowIndex, ColumnIndex, store){ var strTemp = ''; strTemp += '<input id="checkbox_'+ record.id + '" type="checkbox" style="padding:0px;margin:0px;height:13px;" ' + (objGrid.getSelectionModel().isSelected(RowIndex) ? 'checked="true"' : 'checked="false"') + '>'; return strTemp; };
cxyloveme 发表于 2007-8-29 11:38
楼上的好牛啊。。。。。
iolo 发表于 2007-8-30 15:37
不好意思,对js不熟,如何监听 ?
可以使用getSelectionModel()得到Grid的RowSelectionModel;
然后监听RowSelectionModel的rowselect事件,该事件第三个参数是该行对应的Ext.data.Record对象,根据Record对象可以取得该行的数据。
能给一段简单但详细的代码说明一下吗?
谢谢
iolo 发表于 2007-8-30 16:28
答案 :)
function makeGrid (gridId,ds,columnTitle){
var clicked = function(sm,index,record) {
var val= record.get('value');
alert(gridId+"'s " +val);
}
var grid= new Ext.grid.Grid(gridId, {
ds: commonStore(ds),
cm: columnModel(columnTitle)
});
grid.render();
var sm =grid.getSelectionModel();
sm.selectFirstRow();
//grid.on('click', clicked(grid));
sm.addListener('rowselect',clicked);
return grid;
}
kabobobo 发表于 2007-8-30 16:45
//rowname1 2 3 为列的名字
var colModel = new Ext.grid.ColumnModel([
{id:'company',header: oStruts[0], width: 30, sortable: true, locked:false, dataIndex: 'rowname1'},
{header: oStruts[1], width: 75, sortable: true,locked:false, dataIndex: 'rowname2'},
{header: oStruts[2], width: 75, sortable: true,locked:false, dataIndex: 'rowname3'}
]);
// 创建 grid 在id 为'grid-example' div中
var grid = new Ext.grid.Grid('grid-example', {
ds: ds,
cm: colModel,
autoExpandColumn: 'company'
});
var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');
/*为grid对象加入新的事件监听,监听的内容是(捕获grid对象内定义的rowclick)可参阅源代码grid.js
"rowclick" : true,
* @event rowdblclick
* Fires when a row is double clicked
* @param {Grid} this
* @param {Number} rowIndex
* @param {Ext.EventObject} e
*/
//新的事件函数
function fnClick(grid, rowIndex,e){
//解释下面的语句:getSelectionModel()获得rowselectionModel对象,此对象中有个 getSelected()获得record对象,record对象里有get(String name)方法来,来通过已定义的名字获得内容。
var str = grid.getSelectionModel().getSelected().get('rowname1');
alert(str);}
//这里注册事件
grid.addListener('rowclick', fnClick);
grid.render();
grid.getSelectionModel().selectFirstRow();
我不是高手
dearplato 发表于 2007-8-31 12:04
舉例來說,如果要用自訂的checkbox來取代Ext.form.Grid的select以及multiselect功能
例如:
單擊每一列最前面的checkbox,則選取資料,再單擊則反選取。單擊grid的其他地方都不會有動作。
雙擊資料列則在dialog中開啟資料。
可以加上這樣的程式碼(請參考我前面貼的程式碼)
objGrid.on({ //雙擊 在dialog開啟資料 rowdblclick : function(grid, rowIndex,e){ openDialog('Select',rowIndex); }, //單擊每一列最前面的checkbox,則選取資料,再單擊則反選取。單擊grid的其他地方都不會有動作。 rowclick : function(grid, rowIndex,e){ var tmpRecord = objDS.getAt(rowIndex); var chk = Ext.get('checkbox_'+tmpRecord.id).dom; if(chk.checked){ objGrid.getSelectionModel().selectRow(rowIndex, true); } else{ objGrid.getSelectionModel().deselectRow(rowIndex); } } });
最後,記得在呼叫Ext.onReady()之前加上下列的程式碼,overrides Ext.form.RowSelectionModel的hotkey與mouse event handle
Ext.grid.RowSelectionModel.prototype.hotkey = false;Ext.grid.RowSelectionModel.prototype.handleMouseDown = function(e, t){};
页: [1]
查看完整版本: 请问如何取出 Grid 中被选中的值
Powered by Discuz! Archiver 7.0.0 ? 2001-2009 Comsenz Inc.