ace admin 的jqgrid为什么显示不出横向滚动条？
0
悬赏园豆：10
[已关闭问题]
关闭于 2017-06-21 21:05
项目里后台管理系统用了ace admin模板，但是它自带的jqgrid貌似设置不了水平方向的滚动条，有朋友遇到过类似问题吗？
情况如图，
代码贴出：
1 <div class="col-xs-12" style="margin-top: 10px;overflow:auto;" id="gridDiv"> 2 <table id="jqGridTable"></table> 3 <div id="jqGridPager"></div> 4 </div>
1 <script type="text/javascript"> 2 var grid_selector = "#jqGridTable"; 3 var pager_selector = "#jqGridPager"; 4 jQuery(function($) { 5 //resize to fit page size 6 var parent_column = $(grid_selector).closest('[class*="col-"]'); 7 $(window).on('resize.jqGrid', function () { 8 setTimeout(function(){ 9 $(grid_selector).setGridHeight(getGridHeight()); //重新设置表格高度 10 $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() ); //重新设置表格宽度 11 },100); 12 }); 13 14 jQuery(grid_selector).jqGrid({ 15 //caption: "企业会员列表", 16 url:' ${rc.contextPath}/accountOfEnterpriseListData.do', 17 height: getGridHeight()/2,//150, 18 //autowidth: false, 19 shrinkToFit:false, 20 autoScroll: true, 21 rownumbers: true, 22 sortname:'', //默认排序字段 23 sortorder:'asc', //默认排序方式 24 colModel:[ 25 { label:'余额', name:'editCe',width:80,sortable:false, 26 formatter:function(value, options, rowObject){ 27 var vhtm = ""; 28 vhtm = vhtm+"<a href='"+contextPath+"accountListDetail.do?menuId=114&accountCode="+rowObject.accountCode+"&accountType="+rowObject.accountType+"'>明细</a>"; 29 return vhtm; 30 }}, 31 { label:'账户属性', name:'editCe',width:70,sortable:false, 32 formatter:function(value, options, rowObject){ 33 var vhtm = ""; 34 vhtm = vhtm+"<a href='"+contextPath+"merchantAttrEdit.do?menuId=114&accountCode="+rowObject.accountCode+"&memberCode="+rowObject.memberCode+"&type=view'>查看</a>"; 35 vhtm = vhtm+" <a href='"+contextPath+"merchantAttrEdit.do?menuId=114&accountCode="+rowObject.accountCode+"&memberCode="+rowObject.memberCode+"&type=edit'>配置</a>"; 36 return vhtm; 37 }}, 38 {index:'merchantCode',name:'merchantCode',label:'商户号',width:140,sortable:true}, 39 {index:'memberCode',name:'memberCode',label:'会员号',width:90,sortable:true}, 40 {index:'loginName',name:'loginName',label:'登录名',width:130,sortable:true}, 41 {index:'merchantName',name:'merchantName',label:'商户名称',width:60}, 42 {index:'accountCode',name:'accountCode',label:'账户号',width:120,sortable:true}, 43 {index:'accountType',name:'accountType',label:'账户类型',width:80, 44 formatter:function(value, options, rowObject){ 45 if(value=='101'){ 46 return "人民币基本账户"; 47 }else if(value=='102'){ 48 return "美元基本账户"; 49 }else if(value=='103'){ 50 return "欧元基本账户"; 51 }else if(value=='104'){ 52 return "港币基本账户"; 53 }else if(value=='201'){ 54 return "人民币授信账户"; 55 }else if(value=='202'){ 56 return "美元授信账户"; 57 }else if(value=='203'){ 58 return "欧元授信账户"; 59 }else if(value=='204'){ 60 return "港币授信账户"; 61 }else if(value=='301'){ 62 return "人民币资金池账户"; 63 }else if(value=='302'){ 64 return "美元资金池账户"; 65 }else if(value=='303'){ 66 return "欧元资金池账户"; 67 }else if(value=='304'){ 68 return "港币资金池账户"; 69 } 70 } 71 }, 72 {index:'creditBalance',name:'creditBalance',label:'总收入',width:60,sortable:true}, 73 {index:'debitBalance',name:'debitBalance',label:'总支出',width:60,sortable:true}, 74 {index:'balance',name:'balance',label:'可用余额',width:60,sortable:true}, 75 {index:'frozenBalance',name:'frozenBalance',label:'冻结余额',width:60,sortable:true}, 76 {index:'creditLimit',name:'creditLimit',label:'授信额度',width:60,sortable:true}, 77 {index:'accountStatus',name:'accountStatus',label:'账户状态',width:60, 78 formatter:function(value, options, rowObject){ 79 if(value=='0'){ 80 return "无效"; 81 }else if(value=='1'){ 82 return "有效"; 83 } 84 } 85 } 86 ], 87 88 pager : pager_selector, //分页div 89 loadComplete : function(x) { 90 91 var table = this; 92 setTimeout(function(){ 93 updatePagerIcons(table); 94 enableTooltips(table); 95 }, 0); 96 }, 97 gridComplete:function(){ 98 //调整表格宽度 99 $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() ); 100 var w2 = parseInt($('.ui-jqgrid-labels>th:eq(2)').css('width'))-3; 101 $('.ui-jqgrid-lables>th:eq(2)').css('width',w2); 102 $('#grid-table tr').find("td:eq(2)").each(function(){ 103 $(this).css('width',w2); 104 }) 105 }, 106 beforeRequest:function(){//向服务器端发起请求之前触发此事件 107 jQuery(grid_selector).jqGrid("setGridParam", { //设置查询参数 108 postData:{ 109 merchantCode:$("#merchantCode").val(), 110 merchantName:$("#merchantName").val(), 111 memberCode:$("#memberCode").val(), 112 merchantStatus:$("#merchantStatus").val(), 113 merchantCheckStatus:$("#merchantCheckStatus").val(), 114 accountStatus:$("#accountStatus").val(), 115 accountType:$("#accountType").val(), 116 effective:$("#effective").val(), 117 accountCode:$("#accountCode").val() 118 } 119 }); 120 } 121 }); 122 $(window).triggerHandler('resize.jqGrid'); 123 124 //设置分页图标 125 jQuery(grid_selector).jqGrid('navGrid',pager_selector, 126 { //navbar options 127 edit: false,editicon : 'ace-icon fa fa-pencil blue', 128 add: false,addicon : 'ace-icon fa fa-plus-circle purple', 129 del: false,delicon : 'ace-icon fa fa-trash-o red', 130 search: false,searchicon : 'ace-icon fa fa-search orange', 131 refresh: true,refreshicon : 'ace-icon fa fa-refresh green', 132 view: false,viewicon : 'ace-icon fa fa-search-plus grey', 133 } 134 ); 135 136 });141 </script>
所有回答(3)
0
楼主如何解决这个问题的额
没有解决，郁闷了。
看三楼回复
0
楼主解决了没~~
看三楼回复
0
我也遇到了，超烦哦~~感把这两个width调试的时候手动改掉的话，就能出来正常的滚动条，可是在代码里又改不了他们，昨天弄了一天这个东西，也没有弄好~
前几天同事帮忙解决了这个问题，ace自带的ace.min.css将列表中的一个div样式ui-jqgrid-bdiv设置了overflow-x:hidden，将源css里的这个属性注释掉或者在页面用js将这个css属性去掉即可：如图，
我本地的代码修改如下图，源码改完后水平滚动条就出来了：
