框架笔记---EasyUi Datagrid的JavaScript创建方式与使用

最新推荐文章于 2025-10-11 13:47:43 发布

原创最新推荐文章于 2025-10-11 13:47:43 发布 · 732 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#datagrid

工作问题记录专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用 EasyUI 的 Datagrid 组件进行数据展示，包括前端页面配置、JavaScript 初始化设置、后端 Controller 和 Service 层的数据处理流程。

一、声明一个Table

<table id="dg">  
</table>

二、JS实现

datagrid=$("#dg").datagrid({  
            url:"admin/business/controller/datagrid.json",//加载的URL  
            isField:"id",  
            pagination:true,//显示分页  
            pageSize:5,//分页大小  
            pageList:[5,10,15,20],//每页的个数  
            fit:true,//自动补全  
            fitColumns:true,  
            iconCls:"icon-save",//图标  
            title:"用户管理",  
            columns:[[      //每个列具体内容  
                      {  
                          field:'id',  
                          title:'id',  
                          width:100,  
                     },     
                      {field:'pid',title:'pid',width:100},     
                      {field:'text',title:'text',width:100}     
                  ]]  
})

三、Controller层

@RequestMapping(method = RequestMethod.POST, value ="datagrid")
@UserEvent(desc = "EasyUiDatagrid的使用")
@ResponseBody
public EasyuiDataGrid<View> datagrid(Search search) {
    EasyuiDataGrid<View> dg = new EasyuiDataGrid<View>();
        try{
            search.setSort("createTime");//排列方式
            search.setOrder(BaseSearch.Order_Type_Desc);//降序排列
            dg = serviceManage.Service.datagrid(search);
        } catch (Exception e){
            e.printStackTrace();
        }
        return dg;
    }

四、Service层

    @Override
    public EasyuiDataGrid<V> datagrid(S search) throws Exception {
        EasyuiDataGrid<V> dg = new EasyuiDataGrid<V>();
        List<V> view_list = new ArrayList<V>();
        Long count = getDao().countBySearch(search);
        if(count > 0){
            view_list = this.viewList(search);
        }
        dg.setRows(view_list);
        dg.setTotal(count);
        return dg;
    }

    @Override
    public List<V> viewList(S search) throws Exception{
        List<T> list = this.list(search);
        return this.convertByModelList(list);//转换器转换model→view
    }

    @Override
    public List<T> list(S search){
        return  getDao().findListBySearch(search);
    }