jQuery EasyUI使用教程之從數據網格中獲取選中行數據

<jQuery EasyUI最新試用版免費下載>

本教程中的示例說明了如何獲取所選中行的數據。

查看jQuery EasyUI演示

DataGrid組件使用兩個方法來檢索所選行的數據：

• getSelected：獲取所選擇的第一行數據，若是沒有行選擇返回NULL，不然返回的記錄。

• getSelections：獲取全部所選行的數據，返回元素記錄的數組數據。

建立數據網格

< table id = "tt" class = "easyui-datagrid" style = "width:600px;height:250px" url = "data/datagrid_data.json" title = "Load Data" iconcls = "icon-save" >

< thead >

< tr >

< th field = "itemid" width = "80" >Item ID</ th >

< th field = "productid" width = "80" >Product ID</ th >

< th field = "listprice" width = "80" align = "right" >List Price</ th >

< th field = "unitcost" width = "80" align = "right" >Unit Cost</ th >

< th field = "attr1" width = "150" >Attribute</ th >

< th field = "status" width = "60" align = "center" >Stauts</ th >

</ tr >

</ thead >

</ table >

使用演示

想要獲取所選行的數據：

var row = $( '#tt' ).datagrid( 'getSelected' );

if (row){

alert( 'Item ID:' +row.itemid+ "\nPrice:" +row.listprice);

}

想要獲取全部所選項目的ID：

var ids = [];

var rows = $( '#tt' ).datagrid( 'getSelections' );

for ( var i=0; i$lt;rows.length; i++){

ids.push(rows[i].itemid);

}

alert(ids.join( '\n' ));

下載該EasyUI示例：easyui-datagrid-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！