1、问题背景
jqGrid表格插件，利用自身方法获取表格的表头和表格字段；获取列名和列字段名显示在弹窗里，用复选框进行勾选
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jqGrid动态获取列和列字段</title>
<link rel="stylesheet" href="css/ui.jqgrid.css" />
<link rel="stylesheet" href="css/ui.jqgrid-bootstrap-ui.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/jquery-ui.theme.css" />
<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>
<script type="text/javascript" src="plugins/grid.setcolumns.js"></script>
<style>
th{
border: 1px solid #ABABAB;
line-height: 20px;
vertical-align: middle;
}
td{
line-height: 20px;
}
</style>
<script>
$(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<colNames.length;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<newColumnName.length;j++)
{
if(j%5==0)
{
table += "<tr>";
}
table += "<td><input type='checkbox' id='"+newColumnValue[j]+"' name='column' checked='checked'><label for='"+newColumnValue[j]+"'>"+newColumnName[j]+"</label></td>";
if((j+1)%5==0)
{
table += "</tr>";
}
}
$("#tableColumn").empty().append(table);
});
});
</script>
</head>
<body>
<div>
<table id="jqTable" class="table"></table>
</div>
<div>
<button id="column" type="button">显示</button>
</div>
<div id="dialog-column" title="设置列">
<table id="tableColumn" style="width: 100%; height: 100px;">
</table>
</div>
</body>
</html>
3、实现结果
（1）初始化
![]()
（2）单击按钮
![]()
分享到：
相关推荐
在本文中，我们将探讨如何在jqGrid中动态获取列和列字段，这对于创建自定义功能或者根据用户需求动态展示数据非常有用。 首先，问题背景是关于jqGrid表格插件的使用，我们需要获取表格的表头（即列名）和表格字段，...
5. 对于后台处理，文件"后台获取列的json对象.txt"可能包含了服务器返回的列定义或数据，这可能用于构建或更新表格。通常，你需要将前端的编辑操作同步到服务器，确保数据的一致性。 6. 文件"前台jsp页面.txt"是...
4. **调整列宽的函数**：JqGrid提供了一些内置函数，如`setGridWidth`和`autoResizeAllColumns`，用于动态调整整个表格或单个列的宽度。开发者可以通过监听窗口的`resize`事件，调用这些函数来实现自适应。 5. **...
在此之前，jqGrid只支持单列排序，而多列排序的加入使得用户可以根据多个字段进行复杂的数据筛选和排列，这对于数据分析和展示至关重要。 多列排序允许用户同时按两个或更多列对表格数据进行排序。例如，你可以首先...
jqGrid是一款功能强大的JavaScript表格插件，用于在Web页面中展示和操作数据。它支持多种功能，包括数据分页、排序、搜索、编辑等。在本教程中，我们将深入探讨如何利用jqGrid实现数据的分组显示和统计，这对于数据...
jqGrid是一款功能强大的JavaScript表格插件，用于在Web页面中展示和操作数据。它基于jQuery库，提供了丰富的功能，如数据分页、排序、搜索、编辑等，支持JSON、XML、CSV等多种数据格式，适用于创建交互式的动态数据...
- 加载数据：根据配置加载数据，可以是静态数据，也可以是从服务器动态获取的数据。 **2. jqGrid的特性** - 数据处理：支持JSON、XML、CSV等多种数据格式，能够方便地与各种后端数据接口进行交互。 - 分页：提供...
另一方面，jqGrid是一个强大的JavaScript插件，它基于jQuery，用于创建动态、交互式的网格视图，支持各种数据操作，如排序、过滤、分页和分组。 在JQuery Mobile中使用jqGrid，我们需要做以下几个步骤： 1. **引入...
通过这个示例，你可以了解到如何将本地数据与jqGrid结合，实现动态分页和排序，从而为用户提供更友好的数据浏览体验。在实际项目中，你可能需要根据具体需求调整jqGrid的配置，如添加自定义列处理函数，实现更复杂的...
在以上代码中，`name`字段表示列的名称，`index`是数据库中对应字段的名称，`width`定义了列宽，`align`控制对齐方式，`editable`则决定该列是否可编辑。 jqGrid还支持数据加载和处理。你可以通过`url`参数设置数据...
此外，jqGrid还支持高级搜索，允许用户根据多个列和条件进行复杂的查询。 在设置搜索功能时，开发者可以使用`searchGrid`方法。例如： ```javascript $("#gridId").jqGrid('searchGrid', { sopt: ['eq', 'ne', '...
5. `sortname` 和 `sortorder`：分别定义初始排序的字段和顺序。 6. `mtype`：string 类型，定义发送请求的 HTTP 方法，如 `'GET'` 或 `'POST'`。 7. `rowNum`：integer 类型，设定每页显示的行数。 8. `loadonce`：...
行内编辑允许用户直接在表格中修改单元格内容，而表单编辑则会弹出一个包含所有列的编辑表单，更适用于多字段的复杂编辑场景。 jqGrid的压缩包`jqGrid-master`可能包含了完整的源代码、示例、文档和必要的资源文件...
在这个例子中，我们将探讨如何使用jqGrid与WCF服务和JSON数据格式进行集成，以实现数据的动态加载。 首先，`addJSONData`是jqGrid中的一个重要方法，它的作用是将JSON格式的数据填充到表格中。这个方法通常在从...
jqGrid 是一个强大的 jQuery 插件，用于在网页上展示和操作数据，它提供了一种高效、可定制的方式来展示和管理表格数据。本资源“jqGrid_demo”包含了一个关于 jqGrid 使用的示例，帮助开发者了解如何在项目中集成和...
jqGrid 通过 Ajax 技术实现在客户端动态加载和操作数据，这种方式使得数据的交互更加灵活，提高了用户体验。同时，由于它是基于 jQuery 的插件，因此可以利用 jQuery 的强大功能进行定制和扩展。 #### 五、创建第一...
ASP.NET是一种广泛使用的微软开发平台，用于构建动态Web应用程序。jQGrid则是一个基于JavaScript的交互式表格插件，它允许开发者创建功能丰富的数据网格，包括排序、分页、搜索和编辑功能。在ASP.NET中集成jQGrid，...
例如，你可以通过AJAX从服务器获取数据，然后利用JQGrid的API动态填充表格，并实现各种交互功能。同时，通过监听JQGrid的事件，可以与后端进行深度集成，实现数据的增删改查。 5. 扩展功能： JQGrid还支持列拖动、...
每一行数据都可以有父节点和子节点，通过`parent`字段指定父节点ID，而`id`字段作为唯一标识。`ExpandColumn`则定义了用于展开/折叠节点的列。 其次，为了实现分页，我们需要设置` pager`参数，并配置`rowList`和`...