如何将水平滚动条添加到jquery.bootgrid

I'm using jquery bootgrid to display some data (http://www.jquery-bootgrid.com/), could anyone help to add horizontal scroll bar to this grid?

我正在使用jquery bootgrid来显示一些数据(http://www.jquery-bootgrid.com/),任何人都可以帮助添加水平滚动条到这个网格?

I tried to put it into div with overflow-x style, but it scrolls navigation and paging together.

我尝试将它放入带有overflow-x样式的div中,但它会同时滚动导航和分页。

If it not possible, could you recommend free grids for ASP .NET MVC with has this feature?

如果不可能,你能推荐ASP .NET MVC的免费网格有这个功能吗?

2 个解决方案

#1

Try to set the CSS class bootgrid-table with these :

尝试使用以下设置CSS类bootgrid-table:

display: block;
width: 50px;
overflow-x: scroll;

I set the width to 50px for a test, but it maybe could be left to what it is, 100%. Though, due to data collapsing with "...", not sure it would work appart removing this too.

我将宽度设置为50px进行测试,但也许可以保留为100%。但是,由于数据因“......”而崩溃,不确定它是否可以解决这个问题。

#2

As you are already using Bootstrap, you can add the table-responsive class to the outer div of the table element

由于您已经在使用Bootstrap,因此可以将表响应类添加到表元素的外部div中

<div class="table-responsive">
   <table id="myTable" class="table table-bordered table-condensed table-hover">


   </table>

</div>


<script type="text/javascript">

$(function(){
  var dt = $('#myTable').bootgrid({
          selection: true,
          rowSelect: true,
          converters: {},
        });
});

</script>

Fiddle: https://jsfiddle.net/u5w4w24s/1/

#1