首页 新闻 搜索 专区 学院

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>
复制代码
chengyuabc的主页 chengyuabc | 初学一级 | 园豆:150
提问于:2017-06-16 15:39
< >
分享
所有回答(3)
0

楼主如何解决这个问题的额

sumiyan | 园豆:202 (菜鸟二级) | 2017-06-23 14:16

没有解决,郁闷了。

支持(0) 反对(0) chengyuabc | 园豆:150 (初学一级) | 2017-06-23 18:05

看三楼回复

支持(0) 反对(0) chengyuabc | 园豆:150 (初学一级) | 2017-09-06 10:58
0

楼主解决了没~~

James_cym | 园豆:127 (初学一级) | 2017-07-14 11:16

看三楼回复

支持(0) 反对(0) chengyuabc | 园豆:150 (初学一级) | 2017-09-06 10:58
0

我也遇到了,超烦哦~~感把这两个width调试的时候手动改掉的话,就能出来正常的滚动条,可是在代码里又改不了他们,昨天弄了一天这个东西,也没有弄好~

panda多读书 | 园豆:202 (菜鸟二级) | 2017-09-06 10:15

前几天同事帮忙解决了这个问题,ace自带的ace.min.css将列表中的一个div样式ui-jqgrid-bdiv设置了overflow-x:hidden,将源css里的这个属性注释掉或者在页面用js将这个css属性去掉即可:如图,

 

我本地的代码修改如下图,源码改完后水平滚动条就出来了:

 

支持(1) 反对(0) chengyuabc | 园豆:150 (初学一级) | 2017-09-06 10:57
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册