通过点击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 相关文章推荐
javascript几个易错点记录
Nov 26 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
Node实现搜索框进行模糊查询
Jun 28 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
表单内同名元素的控制
2006/11/22 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
JS前端笔试题分析
2016/12/19 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
Python 正则表达式操作指南
2009/05/04 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
客服服务心得体会
2013/12/30 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
财政局个人总结
2015/03/04 职场文书
运动会新闻稿
2015/07/17 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript