jQuery插件jqGrid动态获取列和列字段的方法
程序员文章站
2022-06-08 22:18:46
本文实例讲述了jquery插件jqgrid动态获取列和列字段的方法。分享给大家供大家参考,具体如下:
1、问题背景
jqgrid表格插件,利用自身方法获取表格的表头和表...
本文实例讲述了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" /> <link rel="stylesheet" href="css/ui.jqgrid-bootstrap-ui.css" rel="external nofollow" /> <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" /> <link rel="stylesheet" href="css/bootstrap-theme.css" rel="external nofollow" /> <link rel="stylesheet" href="css/jquery-ui.css" rel="external nofollow" /> <link rel="stylesheet" href="css/jquery-ui.theme.css" rel="external nofollow" /> <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)单击按钮
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery常用插件及用法总结》、《jquery中ajax用法总结》、《jquery表格(table)操作技巧汇总》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。