通过点击jqgrid表格弹出需要的表格数据
首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。
特点如下:
完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。
自定义的工具列
预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。
完整的分页功能
按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。
预设的actionformatter，可以快速而直觉地对每笔资料做运算。
支持多种数据格式。比如json、xml、array等。
下面通过代码实例给大家介绍通过点击jqgrid表格弹出需要的表格数据，具体内容如下所示：
首先，我们先定义一个函数，然后在JQuery里面直接引用就可以了，
functionGetJqGridRowValue(jgrid,code){
varKeyValue="";
varselectedRowIds=$(jgrid).jqGrid("getGridParam","selarrrow");
if(selectedRowIds!=""){
varlen=selectedRowIds.length;
for(vari=0;i<len;i++){
varrowData=$(jgrid).jqGrid('getRowData',selectedRowIds[i]);
KeyValue+=rowData[code]+",";
}
KeyValue=KeyValue.substr(0,KeyValue.length-1);
}else{
varrowData=$(jgrid).jqGrid('getRowData',$(jgrid).jqGrid('getGridParam','selrow'));
KeyValue=rowData[code];
}
returnKeyValue;
}//自定义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){
vartd_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");