本文主要介绍了jquery插件jqgrid动态获取列和列字段的方法,结合实例形式分析了表格插件jqgrid针对表格字段属性相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。
1、问题背景
jqGrid表格插件，利用自身方法获取表格的表头和表格字段；获取列名和列字段名显示在弹窗里，用复选框进行勾选
2、实现源码
nbsp;html>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<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 += ""; } table += "
登录后复制
3、实现结果
（1）初始化
（2）单击按钮
相关推荐：
jQuery实现与GridView类似的功能实例
JS快速生成各种网格布局工具Grid介绍
实例详解jqgrid实现简单的单行编辑功能
以上就是jQuery插件Grid动态获取列和列字段的方法实例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789361.html
