miniui 查询_扩展 jquery miniui 组件实现自动查询数据

主题

之前写过一篇文章分享了公司basecode查找数据后台是怎么实现的(http://www.cnblogs.com/abcwt112/p/6085335.html).今天想分享一下公司前台是怎么扩展jquery miniui组件去配合后台实现自动查找数据的.

一个使用例子

项目中多多少少会遇到要下拉一些数据(不只是下拉,可能还有选择框等等).

这些数据来自数据库里的某张代码表(当然也可以是复杂的SQL查询).这些数据写死在前台明显是不可能的,因为不同环境下配置的数据可能不同.但是为了每个下拉框去写一个Controller方法,Service方法.Dao方法...好像代价又太大了,而且他们具有一定的同性.这就是Basecode的存在的一个原因.

前台实现

后台的实现请参考我另外一篇文章,这篇文章主要分享下怎么扩展jquery miniui组件(miniui是类似于jquery easyui的一个前台JS框架)来实现前台自动发送请求加载数据实现basecode的下拉.

jquery miniui不是开源的,所以自己写组件继承起来比较蛋疼...但是多多少少还是可以做一些简单的扩展的.

一个最简单的代码表下拉的例子

实现basecode自动下拉的主要原理是利用了beforeload事件.

我们自己定义的组件继承了原本miniui的组件,重写了部分方法,在组件在初始化的时候额外加入了beforeload事件并触发,这样这个组件就会自动去后台查找数据了.

1 mini.extend(framework.component.ComboList , mini.ComboBox , {2

3 codeType : "", //绑定代码类型

4

5 remote : false, //是否从远端加载数据

6

7 textField : "label",8

9 uiCls: "mini-ext_combolist",10

11 valueField : "value",12

13 queryparam : {},14

15 /**16 * 重定义加载数据的方法，根据codeType指定的加载数据17 */

18 load : function(data){19 if(this.codeType && this.codeType.length > 0){20 if(basecode[this.codeType] && !this.remote){21 this.setData(basecode[this.codeType]);22 }else{23 this.setUrl(common.getBascodeUrl()+"/"+this.codeType);24 }25 }26 },27

28 set : function(kv){29 var me = this;30 framework.component.ComboLis