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

 更新时间:2015年12月02日 10:22:51   作者:回到印第安  
在众多的表格插件中,jqgrid的特点是非常鲜明的,所以jqgrid表格插件用处非常广泛,本篇文章给大家介绍通过点击jqgrid表格弹出需要的表格数据,需要的朋友参考下

首先对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");

相关文章

  • jquery last-child 列表最后一项的样式

    jquery last-child 列表最后一项的样式

    发开中个人是比较喜欢用Repeater控件,特别是前台可老是遇到一个问题就是一个列表的最后一项总是和上面的样式不一样 如上面的都有下边框,最后一个就没有
    2010-01-01
  • jquery遍历筛选数组的几种方法和遍历解析json对象

    jquery遍历筛选数组的几种方法和遍历解析json对象

    本文为大家介绍下jquery遍历筛选数组的几种方法和遍历解析json对象的具体实现,感兴趣的朋友不要错过
    2013-12-12
  • jQuery版Tab标签切换

    jQuery版Tab标签切换

    网上常见的应用,用jQuery实现起来比较简单,只有几行代码。
    2011-03-03
  • jQuery动态生成Bootstrap表格

    jQuery动态生成Bootstrap表格

    这篇文章主要介绍了jQuery动态生成bootstrap表格的相关资料,非常不错具有一定的参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • jquery实现动态画圆

    jquery实现动态画圆

    这篇文章主要给大家分享了一段jquery实现动态画圆代码,需要的朋友可以参考下
    2014-12-12
  • Jquery Uploadify上传带进度条的简单实例

    Jquery Uploadify上传带进度条的简单实例

    本篇文章主要是对Jquery Uploadify上传带进度条的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 浅析jquery unbind()方法移除元素绑定的事件

    浅析jquery unbind()方法移除元素绑定的事件

    下面小编就为大家带来一篇浅析jquery unbind()方法移除元素绑定的事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jquery中$.fn和图片滚动效果实现的必备知识总结

    jquery中$.fn和图片滚动效果实现的必备知识总结

    图片滚动效果相信大家都使用过,看上去很简单的一个效果,如果想熟练的掌握必须知道jquery、IIFE、setInterval等基础以及$.fn用法,下面这篇文章主要介绍了关于jquery中$.fn和图片滚动效果制作的必备知识,需要的朋友可以参考下。
    2017-04-04
  • jQuery遍历Table应用示例

    jQuery遍历Table应用示例

    这篇文章主要介绍了jQuery遍历Table的具体实现,需要的朋友可以参考下
    2014-04-04
  • 使用jQuery制作基础的Web图片轮播效果

    使用jQuery制作基础的Web图片轮播效果

    这篇文章主要介绍了使用jQuery制作基础的Web图片轮播效果的实例,鼠标悬停时可停止而离开时可自动轮播,文中还介绍了一种使用zslider插件来实现的方法,比较犀利,需要的朋友可以参考下
    2016-04-04

最新评论