如何取出 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
[code]

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}});
[/code]

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.

[code]
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;
};
[/code]

cxyloveme 发表于 2007-8-29 11:38
楼上的好牛啊。。。。。

iolo 发表于 2007-8-30 15:37
不好意思，对js不熟，如何监听 ？
[quote]原帖由 [i]zym16621[/i] 于 2007-8-23 09:32 发表 [url=http://jstang.5d6d.com/redirect.php?goto=findpost&pid=1871&ptid=515][img]http://images.5d6d.com/orig/common/back.gif[/img][/url]
可以使用getSelectionModel()得到Grid的RowSelectionModel;
然后监听RowSelectionModel的rowselect事件，该事件第三个参数是该行对应的Ext.data.Record对象，根据Record对象可以取得该行的数据。 [/quote]

能给一段简单但详细的代码说明一下吗？
谢谢

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
[color=Red]//rowname1 2 3 为列的名字[/color]
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
*/

[color=Red]//新的事件函数
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);[/color]

grid.render();
grid.getSelectionModel().selectFirstRow();

我不是高手

dearplato 发表于 2007-8-31 12:04
舉例來說，如果要用自訂的checkbox來取代Ext.form.Grid的select以及multiselect功能
例如：
單擊每一列最前面的checkbox，則選取資料，再單擊則反選取。單擊grid的其他地方都不會有動作。
雙擊資料列則在dialog中開啟資料。

可以加上這樣的程式碼(請參考我前面貼的程式碼)

[code]

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);
}
}
});
[/code]

最後，記得在呼叫Ext.onReady()之前加上下列的程式碼，overrides Ext.form.RowSelectionModel的hotkey與mouse event handle
[code]
Ext.grid.RowSelectionModel.prototype.hotkey = false;
Ext.grid.RowSelectionModel.prototype.handleMouseDown = function(e, t){};
[/code]

页: [1]
查看完整版本: 请问如何取出 Grid 中被选中的值

Powered by Discuz! Archiver 7.0.0 © 2001-2009 Comsenz Inc.