本文实例讲述了jQuery插件jqGrid动态获取列和列字段的方法。分享给大家供大家参考，具体如下：
1、问题背景
jqGrid表格插件，利用自身方法获取表格的表头和表格字段；获取列名和列字段名显示在弹窗里，用复选框进行勾选
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jqGrid动态获取列和列字段</title>
<link rel="stylesheet" href="css/ui.jqgrid.css" rel="external nofollow" />
jqGrid是一款基于jQuery的表格插件，用于展示和操作数据，具有丰富的功能，如分页、排序、筛选等。在本文中，我们将探讨如何在jqGrid中动态获取列和列字段，这对于创建自定义功能或者根据用户需求动态展示数据非常有用。
问题背景是关于jqGrid表格插件的使用，我们需要获取表格的表头（即列名）和表格字段，以便将这些信息显示在一个弹出窗口中，用户可以通过复选框选择他们想要查看的列。这个功能对于提高用户体验，特别是处理大量数据时，让用户自由选择展示哪些列是十分实用的。
实现这个功能的关键在于理解jqGrid的API和数据结构。以下是一个简单的实现示例：
```html
<!DOCTYPE html>
<html>
<head>
<!-- 引入必要的jqGrid及相关CSS/JS -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<!-- ...其他样式和脚本引用... -->
<style>
/* 自定义样式 */
</style>
</head>
<body>
<table id="jqTable"></table>
<!-- 弹出窗口元素 -->
<div id="dialog-column" style="display:none;"></div>
<script>
$(document).ready(function(){
// 初始化jqGrid
$("#jqTable").jqGrid({
url: "data/student.json",
height: 380,
datatype: "json",
colNames: ["序号", "姓名", "年龄", "性别", "QQ号", "电话", "地址"],
colModel: [
// 列模型配置
],
// ...其他配置...
});
// 获取并显示列信息
var grid = $("#jqTable")[0].grid;
var headers = grid.headers;
var columns = [];
for (var i = 0; i < headers.length; i++) {
columns.push({
label: headers[i].el.innerHTML, // 列名
name: headers[i].cmName // 列字段名
});
}
// 创建并填充弹窗
var columnList = '<ul>';
$.each(columns, function(index, column) {
columnList += '<li><input type="checkbox" value="' + column.name + '">' + column.label + '</li>';
});
columnList += '</ul>';
$("#dialog-column").html(columnList).dialog({
title: '选择列',
width: 400,
modal: true
});
});
</script>
</body>
</html>
```
在这个例子中，我们首先初始化了jqGrid，并设置了列名和列模型。然后，我们通过`$("#jqTable")[0].grid`获取到jqGrid的内部对象，从中我们可以访问到`headers`属性，它包含了表格的所有列信息。`headers[i].el.innerHTML`返回列头的文本，而`headers[i].cmName`则是对应的列字段名。
接着，我们遍历这些信息，创建一个包含复选框的列表，用于弹出窗口。当用户选择复选框后，你可以根据选中的列字段来动态调整jqGrid的显示列，例如使用`GridUnload`卸载当前表格，然后重新加载并指定新的`colModel`。
需要注意的是，这个例子中的`grid.setcolumns.js`插件可能提供了更方便的方式来设置和管理列，但具体的使用方法没有在提供的代码中体现。通常，你可以通过调用`jqGrid`对象的方法，如`setColProp`或`hideCol`/`showCol`来动态改变列的属性或显示状态。
总结起来，jqGrid插件提供了强大的动态获取和管理列的能力，开发者可以根据实际需求灵活运用，构建更个性化的数据展示和交互体验。了解并熟练掌握jqGrid的API是提高开发效率的关键。
