通过点击jqgrid表格弹出需要的表格数据


Posted in Javascript onDecember 02, 2015

首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中,Jqgrid的特点是非常鲜明的。

特点如下:

完整的表格呈现与运算功能,包含换页、栏位排序、grouping、新增、修改及删除资料等功能。

自定义的工具列

预设的Navigator工具列,可以很容易的使用新增、删除、编辑、检视及搜寻等功能。

完整的分页功能

按下任一栏位的标头,皆可以该栏位为排序项目。无论是升序或降序皆可。

预设的action formatter,可以快速而直觉地对每笔资料做运算。

支持多种数据格式。比如json、xml、array等。

下面通过代码实例给大家介绍通过点击jqgrid表格弹出需要的表格数据,具体内容如下所示:

首先,我们先定义一个函数,然后在JQuery里面直接引用就可以了,

function GetJqGridRowValue(jgrid, code) {
 var KeyValue = "";
 var selectedRowIds = $(jgrid).jqGrid("getGridParam", "selarrrow");
 if (selectedRowIds != "") {
  var len = selectedRowIds.length;
  for (var i = 0; i < len ; i++) {
   var rowData = $(jgrid).jqGrid('getRowData', selectedRowIds[i]);
   KeyValue += rowData[code] + ",";
  }
  KeyValue = KeyValue.substr(0, KeyValue.length - 1);
 } else {
  var rowData = $(jgrid).jqGrid('getRowData', $(jgrid).jqGrid('getGridParam', 'selrow'));
  KeyValue = rowData[code];
 }
 return KeyValue;
}//自定义GetJqGridRowValue函数

下面是显示表格的JS文件

$(function () {
 $("#group").jqGrid({
  url: '/Group/GetGroup',
  datatype: 'json',
  mtype: 'Get',
  colNames: ['GRP_ID', 'GRP_NAME', 'GRP_DESCRIPTION'],//GROUP
  colModel: [
     { key: true, hidden: true, name: 'GRP_ID', index: 'GRP_ID' },
     { key: false, name: 'GRP_NAME', index: 'GRP_NAME', editable: true },
     { key: false, name: 'GRP_DESCRIPTION', index: 'GRP_DESCRIPTION', editable: true },
  ],
  ondblClickRow: function (rowid) {
   var td_id = GetJqGridRowValue("#group", "GRP_ID");
   alert(td_id);
  },//点击获取gqgird的当前列的'GRP_ID'的值
  pager: jQuery('#pager1'),
  rowNum: 5,
  rowList: [5, 10, 15, 20],
  height: '19%',
  viewrecords: true,
  caption: 'Group_Table',
  emptyrecords: '没有记录显示',
  jsonReader: {
   rows: 'rows',
   page: 'page',
   total: 'total',
   records: 'records',
   repeatitems: false,
   id: '0',
   editurl: '/Group/EditGroup'
  },
  autowidth: true,
  multiselect: false,//是否多选
 });
 jQuery("#group").jqGrid('navGrid', "#pager1",
  { edit: true, add: true, del: true, position: 'left', alerttext: "请选择需要操作的数据行!" },
 {
  zIndex: 100,
  url: '/Group/EditGroup',
  closeOnEscape: true,
  closeAfterEdit: true,
  recreateForm: true,
  afterComplete: function (response) {
   if (response.responseText) {
    alert(response.responseText);
   }
  }
 },
 {
  zIndex: 100,
  url: '/Group/CreateGroup',
  closeOnEscape: true,
  closeAfterEdit: true,
  afterComplete: function (response) {
   if (response.responseText) {
    alert(response.responseText);
   }
  }
 },
 {
  zIndex: 100,
  url: '/Group/DeleteGroup',
  closeOnEscape: true,
  closeAfterEdit: true,
  recreateForm: true,
  msg: "你确定要删除么?",
  afterComplete: function (response) {
   if (response.responseText) {
    alert(response.responseText);
   }
  }
 }
 );
});

ps:jqGrid清空表格中的所有行数据

jqGrid清空表格中数据的方法如下:

jQuery("#gridTable").jqGrid("clearGridData");
Javascript 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
js实现自定义进度条效果
Mar 15 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
原生JavaScript实现异步多文件上传
Dec 02 #Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 #Javascript
日常收藏的jquery技巧
Dec 02 #Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 #Javascript
jquery密码强度校验
Dec 02 #Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 #Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 #Javascript
You might like
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php向js函数传参的几种方法
2014/08/10 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
javascript 简练的几个函数
2009/08/29 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
使用Python发现隐藏的wifi
2020/03/04 Python
python中id函数运行方式
2020/07/03 Python
Python爬取梨视频的示例
2021/01/29 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
网吧收银员岗位职责
2013/12/14 职场文书
小班开学寄语
2014/04/04 职场文书
销售助理岗位职责
2015/02/11 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
党员理论学习心得体会
2016/01/21 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
MySQL数据库 任意ip连接方法
2022/05/20 MySQL