文档章节

easyui 获取数据表格中选中行的数据 Get selected row data from...

功夫panda
 功夫panda
发布于 2012/02/23 23:43
字数 650
阅读 33739
收藏 3

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>

© 著作权归作者所有

功夫panda
粉丝 20
博文 201
码字总数 31837
作品 0
昌平
程序员
私信 提问
easyui 中的datagrid 请求action没有进入action方法?也不知道什么原因?

$(function(){ $('#test').datagrid({ title:'我的表格', iconCls:'icon-save', width:700, height:350, nowrap: true, autoRowHeight: false, striped: true, collapsible:true, url:'show......

我爱编程zc
2016/08/28
814
0
avue 1.1.21 发布,crud 和 form 的搬砖神器

avue 1.1.21 发布了,Avue 是基于 Vue.js 和 element 的快速开发框架。它的核心是数据驱动 UI 的思想,让我们从繁琐的 crud 开发中解脱出来,它的写法类似 easyUI,但是写起来比 easyui 更容...

avue_smallwei
2018/10/07
1K
0
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
easyui-table表格客户端分页实例

版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083 一、前言 前一篇博客已经介绍了bootstrap-table的客户端分页,而本...

尘光掠影
2017/08/06
0
0
如何用easyui动态加载表格标题

在最近做的项目中涉及到了需要加载大量表格的功能,采用了easyui的datagrid,但是发现datdagrid表格标题需要手动写,这在表格多的情况是一件很麻烦的事情。经过了long long time 终于研究出来...

MissGu
2015/03/28
7.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
16
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
18
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部