easyui控件的使用之dataGrid的综合应用

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

  

猜你喜欢

转载自blog.csdn.net/badaaasss/article/details/83977220