首页 > 编程 > JavaScript > 正文

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

2019-11-20 11:06:20
字体:
来源:转载
供稿:网友

首先对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");
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表