通过点击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 写的一个简单的timer
Jul 30 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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去除换行(回车换行)的三种方法
2014/03/26 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
javascript时区函数介绍
2012/09/14 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
angularjs模态框的使用代码实例
2019/12/20 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
Python操作MySQL模拟银行转账
2018/03/12 Python
详解Python如何生成词云的方法
2018/06/01 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
自荐信格式范文
2013/10/07 职场文书
简短大学毕业感言
2014/01/18 职场文书
美术国培研修感言
2014/02/12 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
公开承诺书格式
2014/05/21 职场文书
会计求职信
2014/05/29 职场文书
课外活动总结范文
2014/07/09 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
2014年学校工作总结
2014/11/20 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android