Jquery easy ui 之datagrid简介

部门内部培训jq的easy ui,通常用的就是datagrid和window,其他的什么layout,什么combox之类的控件,官方有demo,也有document,

我就说说datagrid吧,它比较重要,基本介绍下增删改查,排序等等基本功能.代码就不贴了,太长.备忘吧,红色的是老大加的意见.

我们项目常用的就是datagrid,window等等.datagrid就是页面上列表数据的展示,支持排序,分页,自定义按钮,远程数据装载等等功能.
datagrid
查询

datagrid中有个queryParams属性,是用来指定远程数据装载时查询的参数,是一个json对象.

查询时,可以手动赋值queryParams属性,然后调用reload方法,或者利用reload方法的参数自己传入查询条件,也是一个json对象.
增删改

datagrid与后台的交互可以都是ajax的,通过json传输数据.列表中的每一行数据都是一个json对象,在传到后台时,需要把它序列化为json字符串,这里用到了开源json帮助类的JSON.stringify方法

它可以把一个json对象数组序列化为json字符串,后台再用google的GSON进行json和数据bean的转换.操作完成后再次调用reload方法并传入相应的查询参数即可实现无刷新操作.

对一次操作多条数据,其中有个getChanges函数,参数是inserted,deleted,updated中的一个,它获得页面上新增的,删除的,修改过的数据,组装成一个json对象并序列化为json字符串,

传入后台,后台再利用GSON解析为对应的bean,分别处理inserted,deleted,updated 3种逻辑.

查询条件输入框放在一个form中，输入框name值组成为 param.exp.alias.field, exp为查询方式，为空时为=，其他可用关键字有like,startDate,endDate,equalDate,greate,less 等，alias为HQL中对象别名，通常写成对象的变量名，field为对象查询字段名。



查询数据所在对象的类名作为隐藏字段放在form中，字段名为className.

查询datagrid方法是$('#tl').datagrid("reload",form2json("searchform"));

其中searchform为查询条件form的id，form2json为工具函数。


分页和排序

datagrid有pageNumber,pageSize,pageList 3个属性用来设置初始分页属性.每次查询时,datagrid会自动向后台传入page,rows,sort,order 4个参数,分别代表当前页码,一页显示多少条数据,排序的字段,

排序的方向,后台再根据这4个参数进行响应的处理,即可实现分页和排序的功能.

增删改支持单表操作和一对多两张表的操作。
自定义按钮

datagrid支持在顶部和底部(分页栏)上添加自定义按钮,每个按钮是一个对象,拥有一个css样式属性,和一个handler函数,用来设置点击按钮后触发的js事件.
window

jquery easyui的对话框分为window和dialog二种,他们都是继承于panel,可支持远程装载url和界面自定义div 2种方式,拥有折叠,最大(小)化,拖动,resize,模态等等一系列方法.

window和dialog的区别介绍一下，什么情况下用window,何时用dialog

dialog继承于window,dialog多了2个参数buttons和toolbar,toolbar是在窗口的顶部的自定义按钮,buttons是窗口的底部的自定义按钮.需要自定义按钮的可以选用dialog.

评论

3 楼 zdglt88 2012-08-24  

其实这个datagrid挺简单的,没有难度

2 楼 完善自我 2012-01-17  

抓住重点，支持一下！

1 楼 andylauxing 2011-11-23  

讲得很清楚，正是我想要的。