easyui datagrid java_java_easyui体系之DataGrid（2）[转]

一：简介

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

二：关键之处

1、效果图：

2、左侧的折叠组件：

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

content1

• 门户
• 用户管理

3、查询form的存放组件：

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

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

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

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

用户名
创建时间	至
创建时间	至查询 清空

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

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

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

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

//查询数据

functionshow(){

$('#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'];

}

});returno;

};

三：页面源码

首页(datagrid2.jsp)：

My JSP 'original.jsp' starting page

functionuserManage(id){

console.info(id);if("door" ==id){

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

}if("userManage" ==id){

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

}

}

content1

• 门户
• 用户管理

门户

内嵌user.jsp：

$('#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(){

}

},'-']

});

});//查询数据

functionshow(){

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

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

functionclean(){

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

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

}

用户名
创建时间	至
创建时间	至查询 清空

引用的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'];

}

});returno;

};

四：补充说明

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的某个组件。