[转] easyui 获取数据表格中选中行的数据 Get selected row data from...
2016-01-06 16:33
645 查看
原文地址: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
getSelected: 获取第一个选中行的数据,如果没有选中的行则返回空,否则返回该行的记录
getSelections: 获取所有选中行的数据,返回数组,其元素为行的记录
获取所有选中行的项id:
下载数据表格实例代码: 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>
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>
相关文章推荐
- 自定义UIView动画效果
- 利用EasyUI combobox实现模糊搜索
- ueditor显示内容末尾有多余标记的解决
- 获取UILabel上最后一个字符串的位置。获取文字长度和高度,自动换行
- 实践自定义UI-ViewGroup
- Day3_UI布局--FXQ
- ~\sdk\build-tools\22.0.1\aapt.exe" finished with non-zero exit value 1
- iOS UI-集合视图(UICollectionView)
- 关于Android Studio中build.gradle文件的gradle路径存在问题
- 如何使用 require.js ,实现js文件的异步加载,避免网页失去响应,管理模块之间的依赖性,便于代码的编写和维护。
- UILable文字置顶的解决方案
- OS开发之AFNetworking-解决Servlet用request.getParameter("")无法获取到post参数的问题
- easyui扩展datagrid格子移动功能
- Android酷炫实用的开源框架(UI框架)
- 影响 UITableView 滚动的流畅性的原因
- DB2 VALUES用法详解
- 在Android Studio中进行单元测试和UI测试
- UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果
- iOS获取UIView上某点的颜色值
- 关于状态栏的相关设置(UIStatusBar)