java_easyui体系之DataGrid（1）[转]

深藏阁楼爱情的钟 2022-03-30 04:22 180阅读 0赞

## 一：简介 ##

以表格的形式展示数据、项目中式很常见的一个使用、table展示数据、牵扯到分页、上一页下一页、首页、尾页、翻页、选中展示的记录用于操作、总记录数等等、使用DataGrid很容易实现这一点。

## 二：页面源码[   ][Link 1] ##

各个字段在页面中都有详细的说明

datagrid.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
     
     
       
         
        <title>My JSP 'original.jsp' starting page</title>
         
        <link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
        <link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
        <script type="text/javascript">
        </script>
       
       
         
            <div data-options="region:'north',title:'North Title',split:false" style="height:100px;"> </div>
            <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"> </div>
            <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
            <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
            <div data-options="region:'center'" href="datagridtaps.html" style="overflow: hidden;"></div>

内嵌页面datagridtaps.html：

<title>dategridtaps.html</title>
         
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
         
        
     
       
       
         
            <script type="text/javascript">
                $(function(){
                    $('#datagrid').datagrid({
                        url:'login_getJson.action',
    //                      title: 'ssss',
                        iconCls:'icon-save',
                        pagination:true,
                        pageSize:10,
                        pageList:[10,20,30,40,50,60,70,80,90,100],
                        fit:true,//使表格自适应
                        fitColumns:true,//使得表格中所有的列宽相加等于自适应的宽度、也就是浏览器改变大小的时候下方会不会出现滚动条、一般只有在列较少的时候使用
                        nowrap:false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试
                        border:false,
                        idFeild:'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键
                        sortName:'id',//设置默认排序时的 字段（必须是field中的一个字段）
                        sortOrder:'asc',//是按照升序还是降序排序   但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序
                        columns:[ [{
                                title:'编号',
                                field:'id',
                                width:100,//必须要给
    //                              sortable:true,//指定按照这个排序
                            },{
                                title:'姓名',
                                field:'userName',
                                width:100,//必须要给
                                 
                            },{
                                title:'密码',
                                field:'passWord',
                                width:100,//必须要给
                            }] ]
                         
                    }); 
                });
            </script>
       
            <div class="easyui-tabs" data-options="fit:true,border:false">
                <div title="用户管理">
                    <table id="datagrid"></table>
                </div>
            </div>

## 三：后台源码 ##

这里没有和[数据库][Link 2]进行交互、仅在方法中手动构造一个UserDTO的List

public String getJson() throws IOException{
        List<userdto> userList = new ArrayList<userdto>();
        userList.add(new UserDTO("1","chy","123"));
        userList.add(new UserDTO("2","mxx","123"));
        userList.add(new UserDTO("3","chk","123"));
        //当与后台交互时、可以根据前台回传的页号与每页记录数查询数据
        //List<userdto> userList = userService.getUsers(page, rows); 这样就可以动态获取每页记录数、前台动态展示。
        //但是现在前台的总页数却变成每页的记录数、这样就要求还要有个service查询总记录数、然后重新构造Json传回到前台
        //int count = userService.getUersCount();
         
        /*
         * 想要按照某个列进行排序的时候、就使用前台传过来的关于排序的字段和排序方式 sort、order
         * List<userdto> userList = userService.getUsers(page, rows, sort, order) 
         */
        System.out.println("sort" + sort + " order" + order);
         
        Map<string, object=""> m = new HashMap<string, object="">();
        m.put("total", 12);
        m.put("rows", userList);
         
         
        System.out.println(getJson(m));
         
        PrintWriter pw  = ServletActionContext.getResponse().getWriter();
        pw.write(getJson(m));
        pw.flush();
        pw.close();
        return null;
    }</string,></string,></userdto></userdto></userdto></userdto>

注意对Json的处理：前台需要的是一个含有total、rows对象的Json、所以使用Map包装了一下、同时这里使用的是JackJson、速度比较块。

private String getJson(Object o) throws IOException,
            JsonGenerationException, JsonMappingException {
        ObjectMapper om = new ObjectMapper();
        StringWriter sw = new StringWriter();
        JsonGenerator jg = new JsonFactory().createJsonGenerator(sw);
        om.writeValue(jg, o);
        jg.close();
        return sw.toString();
    }

## 四：补充说明 ##

1、 内嵌[html][]页面、html页面中有class=”easyui-tabs”的div

2、 在内嵌html页面的那个panel中要添加一个style=”overflow:hidden;”属性、针对谷歌浏览器的滚动条。

3、 Datagrid 有分页属性pagination：他的子选项pageSize——每页显示的记录数 pageList——供于选择的每页的数量。

4、 每次请求后台都会向后台传递两个默认的参数、page（当前页号）、rows（每页总记录数）、当我们使用排序时、指定排序的字段和规则时、就会多传两个参数：sort（排序的字段）、order（排序方式：asc、desc）。我们可以根据这些参数来查询记录、

5、 传入的前台的Json格式的字符串要进行特殊处理、否则会错误的显示总记录数。具体处理看后台代码中关于Json的处理。

[Link 1]: http://www.2cto.com/ym
[Link 2]: http://www.2cto.com/database/
[html]: http://www.2cto.com/kf/qianduan/css/