導航:首頁 > 編程語言 > extjs獲取grid選中行

extjs獲取grid選中行

發布時間:2024-11-01 14:20:01

㈠ extjs 如何單擊下讓GridPanel里某一行的復選框選中

var sm = new Ext.grid.CheckboxSelectionModel({
//singleSelect: true,
listeners:{
//選中
"rowselect": function (grid,rowIndex,e) {
//使用這種方法會在先點擊最後一組數據的時候報錯
//var row=grid.getSelections();
//var val=row[rowIndex].get("id");

var grid = Ext.getCmp("shopGrid");
var val = grid.getStore().getAt(rowIndex).get("id");
sendUsersId.push(val);//存放用戶id
//alert(sendUsersId.toString());
},
//取消選中
"rowdeselect": function (grid, rowIndex, e) {
var grid = Ext.getCmp("shopGrid");
var val=grid.getStore().getAt(rowIndex).get("id");
sendUsersId.remove(val);//移除用戶id
//alert(sendUsersId.toString());
}
}
});

㈡ extjs中怎樣獲取grid中的所有行

var records = this.selModel.getSelections();
records是一個數組,比如
if (records.length < 1) {
Ext.MessageBox.alert("提示", "請選中一個選項!");
return;
}可以判斷grid裡面的數專據有沒有任意屬一個被選中

㈢ extjs如何獲取Grid中某一行某一列的值

Ext.grid.GridView.getCell( Number row, Number col ):取得指定單元格對應的td元素

例如:

varsStr=Ext.grid.GridView.getCell(0,0);


再給你一些常用的方法、屬性

1、Ext.grid.GridPanel

主要配置項:

store:表格的數據集

columns:表格列模式的配置數組,可自動創建ColumnModel列模式

autoExpandColumn:自動充滿表格未用空間的列,參數為列id,該id不能為0

stripeRows:表格是否隔行換色,默認為false

cm、colModel:表格的列模式,渲染表格時必須設置該配置項

sm、selModel:表格的選擇模式,默認為Ext.grid.RowSelectionModel

enableHdMenu:是否顯示表頭的上下文菜單,默認為true

enableColumnHide:是否允許通過標題中的上下文菜單隱藏列,默認為true

loadMask:是否在載入數據時顯示遮罩效果,默認為false

view:表格視圖,默認為Ext.grid.GridView

viewConfig:表格視圖的配置對象

autoExpandMax:自動擴充列的最大寬度,默認為1000

autoExpandMin:自動擴充列的最小寬度,默認為50

columnLines:是否顯示列分割線,默認為false

disableSelection:是否禁止行選擇,默認為false

enableColumnMove:是否允許拖放列,默認為true

enableColumnResize:是否允許改變列寬,默認為true

hideHeaders:是否隱藏表頭,默認為false

maxHeight:最大高度

minColumnWidth:最小列寬,默認為25

trackMouseOver:是否高亮顯示滑鼠所在的行,默認為true

主要方法:

getColumnModel():取得列模式

getSelectionModel():取得選擇模式

getStore():取得數據集

getView():取得視圖對象

reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ):使用一個新的數據集和列模式重新配置表格組件



2、Ext.grid.Column

主要配置項:

id:列id

header:表頭文字

dataIndex:設置列與數據集中數據記錄的對應關系,值為數據記錄中的欄位名稱。如果沒有設置該項則使用列索引與數據記錄中欄位的索引進行對應

width:列寬

align:列數據的對齊方式

hidden:是否隱藏列,默認為false

fixed:是否固定列寬,默認為false

menuDisabled:是否禁用列的上下文菜單,默認為false

resizable:是否允許改變列寬,默認為true

sortable:是否允許排序,默認為true

renderer:設置列的自定義單元格渲染函數

傳入函數的參數有:

value:數據的原始值

metadata:元數據對象,用於設置單元格的樣式和屬性,該對象包含的屬性有:

css:應用到單元格TD元素上的樣式名稱

attr:一個HTML屬性定義字元串,例如'style="color:blue"'

record:當前數據記錄對象

rowIndex:單元格的行索引

colIndex:單元格的列索引

store:數據集對象

xtype:列渲染器類型,默認為gridcolumn,其它可選值有booleancolumn、numbercolumn、datecolumn、 templatecolumn等

editable:是否可編輯,默認為true

editor:編輯器

groupName:

emptyGroupText:

groupable:



3、Ext.grid.ColumnModel

主要配置項:

columns:欄位數組

defaultSortable:是否進行默認排序,默認為false

defaultWidth:默認寬度

主要方法:

findColumnIndex( String col ):根據給定的dataIndex查找列索引

getColumnById( String id ):取得指定id對應的列

getColumnCount( Boolean visibleOnly ):取得列總數

getColumnHeader( Number col ):取得列的表頭

getColumnId( Number index ):取得列id

getDataIndex( Number col ):取得列對應的數據欄位名

getIndexById( String id ):取得列索引

getTotalWidth( Boolean includeHidden )

isCellEditable( Number colIndex, Number rowIndex )

isFixed()

isHidden( Number colIndex )

setColumnHeader( Number col, String header )

setColumnWidth( Number col, Number width, Boolean suppressEvent )

setDataIndex( Number col, String dataIndex )

setEditable( Number col, Boolean editable )

setEditor( Number col, Object editor )

setHidden( Number colIndex, Boolean hidden )

setRenderer( Number col, Function fn )



4、Ext.grid.AbstractSelectionModel

主要方法:

lock():鎖定選擇區域

unlock():解鎖選擇區域

isLocked():當前選擇區域是否被鎖定



5、Ext.grid.CellSelectionModel

主要方法:

clearSelections( Boolean preventNotify ):清除選擇區域

getSelectedCell():取得當前選擇的單元格,返回一數組,其格式:[rowIndex, colIndex]

hasSelection():當前是否有選擇區域

select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] ):選擇指定單元格



6、Ext.grid.RowSelectionModel

主要配置項:

singleSelect:是否單選模式,默認為false,即可以選擇多條數據

主要方法:

clearSelections( [Boolean fast] ):清除所有選擇區域

deselectRange( Number startRow, Number endRow ):取消范圍內的行選擇

deselectRow( Number row, [Boolean preventViewNotify] ):取消指定行的選擇狀態

each( Function fn, [Object scope] ):遍歷所有選擇行,並調用指定函數。當前被選行將傳入該函數中

getCount():得到選擇的總行數

getSelected():得到第一個被選記錄

getSelections():得到所有被選記錄的數組

hasNext():判斷當前被選行之後是否還有記錄可以選擇

hasPrevious():判斷當前被選行之前是否還有記錄可以選擇

hasSelection():是否已選擇了數據

isIdSelected( String id ):判斷指定id的記錄是否被選擇

isSelected( Number/Record index ):判斷指定記錄或記錄索引的數據是否被選擇

selectAll():選擇所有行

selectFirstRow():選擇第一行

selectLastRow( [Boolean keepExisting] ):選擇最後行

keepExisting:是否保持已有的選擇

selectNext( [Boolean keepExisting] ):選擇當前選擇行的下一行

selectPrevious( [Boolean keepExisting] ):選擇當前選擇行的上一行

selectRange( Number startRow, Number endRow, [Boolean keepExisting] ):選擇范圍內的所有行

selectRecords( Array records, [Boolean keepExisting] ):選擇一組指定記錄

selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] ):選擇一行

row:行索引

selectRows( Array rows, [Boolean keepExisting] ):選擇多行

rows:行索引數組



7、Ext.grid.CheckboxSelectionModel

主要配置項:

singleSelect:是否單選模式,默認為false,即可以選擇多條數據

checkOnly:是否只能通過點擊checkbox列進行選擇,默認為false

sortable:是否允許checkbox列排序,默認為false

width:checkbox列的寬度,默認為20



8、Ext.grid.RowNumberer

主要配置項:

header:行號列表頭顯示的內容

width:列寬,默認為23



9、Ext.grid.GridView

主要配置項:

enableRowBody:是否包含行體

sortAscText:表格標題菜單中升序的文字描述

sortDescText:表格標題菜單中降序的文字描述

columnsText:表格標題菜單中列對應的文字描述

autoFill:是否自動擴展列以充滿整個表格,默認為false

forceFit:是否強制調整表格列寬以適用表格的整體寬度,防止出現水平滾動條,默認為false

主要方法:

focusCell( Number row, Number col ):將焦點移到指定單元格

focusRow( Number row ):將焦點移動指定行

getCell( Number row, Number col ):取得指定單元格對應的td元素

getHeaderCell( Number index ):取得指定表頭對應的td元素

getRow( Number index ):取得指定行對應的tr元素

getRowClass( Record record, Number index, Object rowParams, Store store ):得到附加到表格行上的樣式名

record:當前行的數據記錄對象

index:當前行的索引

rowParams:渲染時傳入到行模板中的配置對象,通過它可以為行體定製樣式,該對象只在enableRowBody為true時才生效,可能的屬性 如下:

body:渲染到行體中的HTML代碼片段

bodyStyle:應用到行體tr元素style屬性的字元串

cols:應用到行體td元素colspan屬性的值,默認為總列數

store:表格數據集

refresh( [Boolean headersToo] ):刷新表格組件

scrollToTop():滾動表格到頂端


實戰

1:讓gridpanel的滾動條自動滾動到最後一條記錄(動態插入數據):

grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount()-1);


2:清除gridpanel中有行被選擇的狀態:

grid.getSelectionModel().clearSelections();

㈣ extjs的displayfield組件如何獲取grid中的某一列的值

1.1:數據對應的列,加了一個點擊事件,獲取到該列的值,然後賦值
{
align: 'center',
text: 'A,
dataIndex: 'A',
width:60,
renderer : function(val, meta, record) {
val = "<a href='javascript:;' >"+val+"</a>";
meta.tdAttr = 'data-qtip="' + val + '"';
return '<div align="left">' + val + '</div>';
},
listeners:{
'click':function(){
var rows = grid.getSelectionModel().getSelection();
displayfield.setValue(rows[0].get('A'));//通過rows[0].get('欄位名')來獲取A欄位的值,然後賦值給displayfield
}
}
2.如果有點擊事件的話,你可以直接使用 var rows = grid.getSelectionModel().getSelection();獲取store的數據模型(存放了所有的記錄),rows[0]是指定行的記錄(包括隱藏的欄位),displayfield這個在grid外面創建好的,在grid可以引用到的話可以直接使用 displayfield.setValue(rows[0].get('A'));來賦值

3.

var display = Ext.create('Ext.form.field.Display',{
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
})
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text : 'Company',
flex : 1,dataIndex: 'company',
renderer : function(val, meta, record) {
val = "<a href='javascript:;' >"+val+"</a>";
return val;
},
listeners:{
'click':function(){
var rows = grid.getSelectionModel().getSelection();
display.setValue(rows[0].get('name'))
}
}
} ], dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [display]
}]
});
});

㈤ extjs中如何選中grid中的行,並設置該行不可編輯

Ext.create('Ext.grid.Panel', {

title: 'Simpsons',

store: Ext.data.StoreManager.lookup('simpsonsStore'),

columns: [

{ text: 'Name', dataIndex: 'name' },

{ text: 'Email', dataIndex: 'email', flex: 1 },

{ text: 'Phone', dataIndex: 'phone' }

],

listeners:{

beforeedit:function(editor, e, eOpts){

//return false;//不可編輯

return true;//可編輯

}

},

height: 200,

width: 400,

renderTo: Ext.getBody()

});

㈥ extjs的可視化grid控制項怎麼去獲得選中行

var grid= new Ext.grid.GridPanel({
sm : new Ext.grid.CheckboxSelectionModel({
singleSelect : true//單選
}),
columns : [new Ext.grid.CheckboxSelectionModel(),
{header : "商品代碼",
dataIndex : 'itemCode'
}
]
})

var record=gird.getSelectionModel().getSelected();
record.get('itemCode');//就是選中的那行的值

㈦ extjs中gridpanel中怎麼獲得選中行所對應的行數

如果要獲得你選中的項是第幾行,我一般的做法是在gridpanel生成時,隱藏一列id編號項,這樣可以直接查詢id即可x0dx0avar seletedGird = grid.getSelectionModel().getSelections();//獲得選中的項x0dx0avar rowid = seletedGird[0].get('id');//獲得選中第一項的id列的值x0dx0a如果沒有設置id編號項,可以搜索storex0dx0avar seletedGird = grid.getSelectionModel().getSelections();//獲得選中的項x0dx0avar rowid = grid.getStore().indexOf(seletedGrid[0]);//獲得選中的第一項在store內的行號

閱讀全文

與extjs獲取grid選中行相關的資料

熱點內容
力控轉發數據客戶端模式如何建立 瀏覽:200
怎麼樣讓自己的網站不被別人看到 瀏覽:711
編程擴展效果如何 瀏覽:335
榮耀暢玩手環同步qq 瀏覽:475
怎麼向sql中添加資料庫 瀏覽:596
錄歌失敗重啟app什麼意思 瀏覽:522
壓縮文件包怎麼在微信發送 瀏覽:432
mysql資料庫怎麼插入時間值 瀏覽:191
微信視頻不能轉發朋友圈 瀏覽:596
影視後期的app有哪些 瀏覽:956
電子保單數據出錯什麼意思 瀏覽:368
如何以文件下載音樂 瀏覽:438
計算機網路章節練習 瀏覽:999
單片機的外部中斷程序 瀏覽:48
表格批量更名找不到指定文件 瀏覽:869
js的elseif 瀏覽:584
3dmaxvray視頻教程 瀏覽:905
imgtool工具中文版 瀏覽:539
java幫助文件在哪裡 瀏覽:965
win10切換輸入語言 瀏覽:696

友情鏈接