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

网络编程 2024/11/14 佚名

3 1 2

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

jqgrid表格,jqgrid表格数据

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“通过点击jqgrid表格弹出需要的表格数据”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月14日

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

jqGrid表格应用之新增与删除数据附源码下载

原生JavaScript实现异步多文件上传

评论“通过点击jqgrid表格弹出需要的表格数据”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接