通过点击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 相关文章推荐
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
vue实现商城购物车功能
Nov 27 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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调用mysql数据 dbclass类
2011/05/07 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
Python命名空间详解
2014/08/18 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
函授本科毕业生自我鉴定
2013/10/16 职场文书
党员入党表决心的话
2014/03/11 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
走群众路线学习笔记
2014/11/06 职场文书
2014年德育工作总结
2014/11/20 职场文书
维稳承诺书
2015/01/20 职场文书
陪护人员误工证明
2015/06/24 职场文书
高中生物教学反思
2016/02/20 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
优化Mysql查询的示例
2022/04/26 MySQL