二12、【輕量級開源框架】EFW框架Web前端開發之JqueryEasyUI

回《【開源】EFW框架系列文章索引》       

EFW框架源代碼下載V1.2：http://pan.baidu.com/s/1hcnuA

EFW框架實例源代碼下載：http://pan.baidu.com/s/1o6MAKCa

 

       前言：EFW框架主要用於行業軟件軟件開發，因此軟件的界面須要體現專業、漂亮、風格統一的效果；在Web方便這種界面框架仍是有很多，如強大的EXT，基於Jquery的JqueryUI，還有一些國產的也都比較漂亮；而EFW框架中推薦的是JqueryEasyUI，爲何選擇它了，一是界面風格比較合適，控件也很全，已經知足系統的功能；二是JqueryEasyUI是基於Jquery，對於它的編碼方式是很是舒服的，並且整個框架夠輕量級；三是它的學習成本低，實例代碼很全，花得幾個小時熟悉一下就會使用；之前在項目中有用過ExtJS作界面開發，說實話用得比較痛苦，它那種編碼方式不是通常人能接受的，界面都是用JS代碼編寫的，看起來不太直觀，特別你們編碼又不是太規範，日積月累最後一個頁面js也是老長，最後出現對應閉合符號不對都要找半天；如今的項目都是使用JqueryEasyUI開發，那叫一個舒服啊；固然若是仍是以爲JqueryEasyUI不夠強大，你能夠在EFW框架中很是方便的擴展你本身的界面框架；

 本文要點：

1.JqueryEasyUI介紹

2.JqueryEasyUI經常使用控件使用詳解

3.EFW框架中使用JqueryEasyUI開發的編碼風格

4.在JqueryEasyUI基礎上自定義的控件

1.JqueryEasyUI介紹

jQuery EasyUI是一組基於jQuery的UI插件集合，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富而且美觀的UI界面。開發者不須要編寫複雜的javascript，也不須要對css樣式有深刻的瞭解，開發者須要瞭解的只有一些簡單的html標籤。jQuery EasyUI爲咱們提供了大多數UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。jQuery EasyUI是基於JQuery的一個前臺ui界面的插件，功能相對沒extjs強大，但頁面也是至關好看的。一些功能也足夠開發者使用，相對於extjs更輕量。

   特色

1 基於jquery用戶界面插件的集合

2 爲一些當前用於交互的js應用提供必要的功能

3 使用 EasyUI你不須要寫不少的javascript代碼，一般只須要寫HTML標記來定義用戶界面便可

4 支持HTML5

5 開發產品時可節省時間和資源

6 簡單，但很強大

7 支持擴展，可根據本身的需求擴展控件

8 目前各項不足正已版本遞增的方式不斷完善

 

2.JqueryEasyUI經常使用控件使用詳解

接下來咱們結合EFW框架來詳細講解JqueryEasyUI的控件如何使用；同時根據本身結合本身對它的理解挑選幾個有表明性的控件；頁面中使用控件前必須先引用幾個JqueryEasyUI的文件；

 

1）Layout佈局控件

學習一套控件首先要掌握的就是佈局控件，分別上下、左右、居中等，還有嵌套佈局，好比在居中面板再分爲上下佈局；佈局用得好對之後得界面調整是很是方便，代碼也看上去更加清晰漂亮；編寫一個<div>標籤且class="easyui-layout"，這樣就表示把div層變成一個佈局控件，全部其餘控件的代碼編寫都是這種方式使用；

 

 

2）datagrid表格控件

表格控件在系統中用得最多的一個控件，在Winform中就有datagridview表格控件，只需將DataTable數據綁定給DataGridView就能夠顯示數據很是簡單；而datagrid是bs的，確定沒有這麼方便，但EFW框架也把它封裝得使用起來很是方便；首先編寫datagrid界面代碼，定義好顯示列，而後在js代碼中給控件的url屬性指定請求地址，利用jquery的ajax發送http請求調用後臺WebController，返回Json數據顯示在datagrid控件；

 

3）Dialog彈窗控件

這個控件也是用的很是多的，好比新增、修改操做的時候更偏向於彈出一個小界面進行操做；

 

其餘更多控件學習參考：http://www.jeasyui.com

3.EFW框架中使用JqueryEasyUI開發的編碼風格

JqueryEasyUI代碼編寫有兩種風格，一種是用html標籤編寫界面代碼，還有一種能夠編寫js代碼動態生成界面，從上面的控件舉例就能看出，我的堅持必定要採用第一種方式編寫界面代碼，js代碼只是一些數據請求操做；

 

4.在JqueryEasyUI基礎上自定義的控件

介紹兩個本身的兩個控件，是基於JqueryEasyUI之上擴展的，給須要本身開發控件的提供兩個示例，有個參考的東西；一個是在日期控件上的擴展控件，能夠按月查、按季度查、按上下半年查、按年度查；另外一個是把表格控件用卡片的形式展示；代碼放在EFWWeb項目中的WebPlugin目錄。