jqGrid支持用户自定义显示哪些列。官方实际上有两种实现方式。
一、columnChooser方法
这是官方现在推荐的实现方法。
demo >>New in version 3.6>>Column Chooser
具体怎么用，wiki里写的很清楚。http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods
注意：实现demo的效果需要引入JQuery UI。
具体需要引入（我引得jqGrid，因为这是支持IE6的最后一个版本）：
1 <link rel="stylesheet" type="text/css" media="screen" href="../css/jquery_ui/jquery-ui.css" /> 2 <link rel="stylesheet" type="text/css" media="screen" href="../js/jqGrid/src/css/ui.multiselect.css" /> 3 <link rel="stylesheet" type="text/css" media="screen" href="../js/jqGrid/src/css/ui.jqgrid.css" /> 4 5 <script src="../js/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 6 <script src="../js/jqGrid/i18n/grid.locale-en.js" type="text/javascript"></script> 7 <script src="../js/jquery/ui/jquery.ui.core.js" type="text/javascript"></script> 8 <script src="../js/jquery/ui/jquery-ui.min.js" type="text/javascript"></script> 9 <script src="../js/jquery/ui/jquery.ui.widget.js" type="text/javascript"></script> 10 <script src="../js/jquery/ui/jquery.ui.mouse.js" type="text/javascript"></script> 11 <script src="../js/jquery/ui/jquery.ui.draggable.js" type="text/javascript"></script> 12 <script src="../js/jquery/ui/jquery.ui.sortable.js" type="text/javascript"></script> 13 <script src="../js/jqGrid/src/ui.multiselect.js" type="text/javascript"></script> 14 <script src="../js/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
二、setColumns方法
这种方式官方已经不再推荐，4.0以上版本也不再自带（需引入插件）
但由于我开发的系统早期引入了easyUI控件，与columnChooser方式依赖的JQuery UI会冲突，so。。。
（冲突时由于jquery-ui.min.js和jquery.easyui.min.js有相同的方法）
基本的实现看官方WIKI就够了。
需要引入：
<script src="/js/jqGrid/src/grid.setcolumns.js" type="text/javascript"></script>
实现效果如图
Submit和Cancel的国际化可以在i18n/grid.locale-en.js中找到
1 col : { 2 caption: "选择列", 3 bSubmit: "确定", 4 bCancel: "取消" 5 },
| 选项 | 解释 | 默认值 |
| saveicon | 该选项时一个数组元素，其默认值为[true,”left”,”ui-icon-disk”]，用于设置确认按钮。 第一个元素用于是否展示图标，第二个元素用于指定图标居左或局右显示，第三个元素用于指定图标（必须是UI theme roller） | [true,”left”,”ui-icon-disk”] |
如果看按钮旁的小图标不爽，把saveicon和closeicon设为[false]就可以去掉。
“必须是UI theme roller”是指
原生的checkbox功能太弱，竟然没有全选的功能。被测试人员逼了两天，终于把这个小功能憋出来了。
需要改插件的源码(grid.setcolumns.js)，如下
1 ;(function($){ 2 /** 3 * jqGrid extension for manipulating columns properties 4 * Piotr Roznicki roznicki@o2.pl 5 * http://www.roznicki.prv.pl 6 * Dual licensed under the MIT and GPL licenses: 7 * http://www.opensource.org/licenses/mit-license.php 8 * http://www.gnu.org/licenses/gpl-2.0.html 9 **/ 10 $.jgrid.extend({ 11 setColumns : function(p) { 12 p = $.extend({ 13 top : 0, 14 left: 0, 15 width: 200, 16 height: 'auto', 17 dataheight: 'auto', 18 modal: false, 19 drag: true, 20 beforeShowForm: null, 21 afterShowForm: null, 22 afterSubmitForm: null, 23 closeOnEscape : true, 24 ShrinkToFit : false, 25 jqModal : false, 26 saveicon: [true,"left","ui-icon-disk"], 27 closeicon: [true,"left","ui-icon-close"], 28 onClose : null, 29 colnameview : true, 30 closeAfterSubmit : true, 31 updateAfterCheck : false, 32 recreateForm : false 33 }, $.jgrid.col, p ||{}); 34 return this.each(function(){ 35 var $t = this; 36 if (!$t.grid ) { return; } 37 var onBeforeShow = typeof p.beforeShowForm === 'function' ? true: false; 38 var onAfterShow = typeof p.afterShowForm === 'function' ? true: false; 39 var onAfterSubmit = typeof p.afterSubmitForm === 'function' ? true: false; 40 var gID = $t.p.id, 41 dtbl = "ColTbl_"+gID, 42 IDs = {themodal:'colmod'+gID,modalhead:'colhd'+gID,modalcontent:'colcnt'+gID, scrollelm: dtbl}; 43 if(p.recreateForm===true && $("#"+IDs.themodal).html() != null) { 44 $("#"+IDs.themodal).remove(); 45 } 46 if ( $("#"+IDs.themodal).html() != null ) { 47 if(onBeforeShow) { p.beforeShowForm($("#"+dtbl)); } 48 $.jgrid.viewModal("#"+IDs.themodal,{gbox:"#gbox_"+gID,jqm:p.jqModal, jqM:false, modal:p.modal}); 49 if(onAfterShow) { p.afterShowForm($("#"+dtbl)); } 50 } else { 51 var dh = isNaN(p.dataheight) ? p.dataheight : p.dataheight+"px"; 52 var formdata = "<div id='"+dtbl+"' class='formdata' style='width:100%;overflow:auto;position:relative;height:"+dh+";'>"; 53 formdata += "<table class='ColTable' cellspacing='1' cellpading='2' border='0'><tbody>"; 54 for(i=0;i<this.p.colNames.length;i++){ 55 if(!$t.p.colModel[i].hidedlg) { // added from T. Tomov 56 formdata += "<tr><td style='white-space: pre;'><input type='checkbox' style='margin-right:5px;' id='col_" + this.p.colModel[i].name + "' class='cbox' value='T' " + 57 ((this.p.colModel[i].hidden===false)?"checked":"") + "/>" + "<label for='col_" + this.p.colModel[i].name + "'>" + this.p.colNames[i] + ((p.colnameview) ? " (" + this.p.colModel[i].name + ")" : "" )+ "</label></td></tr>"; 58 } 59 } 60 formdata += "</tbody></table></div>" 61 var bS = !p.updateAfterCheck ? "<a href='javascript:void(0)' id='dData' class='fm-button ui-state-default ui-corner-all'>"+p.bSubmit+"</a>" : "", 62 bC ="<a href='javascript:void(0)' id='eData' class='fm-button ui-state-default ui-corner-all'>"+p.bCancel+"</a>"; 63 bSel ="<a href='javascript:void(0)' id='selData' class='fm-button ui-state-default ui-corner-all'>"+p.bSelAll+"</a>"; 64 bCan ="<a href='javascript:void(0)' id='cancelData' class='fm-button ui-state-default ui-corner-all'>"+p.bCanAll+"</a>"; 65 formdata += "<table border='0' class='EditTable' id='"+dtbl+"_2'><tbody><tr style='display:block;height:3px;'><td></td></tr><tr><td class='DataTD ui-widget-content'></td></tr><tr><td class='ColButton EditButton'>"+bSel+" "+bCan+" "+bS+" "+bC+"</td></tr></tbody></table>"; 66 p.gbox = "#gbox_"+gID; 67 $.jgrid.createModal(IDs,formdata,p,"#gview_"+$t.p.id,$("#gview_"+$t.p.id)[0]); 68 if(p.saveicon[0]==true) { 69 $("#dData","#"+dtbl+"_2").addClass(p.saveicon[1] == "right" ? 'fm-button-icon-right' : 'fm-button-icon-left') 70 .append("<span class='ui-icon "+p.saveicon[2]+"'></span>"); 71 } 72 if(p.closeicon[0]==true) { 73 $("#eData","#"+dtbl+"_2").addClass(p.closeicon[1] == "right" ? 'fm-button-icon-right' : 'fm-button-icon-left') 74 .append("<span class='ui-icon "+p.closeicon[2]+"'></span>"); 75 } 76 if(!p.updateAfterCheck) { 77 $("#dData","#"+dtbl+"_2").click(function(e){ 78 for(i=0;i<$t.p.colModel.length;i++){ 79 if(!$t.p.colModel[i].hidedlg) { // added from T. Tomov 80 var nm = $t.p.colModel[i].name.replace(/\./g, "\\."); 81 if($("#col_" + nm,"#"+dtbl).attr("checked")) { 82 $($t).jqGrid("showCol",$t.p.colModel[i].name); 83 $("#col_" + nm,"#"+dtbl).attr("defaultChecked",true); // Added from T. Tomov IE BUG 84 } else { 85 $($t).jqGrid("hideCol",$t.p.colModel[i].name); 86 $("#col_" + nm,"#"+dtbl).attr("defaultChecked",""); // Added from T. Tomov IE BUG 87 } 88 } 89 } 90 if(p.ShrinkToFit===true) { 91 $($t).jqGrid("setGridWidth",$t.grid.width-0.001,true); 92 } 93 if(p.closeAfterSubmit) $.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:p.jqModal, onClose: p.onClose}); 94 if (onAfterSubmit) { p.afterSubmitForm($("#"+dtbl)); } 95 return false; 96 }); 97 } else { 98 $(":input","#"+dtbl).click(function(e){ 99 var cn = this.id.substr(4); 100 if(cn){ 101 if(this.checked) { 102 $($t).jqGrid("showCol",cn); 103 } else { 104 $($t).jqGrid("hideCol",cn); 105 } 106 if(p.ShrinkToFit===true) { 107 $($t).jqGrid("setGridWidth",$t.grid.width-0.001,true); 108 } 109 } 110 return this; 111 }); 112 } 113 $("#eData", "#"+dtbl+"_2").click(function(e){ 114 $.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:p.jqModal, onClose: p.onClose}); 115 return false; 116 }); 117 $("#selData").click(function(e){ 118 $("#"+IDs.modalcontent).find(":checkbox").attr("checked","checked"); 119 return false; 120 }); 121 $("#cancelData").click(function(e){ 122 $("#"+IDs.modalcontent).find(":checkbox").removeAttr("checked"); 123 return false; 124 }); 125 $("#dData, #eData, #selData, #cancelData","#"+dtbl+"_2").hover( 126 function(){$(this).addClass('ui-state-hover');}, 127 function(){$(this).removeClass('ui-state-hover');} 128 ); 129 if(onBeforeShow) { p.beforeShowForm($("#"+dtbl)); } 130 $.jgrid.viewModal("#"+IDs.themodal,{gbox:"#gbox_"+gID,jqm:p.jqModal, jqM: true, modal:p.modal}); 131 if(onAfterShow) { p.afterShowForm($("#"+dtbl)); } 132 } 133 }); 134 } 135 }); 136 })(jQuery);
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
