您好,登錄后才能下訂單哦!
本文實(shí)例講述了jQuery插件jqGrid動態(tài)獲取列和列字段的方法。分享給大家供大家參考,具體如下:
1、問題背景
jqGrid表格插件,利用自身方法獲取表格的表頭和表格字段;獲取列名和列字段名顯示在彈窗里,用復(fù)選框進(jìn)行勾選
2、實(shí)現(xiàn)源碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jqGrid動態(tài)獲取列和列字段</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" ); }, "關(guān)閉": 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="設(shè)置列"> <table id="tableColumn" > </table> </div> </body> </html>
3、實(shí)現(xiàn)結(jié)果
(1)初始化
(2)單擊按鈕
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。