Question

如何给easyui datagrid加滚动条

Answer 1

1、打开visual studio创建一个空的mvc项目EasyUIDataGrid。

2、在项目中添加HomeController和Index页面。

3、在项目中添加一个Content文件夹，添加EasyUI的css、js、jquery三个文件，并将三个文件引入到Index页面，建议将css放在js前面。

4、在项目中添加一个Images文件夹，并添加三张图片进来。

5、同时添加一个方法GetData，模拟从数据库获取到的数据列表，按照EasyUI的DataGrid需要的格式返回{"total":3, rows:[{}, {}]}。

6、最后调试模式下运行就完成了 。

Answer 2

给easyui datagrid加滚动条的具体步骤如下：

1、如果需要添加竖向滚动条输入：    

var contents = $('#importform div.datagrid-body');     

contents.scroll(function () {         

contents.not(this).prop({ scrollLeft: this.scrollLeft, scrollTop: this.scrollTop });     

});

2、然后查看一下效果，如下图：

3、如果需要添加横向滚动条输入：    

var contents2 = $('#importform div.datagrid-view2 div.datagrid-header');    

contents2.scroll(function () {

$('#importform div.datagrid-view2 div.datagrid-body').prop({ scrollLeft: this.scrollLeft, scrollTop: this.scrollTop }); 

contents2.not(this).prop({ scrollLeft: this.scrollLeft, scrollTop: this.scrollTop }); 

});

4、然后查看一下效果，如下图：

Answer 3

水平滚动条

• datagrid调好合适的宽度；
  

• 给datagrid的所有Column加上固定宽度；
  

• datagrid的fitColumns属性不要设置，或者设为false；
  

• 这样datagrid就会自动出现水平滚动条了。

垂直滚动条

• datagrid调好合适的高度，自动出现垂直滚动条。