许敏 邵向阳

摘 要：随着计算机及其互联网的快速发展，整个社会的信息化进程不断加深，各种业务应用系统趋向复杂化和综合化。一个应用广泛的业务系统离不开一个美观的、赏心悦目的用户界面（UI）。开发人员如何快速设计出好的用户界面是一个迫切需要解决的问题。本文从前端页面框架入手，结合后台实现技术，以某业务系统用户数据为例，分析和实现了基于数据网格控件的Web应用。

关键词：EasyUI框架 JSON 数据网格控件 Web应用

中图分类号：TP31文献标识码：A文章编号：1003-9082（2019）04-0-01

前言

计算机技术及互联网技术的快速发展，深刻影响着人们的生产和生活方式，同时，这些变革进一步催生新技术的诞生，特别是近年来html5、css3等技术的出现，使得前端用户页面的设计和开发变得更加绚丽和健壮。得益于各种前端框架，前端页面的设计和开发也变得更加快捷，本文选用EasyUI框架中的数据网格控件，结合javaweb开发常用方法和技术，研究和实现了基于数据网格的常用操作。

一、前端开发技术介绍

1.jQuery Easyui

2.AJAX

EasyUI通过AJAX技术来实现与后端服务器数据交互。Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。大大提高了页面的加载速度。

3.JSON

Easyui请求和返回的数据都是JSON类型的，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于ECMAScript（欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。

二、分析与实现

1.需求分析

本文以某高校业务管理系统用户管理模块为例进行说明，该系统用户管理模块功能要求如下：

第一，采用数据表格形式展示所有用户信息，显示属性有用户编号、用户名称、密码、性别、年龄、所在部门等信息。

第二，方便系统管理员进行账户管理，包括对用户进行增加、删除、修改操作，并自动保存到后台数据库。

第三，由于学校师生用户数量较多，表格要具有分页功能且能够设置每页显示的条数，方便管理员灵活设置查看。

2.具体实现

由于Datagrid控件可以开发出界面美观、简洁明了的数据库操作页面，因此，本文前端采用easyui框架，后端采用java servlet、jdbc技术，来实现用户管理模块的功能。下面介绍下datagrid控件实现的原理：datagrid控件是以JSON格式在前后台之间传递数据，首先在后台中从数据库取出数据，然后封装成JSON格式数据，前端根据接收到的JSON格式数据，在Datagrid控件上显示相应数据。

前端主要代码如下：

toolbar=”#toolbar”pagination=”true”rownumbers=”true” fitColumns=”true”singleSelect=”true”>

……