首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中,Jqgrid的特点是非常鲜明的。
特点如下:
完整的表格呈现与运算功能,包含换页、栏位排序、grouping、新增、修改及删除资料等功能。
自定义的工具列
预设的Navigator工具列,可以很容易的使用新增、删除、编辑、检视及搜寻等功能。
分页功能
按下任一栏位的标头,皆可以该栏位为排序项目。无论是升序或降序皆可。
预设的action formatter,可以快速而直觉地对每笔资料做运算。
支持多种数据格式。比如json、xml、array等。
下面通过代码实例给大家介绍通过点击jqgrid表格弹出需要的表格数据,具体内容如下所示:
首先,我们先定义一个函数,然后在JQuery里面直接引用就可以了,
自定义GetJqGridRowValue函数
下面是显示表格的JS文件
获取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);
}
}
},url: '/Group/CreateGroup',url: '/Group/DeleteGroup',msg: "你确定要删除么?",afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
}
);
});
ps:jqGrid清空表格中的所有行数据
jqGrid清空表格中数据的方法如下: