easyui有丰富且功能强大的插件库,其中dataGrid的功能尤为重要,下面我就介绍下如何用dataGrid实现下面图示的功能。
我的这个页面中,主要包含了dataGrid的以下几个功能:
一 异步从数据库获取数据,并绑定dataGrid的功能。
二 实现dataGrid的sql语句或者存储过程分页的功能,实现每次查询只读取当前页的数据(这里本人使用的是Oracle11g数据库)。
三 使用过滤(filter)功能,这里datagrid-filter.js插件,在表头增加了过滤行,而且给审核时间列做了可以根据条件(等于、小于、大于)进行过滤的功能。如下图。
四 还有表单的编辑(在编辑完成后,列表会自动刷新)、导出等功能。编辑效果如下图。
五 异步动态加载的二级联动combobox。实现市和区县的联动功能。
下面我来具体介绍下,这四部分是如何实现的。
首先,需要引入需要的js及css文件。其中icon.css是图标样式,datagrid-filter.js是过滤行所需的插件,easyui-lang-zh_CN.js则是语言配置文件(如果不引入,页码等信息会显示英文,日期格式也会有问题)
View Code
下面是body的全部代码
View Code
后台数据查询的主要代码:
View Code
数据库操作层代码如下:
View Code