基于Easyui框架的數據網格控件的研究與應用

許敏 邵向陽

摘 要：隨著計算機及其互聯(lián)網的快速發(fā)展，整個社會的信息化進程不斷加深，各種業(yè)務應用系統(tǒng)趨向復雜化和綜合化。一個應用廣泛的業(yè)務系統(tǒng)離不開一個美觀的、賞心悅目的用戶界面（UI）。開發(fā)人員如何快速設計出好的用戶界面是一個迫切需要解決的問題。本文從前端頁面框架入手，結合后臺實現(xiàn)技術，以某業(yè)務系統(tǒng)用戶數據為例，分析和實現(xiàn)了基于數據網格控件的Web應用。

關鍵詞：EasyUI框架 JSON 數據網格控件 Web應用

中圖分類號：TP31文獻標識碼：A文章編號：1003-9082（2019）04-0-01

前言

計算機技術及互聯(lián)網技術的快速發(fā)展，深刻影響著人們的生產和生活方式，同時，這些變革進一步催生新技術的誕生，特別是近年來html5、css3等技術的出現(xiàn)，使得前端用戶頁面的設計和開發(fā)變得更加絢麗和健壯。得益于各種前端框架，前端頁面的設計和開發(fā)也變得更加快捷，本文選用EasyUI框架中的數據網格控件，結合javaweb開發(fā)常用方法和技術，研究和實現(xiàn)了基于數據網格的常用操作。

一、前端開發(fā)技術介紹

1.jQuery Easyui

2.AJAX

EasyUI通過AJAX技術來實現(xiàn)與后端服務器數據交互。Ajax即“Asynchronous Javascript And XML”（異步JavaScript和XML），它是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在后臺與服務器進行少量數據交換，Ajax就可以使網頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。大大提高了頁面的加載速度。

3.JSON

Easyui請求和返回的數據都是JSON類型的，JSON（JavaScript Object Notation）是一種輕量級的數據交換格式。它基于ECMAScript（歐洲計算機協(xié)會制定的js規(guī)范）的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得JSON成為理想的數據交換語言。

二、分析與實現(xiàn)

1.需求分析

本文以某高校業(yè)務管理系統(tǒng)用戶管理模塊為例進行說明，該系統(tǒng)用戶管理模塊功能要求如下：

第一，采用數據表格形式展示所有用戶信息，顯示屬性有用戶編號、用戶名稱、密碼、性別、年齡、所在部門等信息。

第二，方便系統(tǒng)管理員進行賬戶管理，包括對用戶進行增加、刪除、修改操作，并自動保存到后臺數據庫。

第三，由于學校師生用戶數量較多，表格要具有分頁功能且能夠設置每頁顯示的條數，方便管理員靈活設置查看。

2.具體實現(xiàn)

由于Datagrid控件可以開發(fā)出界面美觀、簡潔明了的數據庫操作頁面，因此，本文前端采用easyui框架，后端采用java servlet、jdbc技術，來實現(xiàn)用戶管理模塊的功能。下面介紹下datagrid控件實現(xiàn)的原理：datagrid控件是以JSON格式在前后臺之間傳遞數據，首先在后臺中從數據庫取出數據，然后封裝成JSON格式數據，前端根據接收到的JSON格式數據，在Datagrid控件上顯示相應數據。

前端主要代碼如下：

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

……