easyui介紹

jQueryEasyUI

  編輯

jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕松的打造出功能豐富並且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要對css樣式有深入的了解，開發者需要了解的只有一些簡單的html標簽。

外文名

jQueryEasyUI

定    義

基於jQuery的UI插件集合體

功    能

打造出功能豐富並且美觀的UI界面

應用對象

web開發者

目錄

1. 1 特點
2. 2 插件
3. 3 方法的使用
4. 4 事件的使用

特點

編輯

jQuery EasyUI為提供了大多數UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI是基於JQuery的一個前台ui界面的插件，功能相對沒extjs強大，但頁面也是相當好看的，同時頁面支持各種themes以滿足使用者對於頁面不同風格的喜好。一些功能也足夠開發者使用，相對於extjs更輕量。

jQuery EasyUI有以下特點：

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

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

3、EasyUI支持兩種渲染方式分別為javascript方式（如：$('#p').panel({...})）和html標記方式（如：class="easyui-panel"）

4、支持HTML5（通過data-options屬性）

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

6、簡單，但很強大

7、支持擴展，可根據自己的需求擴展控件

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

插件

編輯

jQuery EasyUI 提供了用於創建跨瀏覽器網頁的完整的組件集合，包括功能強大的 datagrid（數據網格）、treegrid（樹形表格）、 panel（面板）、combo（下拉組合）等等。 用戶可以組合使用這些組件，也可以單獨使用其中一個。

插件列表如下：

分類	插件
Base（基礎）	Parser 解析器 Easyloader 加載器 Draggable 可拖動 Droppable 可放置 Resizable 可調整尺寸 Pagination 分頁 Searchbox 搜索框 Progressbar 進度條 Tooltip 提示框
Layout（布局）	Panel 面板 Tabs 標簽頁/選項卡 Accordion 折疊面板 Layout 布局
Menu（菜單）與 Button（按鈕）	Menu 菜單 Linkbutton 鏈接按鈕 Menubutton 菜單按鈕 Splitbutton 分割按鈕
Form（表單）	Form 表單 Validatebox 驗證框 Combo 組合 Combobox 組合框 Combotree 組合樹 Combogrid 組合網格 Numberbox 數字框 Datebox 日期框 Datetimebox 日期時間框 Calendar 日歷 Spinner 微調器 Numberspinner 數值微調器 Timespinner 時間微調器 Slider 滑塊 textbox基礎文本框 filebox文件上傳
Window（窗口）	Window 窗口 Dialog 對話框 Messager 消息框
DataGrid（數據網格）與 Tree（樹）	Datagrid 數據網格 Propertygrid 屬性網格 Tree 樹 Treegrid 樹形網格

方法的使用

編輯

datagrid

$('#dg').datagrid('getSelected'); 不帶參數的方法，獲取當前選中行。 $('#dg').datagrid(''sort', 'itemid'); 帶參數的方法，按照itemid 排序

事件的使用

編輯

datagrid

$('#dg').datagrid({ onDblClickCell: function(index,field,value){ $(this).datagrid('beginEdit', index); var ed = $(this).datagrid('getEditor', {index:index,field:field}); $(ed.target).focus(); } }); 定義單元格雙擊事件 開啟編輯。