[轉]easyui 擷取資料表格中選中行的資料 Get selected row data from...

標籤：

原文地址:http://my.oschina.net/meSpace/blog/41463

http://www.easyui.net/2010/06/easyui-tutorial-get-selected-row-data-from-datagrid/

http://easyui.btboys.com/api/      easyui api

 

http://www.iteye.com/problems/47234 

jquery easyUI datagrid 的寬度能不能設定成百分比。

 

資料表格組件包含兩個方法來擷取選中行的資料:

• 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‘));

下載資料表格執行個體代碼: easyui-datagrid-demo.zip

 

 

 

$(‘#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>

[轉]easyui 擷取資料表格中選中行的資料 Get selected row data from...