jquery Easyui 大数据的处理-利用scrollview进行数据展示。

本文链接：https://blog.youkuaiyun.com/junbaoba/article/details/101271296

本文介绍了一种替代传统分页的方法，通过使用jQuery EasyUI的Datagrid-Scrollview组件，实现大数据量的滚动加载，避免了分页带来的用户体验问题。文章详细展示了如何在HTML页面中引入必要的类库，配置Datagrid并设置滚动视图属性，以及后端数据响应的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：当初不想用分页查询数据，然后就找有那些可以代替传统的Pagination 分页的方法，然后发现了scrollview 这个控件方法，发现挺好用的就分享一下，我的案例。

首先我们在html页面引入jQueryeasyui的类库和datagrid-scrollview.js。

	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-scrollview.js"></script>

这些都是官方路径下的js，你也可以使用本地的js的版本。

然后我们就在html文件中，放一个<div>用来储存datagrid的数据。也可以是table，采用那个看你个人的喜好。

```
  <table id="datagridOne"></table>
```
然后我们对datagridone进行初始化就可以了，为datagrid增加view属性。

    $("#datagridOne").datagrid({
        url: "/RawMaterial/GetDataGrid?random=" + Math.random(),
        idField: "Raw_Material_ID",
        loadMsg: "正在加载数据，请稍后....",
        rownumbers: true,//行号
        singleSelect: false,//true单选，false多选
        fit:false,
        width: "100%",//宽度
        height:"500px",//高度，这个一定要，当初我的div没有设高度他就出不来数据
        view: scrollview,//滚动展示页面
        pageSize: 50,//每次请求的条数
        autoRowHeight: false,//是否自动高度
        //工具栏，这个你可以用div包起来，然后使用它。
        toolbar: ['-', {
            text: '新增',
            iconCls: 'icon-add',
            handler: Add
        }, '-', {
            text: '删除',
            iconCls: 'icon-remove',
            handler: Delete
        }, '-', {
            text: '启用',
            iconCls: 'icon-ok',
            handler: ChangeEnable
        }, '-', {
            text: '禁用',
            iconCls: 'icon-no',
            handler: ChangeDisEnable
        }, '-', {
            text: '修改',
            iconCls: 'icon-edit',
            handler: Edit
        }],
        columns: [[
           { field: "Raw_Material_ID", align: "center", width: "5%", checkbox: true }
        ]],

        //加载成功
        onLoadSuccess: function (data, state, d) {
            return false;
        },
        //加载失败
        onLoadError: function (error, message, d) {
            return false;
        },
        //单击行
        onClickRow: function (rowIndex, rowData) {
            $(".datagrid-row-selected").removeClass("datagrid-row-selected");
        },
        //双击事件
        onDblClickRow: function (rowIndex, rowData) {
            $('#datagridOne').datagrid('selectRow', rowIndex);
            if ($("a[name='a_edit']").eq(rowIndex).is(":hidden")) return false;
            else {
                $("#PartClassAddIfram").attr("src", "/RawMaterial/MaterialEdit?id=" + rowData.Raw_Material_ID + "&random=" + Math.random());
                $("#addPartClassWindow").window("open");
                return false;
            }
        }
    });

这个是我请求数据是发送给后端的数据。

这个是后端响应回来的数据，返回的数据中必须带有total，要不然就不会滚动显示数据了。后端我用的是c#写的。就是普通的分页方法。基础的方法就不介绍了。

            IEwinBasRawMaterial RawMaterial = new EwinBasRawMaterialRepository();
            List<List_Mes_Bas_Raw_Material> list = RawMaterial.GetListByPageIndex("表",
                RawModel.page, RawModel.rows, "v.*", RawModel.sort ?? "LastUpdateDate", RawModel.order ?? "desc", strWhere.ToString());
            DataGridJson<表> dataGrid = new DataGridJson<表>();
            dataGrid.total = list.Count > 0 ? list[0].RecordCount : 0;
            dataGrid.rows = list;
            return Json(dataGrid);
    //DataGridJson方法。
    public class DataGridJson<Tentity> where Tentity : class, new()
    {
        public DataGridJson()
        {
            rows = new List<Tentity>();
        }
        public int total { get; set; }
        public List<Tentity> rows { get; set; }
    }

我们的介绍就到这里了，谢谢大家的观看！！！