Grid组件加载更多

一、需求

最近，有个新的需求，用Ext Grid组件加载数据之后，点击“加载更多”按钮，会在Grid表格后面追加新的内容。要求：

只返回后面追加的内容，不会返回原先的内容
设置Grid表格的滚动条在最下面
设置加载更多的文字+总条数

二、加载更多

参考网上一大堆的代码，无非是两种：

1、动态取值后，前台另添加一条记录~~演示代码如下：

因为store提供了一个add/insert的方法，这个方法的作用是：追加数据到store后面，insert可以在指定的位置追加，而add而是追加到最后面。

function loadMore(){
    var record = Ext.data.Record.create([
        {name:'code',type:'string',mapping:'0'},
        {name:'desc',type:'string',mapping:'1'}
    ]);
    var newRecord = new record({code:'全部',desc:'全部'});
    var DataGrid = Ext.getCmp('gridPanel');
    // store添加最新内容
    DataGrid.getStore().add(
        newRecord
    );
}

尝试改造成，下面的结构：

function loadMore(){

    var cc = [{OpenId:123456,RoleName:'小郑',age:23},{OpenId:654321,RoleName:'小欣',age:21}]

    var DataGrid = Ext.getCmp('gridPanel');

    // store添加最新内容

    DataGrid.getStore().add(

        cc

    );

}

然后也可以追加。

2、动态取值后 - 后台另添加一条记录~~演示代码如下：

这个不贴代码，说白了：就是无效率查找。举个例子：原本查找出100条数据，点击 “加载更多”按钮，想要加载多50条，直接在后台查找150条数据，返回给前端。Store接收到数据之后，就会显示150条，前端人员看着像是加载多了50条，实际是返回的是150条，效率很低。

三、整理思路

1、前台数据增加用到了Ext.data.Record，思考Ext.data.Record的数据能不能与后台进行交互，如果能与后台进行交互的话，那么record数据直接从后台获取，这样子就搞定了。

尝试结果：Ext.data.Record是前端对象，没办法跟后台进行数据交互

2、进一步思考，其实newRecord = new record({code:'全部',desc:'全部'});这句代码，说白了，只要我能获取到一个数据对象，将数据对象传给Ext.data.Record，不就可以了。而我们数据可以通过Ext.ajax的方式获取，恍然大悟，觉得之前想法太笨了。

四、代码编写

1、尝试改造成，下面的结构： ~~ 静态结构

function loadMore(){

    var cc = [{OpenId:123456,RoleName:'小郑',age:23},{OpenId:654321,RoleName:'小欣',age:21}]

    var DataGrid = Ext.getCmp('gridPanel');

    // store添加最新内容

    DataGrid.getStore().add(

        cc

    );

}

点击触发函数之后，发现也可以追加。证明自己的思路完成没有问题。

2、编写后台代码：

@RequestMapping("/test")

  @ResponseBody

  public BusiResult test() {

    List<Map<String,String>> lists = new ArrayList<Map<String,String>>();

    BusiResult busiResult = new BusiResult(BusiStatus.SUCCESS);

  

    Map<String,String> map = new HashMap<String, String>();

    map.put("OpenId","123456");

    map.put("RoleName","小郑");

    map.put("age","23");

  

    Map<String,String> map1 = new HashMap<String, String>();

    map1.put("OpenId","654321");

    map1.put("RoleName","小欣");

    map1.put("age","21");

  

    lists.add(map);

    lists.add(map1);

  

    busiResult.setData(lists);

    return busiResult;

}

3、改造前端代码 ~~ 动态结构

function loadMore(){

    // 同步请求

    Ext.Ajax.request({

        url: '/game/chat/go',

        method: 'post',

        // async: false,

        params : {

            scrollId: scrollId

        },

        success: function (action, options) {

            var result = Ext.decode(action.responseText);

            if (result.code != 0) {

                Ext.Msg.alert('提示', result.message);

                console.log("日志服耗时: " + result.extra);

            } else {

                var hitss = result.data;

                var DataGrid = Ext.getCmp('gridPanel');

                // store添加最新内容

                DataGrid.getStore().add(

                    hitss

                );

            }

        },

        failure: function (action, options) {

            Ext.MessageBox.hide();

            Ext.Msg.alert('提示', '请求后台失败');

        }

    });

   

}

至此，我们已经完成了加载更多的需求开发。

ExtJs案例（一） ~~ Grid组件加载更多

Grid组件加载更多

一、需求

二、加载更多

三、整理思路

四、代码编写

猜你喜欢