如何取出 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不熟，如何监听 ？

引用

原帖由 zym16621 于 2007-8-23 09:32 发表
可以使用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.