jqgrid获取字段_jQuery插件jqGrid动态获取列和列字段的方法

本文实例讲述了jQuery插件jqGrid动态获取列和列字段的方法。分享给大家供大家参考，具体如下：

1、问题背景

jqGrid表格插件，利用自身方法获取表格的表头和表格字段；获取列名和列字段名显示在弹窗里，用复选框进行勾选

2、实现源码

jqGrid动态获取列和列字段

th{

border: 1px solid #ABABAB;

line-height: 20px;

vertical-align: middle;

}

td{

line-height: 20px;

}

$(document).ready(function(){

$("#jqTable").jqGrid({

url:"data/student.json",

height:380,

datatype:"json",

colNames:["序号","姓名","年龄","性别","QQ号","电话","地址"],

colModel:[{

name : 'id',

index : 'id',

label : '序号',

width : 60,

align:'center'

},{

name : 'name',

index : 'name',

label : '姓名',

width : 120,

align:'center'

},{

name : 'age',

index : 'age',

label : '年龄',

width : 120,

align:'center'

},{

name : 'sex',

index : 'sex',

label : '性别',

width : 120,

edittype : "select",

formatter : 'select',

editoptions : {

value :'0:男;1:女;'

},

align:'center'

},{

name : 'qq',

index : 'qq',

label : 'QQ号',

width : 120,

align:'center'

},{

name : 'phone',

index : 'phone',

label : '电话',

width : 120,

align:'center'

},{

name : 'address',

index : 'address',

label : '地址',

width : 200,

align:'center'

}],

sortname : "id",

sortorder : "desc",

viewrecords : true,

rownumbers:true,

autowidth:true,

jsonReader : {

repeatitems : false

}

});

var dialog = $("#dialog-column").dialog({

autoOpen :false,

modal : true,

resizable : true,

height: "auto",

width: 400,

align:'center',

buttons: {

"确定": function() {

$(this).dialog( "close" );

},

"关闭": function() {

$(this).dialog( "close" );

}

}

});

$("#column").button().on("click", function() {

dialog.dialog("open");

//获取列名

var colNames=$("#jqTable").jqGrid('getGridParam','colNames');

//获取列字段

var colModel=$("#jqTable").jqGrid('getGridParam','colModel');

var table = "";

var newColumnName = [];

var newColumnValue = [];

for (var i=0;i

{

var columnHidden = colModel[i].hidden;

var columnName = colModel[i].name;

if(columnHidden==false && columnName != "rn")

{

newColumnName.push(colNames[i]);

newColumnValue.push(columnName);

}

console.info(columnName);

}

for(var j=0;j

{

if(j%5==0)

{

table += "

";

}

table += "

"+newColumnName[j]+"";

if((j+1)%5==0)

{

table += "

";

}

}

$("#tableColumn").empty().append(table);

});

});

显示

3、实现结果

(1)初始化

(2)单击按钮

希望本文所述对大家jQuery程序设计有所帮助。