示例效果圖

示例代碼

繼上篇文章，本篇文章接著來給表格上分頁功能。部分代碼參考上篇文章。

GridPagingExample

package fan.tutorial.client.ui.grids;

import java.util.ArrayList;

import java.util.List;

import com.extjs.gxt.ui.client.data.BasePagingLoader;

import com.extjs.gxt.ui.client.data.HttpProxy;

import com.extjs.gxt.ui.client.data.JsonPagingLoadResultReader;

import com.extjs.gxt.ui.client.data.ModelData;

import com.extjs.gxt.ui.client.data.ModelType;

import com.extjs.gxt.ui.client.data.PagingLoadResult;

import com.extjs.gxt.ui.client.data.PagingLoader;

import com.extjs.gxt.ui.client.store.ListStore;

import com.extjs.gxt.ui.client.widget.ContentPanel;

import com.extjs.gxt.ui.client.widget.LayoutContainer;

import com.extjs.gxt.ui.client.widget.grid.CheckBoxSelectionModel;

import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;

import com.extjs.gxt.ui.client.widget.grid.ColumnModel;

import com.extjs.gxt.ui.client.widget.grid.Grid;

import com.extjs.gxt.ui.client.widget.layout.FitLayout;

import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;

import com.google.gwt.core.client.GWT;

import com.google.gwt.http.client.RequestBuilder;

import com.google.gwt.i18n.client.NumberFormat;

import com.google.gwt.user.client.Element;

import fan.tutorial.client.commons.PagingToolBarExtend;

import fan.tutorial.client.model.IEmployee;

import fan.tutorial.server.value.Constant;

public class GridPagingExample extends LayoutContainer {

    @Override

    protected void onRender(Element parent, int index) {

        super.onRender(parent, index);

        //創建內容面板

        ContentPanel panel = new ContentPanel();

        //設置面板標題

        panel.setHeadingHtml("Grid Paging");

        //設置面板寬度高度

        panel.setSize(600, 350);

        //設置面板布局, FitLayout 內容填充整個面板

        panel.setLayout(new FitLayout());

        panel.setFrame(true);

        //創建ModelType

        ModelType modelType = new ModelType();

        //一定要設置才能顯示分頁總數

        modelType.setTotalName(Constant.TOTAL);

        //設置根名稱（與json數據根名稱要保持一致, 否則無法正確的解析數據）

        modelType.setRoot(Constant.RESULT);

        //添加表格需要使用到的字段域, 未被添加的字段域在表格中無數據展示

        modelType.addField(IEmployee.NAME);

        modelType.addField(IEmployee.SEX);

        modelType.addField(IEmployee.SALARY);

        modelType.addField(IEmployee.BIRTHPLACE);

        modelType.addField(IEmployee.HIREDATE);

        //復選框選擇模型

        CheckBoxSelectionModel<ModelData> sm = new CheckBoxSelectionModel<ModelData>();

        //表格列配置

        List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

        //表格列配置信息

        configs.add(sm.getColumn());

        configs.add(new ColumnConfig(IEmployee.NAME, "姓名", 100));

        configs.add(new ColumnConfig(IEmployee.SEX, "性別", 100));

        ColumnConfig columnConfig = new ColumnConfig(IEmployee.SALARY, "薪資", 100);

        columnConfig.setNumberFormat(NumberFormat.getFormat("0.0"));

        configs.add(columnConfig);

        configs.add(new ColumnConfig(IEmployee.BIRTHPLACE, "籍貫", 100));

        configs.add(new ColumnConfig(IEmployee.HIREDATE, "入職時間", 100));

        //Spring MVC Controller 請求地址

        String url = GWT.getHostPageBaseURL() + "employee/find/page.json";

        //構建RequestBuilder

        RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, url);

        //創建HttpProxy

        HttpProxy<String> proxy = new HttpProxy<String>(builder);

        //JsonPagingLoadResultReader

        JsonPagingLoadResultReader<PagingLoadResult<ModelData>> reader = new JsonPagingLoadResultReader<PagingLoadResult<ModelData>>(modelType);

        //數據加載器

        PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy, reader);

        //數據存儲器

        ListStore<ModelData> store = new ListStore<ModelData>(loader);

        //分頁TOOLBAR

        PagingToolBar pagingToolBar = new PagingToolBarExtend(Constant.PAGE_SIZE_DEFAULT);

        pagingToolBar.bind(loader);

        //創建表格

        Grid<ModelData> grid = new Grid<ModelData>(store, new ColumnModel(configs));

        //設置顯示加載標識

        grid.setLoadMask(true);

        //設置顯示表格邊框

        grid.setBorders(true);

        //設置選擇模型

        grid.setSelectionModel(sm);

        //設置插件, 如果不設置, 全選復選框無法點擊

        grid.addPlugin(sm);

        //設置寬度自動擴展的列

        grid.setAutoExpandColumn(IEmployee.HIREDATE);

        panel.add(grid);

        panel.setBottomComponent(pagingToolBar);

        //加載數據

        loader.load();

        add(panel);

    }

}

EmployeeController

package fan.tutorial.server.controller;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import fan.tutorial.client.model.Employee;

import fan.tutorial.server.commons.JsonUtil;

import fan.tutorial.server.service.DataService;

import fan.tutorial.server.value.Constant;

@Controller

@RequestMapping("/employee")

public class EmployeeController {

    @Resource

    private DataService service;

    @RequestMapping(value = "/find/page")

    public String findByPage(Model model, int offset, int limit){

        List<Employee> resultList = service.findEmplyeeByPage(offset, limit);

        int total = service.getEmplyeeCounts();

        String[] rootNames = {Constant.RESULT, Constant.TOTAL};

        Object[] objects = {resultList, total};

        String result = JsonUtil.toJson(rootNames, Constant.DATE_FORMAT_PATTENR_DEFAULT, objects);

        model.addAttribute(Constant.RESULT, result);

        return Constant.RESULT_CODE;

    }

}

DataService

package fan.tutorial.server.service;

import java.util.ArrayList;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import fan.tutorial.client.model.Employee;

import fan.tutorial.server.value.Data;

@Service

public class DataService {

    @Resource

    private Data data;

    public List<Employee> findEmplyeeByPage(int offset, int limit){

        List<Employee> store = data.getEmployeeList();

        List<Employee> target = new ArrayList<Employee>();

        for(int i = offset; i < offset + limit && i < store.size(); i++){

            target.add(store.get(i));

        }

        return target;

    }

    public int getEmplyeeCounts(){

        return data.getEmployeeList().size();

    }

}