部门内部培训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.
我就说说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.