java_easyui体系之DataGrid（2）[转]

一：简介

在1的基础上添加layout组件、实现通过条件动态的从后台查询数据到前台展示、使用的方式是将查询单独作为一个layout中的一个面板。

二：关键之处

1、效果图：

2、左侧的折叠组件：

折叠组件是在整体的layout的west布局中的。下图中的第二个div的class是关键：

<div data-options="region:'west',title:'功能导航',split:true" style="width:160px;">

    <div class="easyui-accordion" data-options="fit:true,border:false">

        <div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;">

            content1

        </div>

        <div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px">

            <ul>

                <li>门户 </li>

                <li>用户管理</li>

            </ul>

        </div>

    </div>

</div>

3、查询form的存放组件：

这是一个内嵌页面：注意使用内嵌页面的div作为layout的容器、不要使用body、不然会出现一些莫名其妙的问题。下面代码就是

1、将datagrid.jsp中的layout的中部内嵌一个tabs的div、

2、这个div的一个关于“用户管理”的tab内嵌了一个user.jsp页面、

3、user.jsp页面又是一个使用div做layout的页面、北部放查询条件的form、中部放置展示数据的datagrid。

<div class="easyui-layout" data-options="fit:true,border:false,">

    <div data-options="region:'north',border:false,title:'过滤'" style="height: 140px;overflow: hidden">

        <form id="searchForm">

            <table class="datagrid-toolbar" style="height:100%;width:100%">

                <tbody><tr>

                    <th>用户名</th>

                    <td><input id="username" name="username" style="width: 320px"></td>

                </tr>

                <tr>

                    <th>创建时间</th>

                    <td>

                        <input name="createTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;">

                        至

                        <input name="createTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;">

                    </td>

                </tr>

                <tr>

                    <th>创建时间</th>

                    <td>

                        <input name="modifyTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;">

                        至

                        <input name="modifyTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;">

                        查询

                        清空

                    </td>

                </tr>

            </tbody></table>

        </form>

    </div>

    <div data-options="region:'center',border:false">

        <table id="datagrid"></table>

    </div>

</div>

4、点击查询从新加载数据：

这想说的一个是load方法的使用、而load方法参数需要一个对象（当然也可以是一个一个字段的 name : value）。一个是将form中所有信息序列化成一个form对象传递到前台。

1、首次进入时load一下、这是在$(function(){ $('#datagrid').datagrid({url: '' , xxx}) })中load的、

2、点击查询：load指定的datagrid的数据、这里直接使用datagrid的load方法、首先要选择作为datagrid展示的table的id、而不是别的什么东西。

//查询数据

function show(){

    $('#datagrid').datagrid('load',serializeObject($('#searchForm')));

}

3、上边代码中的serializeObject($('#searchForm'))、他是将form中的所有信息转化为一个对象作为load的参数。当form要传递的参数非常多的时候可以大大简化、但是他不是jquery自带的函数、是自己扩展的、下边是其实现代码（放在js）中的。

serializeObject = function(form){

    var o = {};

    $.each(form.serializeArray(), function(index){

        if(o[this['name']]){

            o[this['name']] = o[this['name']] + this['value'];

        }else{

            o[this['name']] = this['value'];

        }

    });

    return o;

};

三：页面源码

首页（datagrid2.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" src="js/chyUtils.js"></script>

    <script type="text/javascript">

        function userManage(id){

            console.info(id);

            if("door" == id){

                $('#tt').tabs('select', 0);

            }

            if("userManage" == id){

                $('#tt').tabs('select', 1);

            }

        }

    </script>

        <div data-options="region:'north', split:false" style="height:100px;"></div>

        <div data-options="region:'east',title:'在线列表',split:true" style="width:160px;"></div>

        <div data-options="region:'west',title:'功能导航',split:true" style="width:160px;">

            <div class="easyui-accordion" data-options="fit:true,border:false">

                <div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;">

                    content1

                </div>

                <div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px">

                    <ul>

                        <li>门户 </li>

                        <li>用户管理</li>

                    </ul>

                </div>

            </div>

        </div>

        <div data-options="region:'center',title:'欢迎'," style="overflow: hidden;">

            <div id="tt" class="easyui-tabs" data-options="fit:true,border:false,">

            <div title="门户" data-options="closable:true">

                门户

            </div>

            <div id="userManage" title="用户管理" data-options="href:'user.jsp',closable:true">

            </div>

        </div>

        </div>

内嵌user.jsp：

        <script type="text/javascript">

            $(function(){

                $('#datagrid').datagrid({

                    url:'login_getJson.action',

                    title: '用户列表',

                    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,//必须要给

                        }] ],

                        toolbar:[{

                                text: '增加',

                                iconCls:'icon-add',

                                handler:function(){

                                }

                            },'-',{

                                text: '删除',

                                iconCls:'icon-remove',

                                handler:function(){

                                }

                            },'-',{

                                text: '修改',

                                iconCls:'icon-edit',

                                handler:function(){

                                }

                        },'-']

                });

            });

            //查询数据

            function show(){

                $('#datagrid').datagrid('load',serializeObject($('#searchForm')));

            }

            //清除查询条件、返回初始数据展示状态

            function clean(){

                $('#datagrid').datagrid('load',{});

                $('#searchForm').find('input').val('');

            }

        </script>

        <div class="easyui-layout" data-options="fit:true,border:false,">

            <div data-options="region:'north',border:false,title:'过滤'" style="height: 140px;overflow: hidden">

                <form id="searchForm">

                    <table class="datagrid-toolbar" style="height:100%;width:100%">

                        <tbody><tr>

                            <th>用户名</th>

                            <td><input id="username" name="username" style="width: 320px"></td>

                        </tr>

                        <tr>

                            <th>创建时间</th>

                            <td>

                                <input name="createTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;">

                                至

                                <input name="createTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;">

                            </td>

                        </tr>

                        <tr>

                            <th>创建时间</th>

                            <td>

                                <input name="modifyTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;">

                                至

                                <input name="modifyTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;">

                                查询

                                清空

                            </td>

                        </tr>

                    </tbody></table>

                </form>

            </div>

            <div data-options="region:'center',border:false">

                <table id="datagrid"></table>

            </div>

        </div>

引用的js：

serializeObject = function(form){

    var o = {};

    $.each(form.serializeArray(), function(index){

        if(o[this['name']]){

            o[this['name']] = o[this['name']] + this['value'];

        }else{

            o[this['name']] = this['value'];

        }

    });

    return o;

};

四：补充说明

1、当对datagrid进行DUAL时、可以使用toolbar直接添加功能按钮、也可以使用div作为

2、使用datatimebox时要加上editable=false

3、查询时、使用load、而不是使用reload、load查询的时候会将页面改回到首页、reload则会从你选择的页面开始查

4、当将内嵌页面作为layout使用的时候、不要将body设置成class=”easyui-layout”使用div作为layout的容器。

5、折叠的组件式通过 class=”easyui-accordion”—— 然后通过div来设置的。而不是想象中的内嵌layout。

6、可以通过点击 class=”easyui-accordion”中的选项动态展示tabs的某个组件。