easyui 獲取資料表格中選中行的資料 Get selected row data from...
資料表格元件包含兩個方法來獲取選中行的資料:
- getSelected: 獲取第一個選中行的資料,如果沒有選中的行則返回空,否則返回該行的記錄
- getSelections: 獲取所有選中行的資料,返回陣列,其元素為行的記錄
建立標籤
<table id="tt"></table>
建立資料表格
$('#tt').datagrid({ title:'Load Data', iconCls:'icon-save', width:600, height:250, url:'datagrid_data.json', columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'productid',title:'Product ID',width:80}, {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:100}, {field:'status',title:'Status',width:60} ]] });
用法例項
獲取選中行的資料:
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<rows.length; i++){ ids.push(rows[i].itemid); } alert(ids.join('\n'));
$('#tt').datagrid({
iconCls:'icon-save',
width:1150,
height:650,
nowrap: false,
striped: true,
idField: 'g_id',
collapsible:true,
url:'<%=path%>/gamemanage!upload.action',
remoteSort: false,
idField:'g_id',
pageSize:5,
frozenColumns:[[
{field:'ck',checkbox:true}
]],
columns:[[
{title:'遊戲ID',field:'g_id',width:80},
{title:'遊戲名稱',field:'g_name',width:80},
{title:'版本',field:'g_version',width:80},
{title:'玩家數量',field:'g_players',width:80},
{title:'遊戲簡介',field:'g_desc',width:80},
{title:'星級',field:'g_star',width:80},
{title:'遊戲圖示路徑',field:'g_imagepath',width:80},
{title:'遊戲圖示名稱',field:'g_imagename',width:80},
{title:'可用狀態',field:'g_status',width:80},
{title:'遊戲上線時間',field:'g_onlinetime',width:80},
{title:'是否支援客戶端',field:'g_isclient',width:80},
{title:'遊戲儲存路徑',field:'g_gamepath',width:80},
{title:'遊戲檔名',field:'g_gamename',width:80},
{title:'遊戲金鑰',field:'g_key',width:80},
{title:'遊戲廠商ID',field:'gc_id',width:80},
{title:'遊戲型別ID',field:'g_type_id',width:80},
{title:'檔案大小',field:'g_filesize',width:80},
{title:'遊戲檔案路徑',field:'g_packagepath',width:80}
]],
pagination:true,
rownumbers:true
});
//分頁
var p = $('#test').datagrid('getPager');
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
//獲取行數getSelections
//獲取行數內容 getSelected
var ids = [];
var rows = $('#tt').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
ids.push(rows[i].g_id);
}
alert(rows.length);
alert(ids);
//只能在頁面中刪除行 不能對資料庫操作...
function del(){
var rows = $('#tt').datagrid("getSelections"); //獲取你選擇的所有行
//迴圈所選的行
for(var i =0;i<rows.length;i++){
var index = $('#tt').datagrid('getRowIndex',rows[i]);//獲取某行的行號
$('#tt').datagrid('deleteRow',index); //通過行號移除該行
}
}
//獲取頁面中選擇行的id和數量
function getSelectedArr() {
var ids = [];
var rows = $('#tt').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
ids.push(rows[i].g_id);
}
return ids;
}
var arr = getSelectedArr();
var num = arr.length;
//日期格式的文字輸入框
<input id="dd" class="easyui-datebox" ></input>