通过点击jqgrid表格弹出需要的表格数据
2015-12-02 00:00
671 查看
首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中,Jqgrid的特点是非常鲜明的。
特点如下:
完整的表格呈现与运算功能,包含换页、栏位排序、grouping、新增、修改及删除资料等功能。
自定义的工具列
预设的Navigator工具列,可以很容易的使用新增、删除、编辑、检视及搜寻等功能。
完整的分页功能
按下任一栏位的标头,皆可以该栏位为排序项目。无论是升序或降序皆可。
预设的action formatter,可以快速而直觉地对每笔资料做运算。
支持多种数据格式。比如json、xml、array等。
下面通过代码实例给大家介绍通过点击jqgrid表格弹出需要的表格数据,具体内容如下所示:
首先,我们先定义一个函数,然后在JQuery里面直接引用就可以了,
下面是显示表格的JS文件
ps:jqGrid清空表格中的所有行数据
jqGrid清空表格中数据的方法如下:
给jqGrid数据行添加修改和删除操作链接(之一)
jQuery中jqGrid分页实现代码
JQGrid的用法解析(列编辑,添加行,删除行)
jqgrid 编辑添加功能详细解析
jqGrid读取选择的多行的某个属性代码
CentOS下php使用127.0.0.1不能连接mysql的解决方法
php+mysql结合Ajax实现点赞功能完整实例
jqGrid表格应用之新增与删除数据附源码下载
Jqgrid之强大的表格插件应用
基于PHP和Mysql相结合使用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 jQuery 表格插件测试代码给jqGrid数据行添加修改和删除操作链接(之一)
jQuery中jqGrid分页实现代码
JQGrid的用法解析(列编辑,添加行,删除行)
jqgrid 编辑添加功能详细解析
jqGrid读取选择的多行的某个属性代码
CentOS下php使用127.0.0.1不能连接mysql的解决方法
php+mysql结合Ajax实现点赞功能完整实例
jqGrid表格应用之新增与删除数据附源码下载
Jqgrid之强大的表格插件应用
基于PHP和Mysql相结合使用jqGrid读取数据并显示
相关文章推荐
- jqGrid表格应用之新增与删除数据附源码下载
- 整理Javascript事件响应学习笔记
- Jqgrid之强大的表格插件应用
- 基于PHP和Mysql相结合使用jqGrid读取数据并显示
- jquery判断输入密码两次是否相等
- 装饰模式实例与UML
- 纯js代码实现简单计算器
- Jquery插件之Fancybox丰富的弹出层效果附源码下载
- javascript实现自动填写表单实例简析
- jqGrid中文文档之选项设置
- jQuery实现为控件添加水印文字效果(附源码)
- 分享15个大家都熟知的jquery小技巧
- jquery实现简单文字提示效果
- jQuery简单实现input文本框内灰色提示文本效果的方法
- jquery实现触发时更新下拉列表内容的方法
- 解决jQuery使用JSONP时产生的错误
- jQuery 1.9.1源码分析系列(十三)之位置大小操作
- jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
- Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
- JavaScript使用DeviceOne开发实战(四)仿优酷视频应用