jqGrid动态获取列和列字段

最新推荐文章于 2023-02-21 11:14:35 发布
最新推荐文章于 2023-02-21 11:14:35 发布
阅读量753 收藏
点赞数
文章标签： javascript json ui ViewUI

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）单击按钮


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jgrid实现列的动态
07-24
jgrid中实现显示的列的动态显示值，列可配置生成
jqgrid 动态表头的实现，以及动态改变表头顺序的实现
ichanghu的博客
10-15 2131
一、实现动态加载表头（根据后台传过来的数据显示表头） 通过ajax请求后台，得到表头数组。 $('#gridTable').jqGrid({ colNames: colNames, //通过ajax请求后台获得的表头数组 colModel: colModels,//根据后台获得的表头数组拼装的表头格式得 }); 二、强制刷新表头及数据 $.ajax({})//之后 $("#gbox_gridTable").remove();//强制清除grid容器的html,这个标签在渲染表格
WPF中DataGrid动态生成列及自定义表头结构
羽木落凡的博客
08-11 8786
DataGrid动态生成列并实现数据绑定，以及如何实现复杂的表头和列内容
jqGrid动态生成列
dandanxing的博客
02-27 1283
工作中,有点击动态增加jgGrid列的需求,折腾了很久, 可以先把表格数据清空,再添加新的数据. 这里主要就是jgGrid数据清空时,出现的问题: $("#tab").jqGrid('clearGridData'); //清空表格 $("#tab").jqGrid('setGridParam',{ // 重新加载数据 datatype:'local', data
jQuery插件jqGrid动态获取列和列字段的方法
12-03
本文实例讲述了jQuery插件jqGrid动态获取列和列字段的方法。分享给大家供大家参考，具体如下： 1、问题背景 jqGrid表格插件，利用自身方法获取表格的表头和表格字段；获取列名和列字段名显示在弹窗里，用复选框进行...
jqgrid动态创建列与列合计事例
11-28
jqgrid初始化时动态创建列并对这些列数值进行合计 生成动态列的数据源可以通过ajax获取或者前端自定义数据集
jqgrid 修改一列 ，
09-13
jqgrid 修改一列 。修改所有的行。通过vue.js 与jqgrid 的应用，供大家参考学习。多多提意见 。相互学习交换意见
jqgrid行编辑+动态为其他列赋值
04-20
该方式是在jqgrid的列基础上进行编辑，为列添加保存事件，文本域和输入框采用blur失去焦点的方式进行保存，该方法含有点击为其他列赋值的功能。参考api列子并结合自己公司功能需求。
fastadmin 动态column 动态表头 根据搜索条件改变的表格列数动态column表格 动态表头
weixin_45143733的博客
02-21 2365
fastadmin 动态column 动态表头 根据搜索条件改变的表格列数动态column表格 动态表头
WPF Grid + DataGrid多表头 动态列实现
u014311306的博客
12-19 2187
使用了Grid + DataGrid 显示 Grid部分（表头部分）用了GridSplitter作为列的区分，可以调节列宽，（未实现自动排序） DataGrid部分，隐藏DataGrid的Header部分 界面部分： <Grid> <Grid.RowDefinitions> <RowDefinition Height="6
重画具有动态生成列的datagrid表头
Yellow198267的专栏
05-16 913
private void myGrid_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)  {   //处理为0或0.00的项，是其为空（null）/////////////////////////////////////////////////   for(int i=0;i   {  
jquery easyui datagrid 动态生成表头 + 嵌套对象属性展示
iteye_20240的博客
03-16 264
代码功能： 1、datagrid 的表头由后台生成，可以配置在数据库 2、datagrid 的列绑定数据 支撑嵌套对象 Js代码 $(function(){ varcolumns=newArray(); varcols=newArray(); varcolData=newObject(); $.post("url","...
js端实现jqgrid列动态生成
buptsyqx的专栏
07-10 5625
一般情况下，前端表的格式都是固定的；但是有些业务要求表格的列能够根据不同条件动态变化。对于jqgrid，我曾采用过两种方式满足该需求，第一种是在后端拼接好 colModel、 colNames、datastr的值返回给前端，在前端对jqgrid的相应参数进行赋值；第二种是在前端根据不同参数获得对应的colModel、url的值赋给jqgrid, jqgrid再根据url去请求数据。相比较而言，
EXTJS2--grid通过后台返回数据动态生成表头和列表
小蜗牛的博客
06-06 760
1.需要引入Ext.ux.data.PagingMemoryProxy.js Ext.namespace("Ext.ux"); Ext.namespace("Ext.ux.data"); /* Fix for Opera, which does not seem to include the map function on Array's */ if(!Array.prototype.map){...
easyExcel动态表头、动态行数生成、实时生成头写入、把list里的值分别写到1行的多列上
fanzhi16的博客
03-02 7537
public class TestUtil { /** * 动态头，实时生成头写入 * * 思路是这样子的，先创建List头格式的sheet仅仅写入头,然后通过table 不写入头的方式 去写入数据 * * * 1. 创建excel对应的实体对象 参照{@link } * * 2. 然后写入table即可 */ public static void main(String[] args) throws FileNotFoundException { String fileName = "C:/Use
导出jqgrid表格，csv格式。
db_who_care的博客
10-02 594
function jqgrid2csv(dom,fileName){ var options={ csvEnclosure:"\"", csvSeparator:",", type : "text/csv;charset=utf-8" } function fake_click(obj) { var ev = document.createEvent(...
jqgrid columns
LeehomeYU的专栏
05-18 612
$(function () {     //替换保障类别名称     $("#lbl_sBZJLQZH").text(GetBzName($("#hidType").val()));     //排序字段     list_sortname = " "; // 'AreaInfo';     //排序方式     list_softorder = " "; // 'asc';
jqgrid 动态设置筛选列 集合数据
最新发布
06-03
好的，以下是基于 jqGrid 4.15.5 版本的动态设置筛选列集合数据的示例代码及注释： ```javascript // 定义 jqGrid 表格 $("#grid").jqGrid({ url: "data.json", // 数据源 URL datatype: "json", // 数据类型 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值