當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI框架

發(fā)布時間：2023/12/2 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI框架小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、概述

1.1 EasyUI是什么？

EasyUI全稱是Jquery-EasyUI,它是基于Jquery的一個UI插件庫，封裝了許多實用的控件和功能，并且是完美支持HTML5網(wǎng)頁的框架。提供的控件包括數(shù)據(jù)表格，樹形表格，菜單，進度條，選項卡，日期組合框，調(diào)節(jié)器，對話框等等。

EasyUI的目標就是幫助Web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。開發(fā)者不需要編寫復雜的JavaScript，也不要對CSS樣式有深入的了解，開發(fā)者只需要了解一些簡單的Html標簽（table標簽、form標簽、div標簽等）即可。

EasyUI開發(fā)前端頁面的好處：

豐富的jQuery插件庫
使用簡單，可以快速開發(fā)出原型界面
支持html5，實現(xiàn)跨瀏覽器等等

1.2 搭建開發(fā)環(huán)境

下載地址：http://www.jeasyui.net

下載完成后直接解壓縮，其目錄結(jié)構如下圖所示：

在頁面中引入下面文件：

1.3 入門示例

運行效果：

二、常用控件

2.1 消息框

messager提供了不同類型的消息框。例如：confirm、alert、p’rompt等等。所有消息框都是異步的，用戶可以使用messager回調(diào)函數(shù)進行交互。

（1）消息提示框

運行效果：

（2）消息警告框

$.messager.alert('消息', '這里是消息文本的地方');

運行效果：

（3）確認對話框

$.messager.confirm('系統(tǒng)提示','確定要刪除這條記錄嗎？',function(r){if(r){$.messager.alert('系統(tǒng)提示','確定刪除','info');} });

運行效果：

2.2 對話框

對話框是一個特殊類型的窗口。它在頂部有一個工具欄，在底部有一個按鈕欄。默認情況下，對話框（dialog）只有一個顯示在頭部右側(cè)的關閉工具。用戶可以配置對話框行為來顯示其他工具（比如：可折疊 collapsible、可最小化 minimizable、可最大化 maximizable，等等）。

創(chuàng)建對話框：

方式一：通過DOM節(jié)點標簽創(chuàng)建；
方式二：通過javascript腳本創(chuàng)建；

（1）DOM節(jié)點創(chuàng)建對話框

<div id="d1" class="easyui-dialog" title="DOM節(jié)點創(chuàng)建的方式" style="width: 400px;height: 200px;" data-options = "iconCls:'icon-save',resizable:true,modal:true">DOM節(jié)點創(chuàng)建的方式 </div>

運行效果：

對話框常用屬性：

title:定義對話框標題，如：MyDialog
collapsible:定義是否顯示可折疊按鈕。默認:false(不顯示)
minimizable:定義是否顯示最小化按鈕。默認:false(不顯示)
maxmizable:定義是否顯示最大化按鈕。默認:false(不顯示)
resizable:定義對話框窗口是否可以被拖拉縮放。默認:false(不可以)
closable:定義是否顯示關閉按鈕。默認:true(顯示)
closed:定義是否在初始化組件時關閉(隱藏)窗口。默認:false(不隱藏)
modal:定義窗口是否帶有遮罩效果。默認:true(有遮罩)
buttons:該對話框按鈕通過數(shù)組定義。
href:定義引用的頁面的url。

（2）js腳本創(chuàng)建對話框

//在body標簽追加一個id=”dd”的div標簽 $('body').append('<div id="dd"></div>'); $('#dd').dialog({title:'My Dialog',width:400,height:200,closed:false,cache:false,modal:true,href:'index.html',buttons:[{text:'保存', handler:function(){$.messager.alert('系統(tǒng)提示','這里是點擊保存觸發(fā)的事件');}},{text:'取消',handler:function(){$('#dd').dialog('destroy'); }}] });

注意：href屬性只是引入被引用<body></body>標簽之間的內(nèi)容。所以被引入頁面的css、js是繼承使用父頁面的。另外一個值得大家注意的地方是，父頁面和子頁面標簽的id不能出現(xiàn)重復，否則會被替換。

2.3 布局控件

布局（layout）是有五個區(qū)域（北區(qū) north、南區(qū) south、東區(qū) east、西區(qū) west 和中區(qū) center）的容器。中間的區(qū)域面板是必需的，邊緣區(qū)域面板是可選的。每個邊緣區(qū)域面板可通過拖拽邊框調(diào)整尺寸，也可以通過點擊折疊觸發(fā)器來折疊面板。

例如：

運行效果：

屬性說明：

title：布局面板的標題。默認為null(String)，當為null或者不填寫，布局自動隱藏折疊按鈕；
region：定義布局面板的位置(方向)，可以取下列值的其中之一：north、south、east、west、center；
border：設置為true將顯示布局面板的邊框。默認為true。
spilt：如果設置為true將顯示一個分割條，用戶可以拖動分割條來改變布局面板的尺寸。默認為false；
iconCls：一個用來顯示布局面板頭部圖標的css類。默認為null；

2.4 表格控件

數(shù)據(jù)網(wǎng)格（datagrid）以表格格式顯示數(shù)據(jù)，并為選擇、排序、分組和編輯數(shù)據(jù)提供了豐富的支持。數(shù)據(jù)網(wǎng)格（datagrid）的設計目的是減少開發(fā)時間，且不要求開發(fā)人員具備指定的知識。它是輕量級的，但是功能豐富。它的特性包括單元格合并，多列頁眉，凍結(jié)列和頁腳，等等。

創(chuàng)建表格的三種方式：

從現(xiàn)有表格元素基礎上創(chuàng)建DataGrid
通過table標簽創(chuàng)建DataGrid
通過js腳本創(chuàng)建DataGrid

2.4.1 從現(xiàn)有表格元素基礎上創(chuàng)建DataGrid

2.4.2 通過table標簽創(chuàng)建DataGrid

datagrid_data.json文件的內(nèi)容是一個json數(shù)組格式的數(shù)據(jù)。

[{'code':1,'name:'電冰箱'，‘price’:1999 }, {'code':2,'name:'洗衣機'，‘price’:1599 }, {'code':3,'name:'空調(diào)'，‘price’:2999 }]

2.4.3 通過js腳本創(chuàng)建DataGrid

首先定義一個table標簽。

然后通過js腳本初始化表格。

表格屬性：

nowrap:當數(shù)據(jù)長度超出列寬時將會自動截取。默認true
idField:表示該列是唯一數(shù)據(jù)(id)。默認null
url:用于從遠程站點請求數(shù)據(jù)的超鏈接地址。默認null
pagination:設置為true,將在表格的底部顯示分頁工具條。默認false
rownumbers:設置為true時,將顯示行號。默認false
singleSelect:設置為true時，表示只能選中一行。默認false
toolbar：添加一個工具條
pagePosition:定義分頁欄的位置?？捎胻op、bottom（默認）、both。
pageNumber:分頁的初始頁面數(shù)。默認1
pageSize:初始化分頁每頁顯示的條數(shù)。默認10
pageList:初始化分頁每頁記錄數(shù)列表。默認[10,20,30,40,50]

數(shù)據(jù)列屬性：

title:列標題。默認undefined
field:列字段。默認undefined
width:列寬。默認undefined
rowspan:表示一個單元格可以跨越多少行。默認0
colspan:表示一個單元格可以跨越多少列。默認0
align:表示列數(shù)據(jù)對齊方式?？捎胠eft、center、right。默認left
checkbox:設置為true時，將在最前面顯示復選框。默認false
formatter:格式化單元格函數(shù)有3個參數(shù)
value:字段值
rowData:行數(shù)據(jù)
rowIndex:行索引

2.4.4 DataGrid的主要方法

load：載入并顯示第一頁記錄，通常用于執(zhí)行條件查詢功能；

$('#table').datagrid('load', {'參數(shù)名':'參數(shù)值', ...});

reload：重載表格數(shù)據(jù)，與load方法的功能相同。但是重載的是當前頁面，而不是第一頁；

$('#table').datagrid('reload');

getSelected：返回被選擇的記錄。例如：

{text:'修改',iconCls:'icon-edit',handler:function(){var row = $('#dg').datagrid('getSelected');$.messager.alert('你選擇的值是：', row.code); } }

2.5 Tree控件

樹形菜單用于web頁面以一個樹形結(jié)構顯示分層數(shù)據(jù)，它提供用戶展開、折疊、拖拽、編輯和異步加載等功能。

2.5.1 使用DOM標簽創(chuàng)建Tree

<ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li><span>Sub Folder 1</span> <ul><li> <span><a href="#">File 11</a></span></li></ul> </li> </ul> </li> <li> <span>File21</span> </li> </ul>

2.5.2 js腳本創(chuàng)建Tree

$(function(){$('#tt').tree({ url:'tree_data.json' }); });<ul id="tt"></ul>

tree_data.json文件內(nèi)容的數(shù)據(jù)格式：

[{"id":1,"text":"My Documents","children":[{"id":11,"text":"Photos","state":"closed","children":[{"id":111,"text":"Friend"},{"id":112,"text":"Wife"},{"id":113,"text":"Company"}]},{"id":12,"text":"Program Files","children":[{"id":121,"text":"Intel"},{"id":122,"text":"Java","attributes":{"p1":"Custom Attribute1","p2":"Custom Attribute2"}},{"id":123,"text":"Microsoft Office"},{"id":124,"text":"Games","checked":true}]},{"id":13,"text":"index.html"},{"id":14,"text":"about.html"},{"id":15,"text":"welcome.html"}] }]

屬性說明：

id：節(jié)點ID，對加載遠程數(shù)據(jù)很重要。
text：顯示節(jié)點文本。
state：節(jié)點狀態(tài)，‘open’ 或 ‘closed’，默認：‘open’。如果為’closed’的時候，將不自動展開該節(jié)點。
checked：表示該節(jié)點是否被選中。
attributes: 被添加到節(jié)點的自定義屬性。
children: 一個節(jié)點數(shù)組聲明了若干節(jié)點。

2.6 表單控件

form控件提供了各種方法來操作執(zhí)行表單字段，比如：ajax提交, load, clear等等。當提交表單的時候，還可以調(diào)用validate方法檢查表單是否合法。

<form id="ff" method="post"> <div> <label for="name">Name:</label> <input class="easyui-validatebox" type="text" name="name" data-options="required:true" /> </div> <div> <label for="email">Email:</label> <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" /> </div> </form>

2.6.1 驗證框

validatebox(驗證框)的設計目的是為了驗證輸入的表單字段是否有效。如果用戶輸入了無效的值，它將會更改輸入框的背景顏色，并且顯示警告圖標和提示信息。

創(chuàng)建驗證框：

方式一：通過DOM標簽創(chuàng)建驗證框

方式二：通過js腳本創(chuàng)建驗證框

<input id="email" />$('#email').validatebox({required: true, validType: 'email' });

運行效果：

完整代碼：

<body><script type="text/javascript">$(function(){$('#email').validatebox({ required: true, validType: 'URL' });});</script>郵箱地址:<input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" /><br/> </body>

2.6.2 輸入框

TextBox(文本框)是一個增強的輸入字段組件，它允許用戶非常簡單的創(chuàng)建一組表單。它是一個用于構建其他組合控件的基礎組件，如：combo，databox、spinner等。

創(chuàng)建輸入框：

方式一：通過標簽創(chuàng)建輸入框

方式二：通過js腳本創(chuàng)建輸入框

<input id="tt" />$('#tt').textbox({ required: true, iconCls:'icon-man', iconAlign:'left' });

運行效果：

完整代碼：

<body><script type="text/javascript">$(function(){$('#tt1').textbox({ required: true, //必填validType:'email',//驗證郵箱buttonText:'搜索',//追加按鈕iconCls:'icon-man', //追加圖標iconAlign:'left' //圖標位置(left、right) });});</script><form id="ff" method="post"> <div><label for="name">用戶名:</label><input id="tt1"/></div> <div><label for="password">密碼:</label><input id="tt2" class="easyui-textbox" data-options="required:true" /></div> </form> </body>

2.6.3 數(shù)值輸入框

數(shù)值輸入框是用來限制用戶只能輸入數(shù)值型數(shù)據(jù)的。他可以轉(zhuǎn)換一個輸入的元素到其他類型，比如：數(shù)字、百分比、貨幣等。

創(chuàng)建數(shù)值輸入框：

方式一：通過標簽創(chuàng)建；

方式二：通過js腳本創(chuàng)建；

// 驗證必填、最小值為0、有兩位小數(shù) $('#tt').numberbox({ required: true, min:0,precision:2,iconAlign:'left' });

運行效果：

完整代碼：

<body><script type="text/javascript">$(function(){$('#tt1').numberbox({ required: true, //必填min:0,//最小值 precision:2 //保留兩位小數(shù) });});</script><form id="ff" method="post"> <div><label for="name">人數(shù)有:</label><input id="tt1" style="width:300px"/></div> <div><label for="password">平均分:</label><input class="easyui-numberbox" data-options="iconCls:'icon-search',required: true,min:0,precision:2" style="width:300px"> </div> </form> </body>

2.6.4 日期輸入框

日期輸入框結(jié)合了一個可編輯的文本框控件和允許用戶選擇日期的下拉日歷面板控件。選擇的日期會自動轉(zhuǎn)變?yōu)橐粋€有效的日期然后填充到文本框中。選定的日期也可以被格式化為預定格式。

創(chuàng)建日期輸入框：

方式一：通過標簽創(chuàng)建；

方式二：通過js腳本創(chuàng)建；

<input id="tt" />$('#tt').datebox({ required: true });

運行效果：

完整代碼：

<body><script type="text/javascript">$(function(){$('#tt1').datebox({ required: true //必填 });});</script><form id="ff" method="post"> <div><label for="name">出生日期:</label> <input id="tt1" style="width:300px"/></div> <div><label for="password">入學時間:</label> <input class="easyui-datebox" data-options="iconCls:'icon-search',required: true" style="width:300px"> </div> </form> </body>

2.6.5 下拉列表框

下拉列表框顯示一個可編輯文本框和下拉式列表，用戶可以選擇一個值或多個值。用戶可以直接輸入文本到列表頂部或選擇一個或多個當前列表中的值。

創(chuàng)建下拉列表框：

方式一：通過標簽創(chuàng)建；

get_data.json文件內(nèi)容的格式：

[{"id":1,"text":"Java","desc":"Write once, run anywhere" },{"id":2,"text":"C#","desc":"One of the programming languages designed for the Common Language Infrastructure" },{"id":3,"text":"Ruby","selected":true,"desc":"A dynamic, reflective, general-purpose object-oriented programming language" },{"id":4,"text":"Perl","desc":"A high-level, general-purpose, interpreted, dynamic programming language" },{"id":5,"text":"Basic","desc":"A family of general-purpose, high-level programming languages" }]

方式二：通過js腳本創(chuàng)建；

<input id="cc" name="dept"> $('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text' });

方式三：通過select元素創(chuàng)建一個預定義結(jié)構的下拉框；

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>ditem4</option> <option>eitem5</option> </select>

方式四：創(chuàng)建2個有依賴關系的下拉框；

總結(jié)

以上是生活随笔為你收集整理的EasyUI框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： EasyUI-基本框架
下一篇：易邮邮件服务器(eyoumailserv

编程问答

EasyUI框架

一、概述

1.1 EasyUI是什么？

1.2 搭建開發(fā)環(huán)境

1.3 入門示例

二、常用控件

2.1 消息框

2.2 對話框

2.3 布局控件

2.4 表格控件

2.4.1 從現(xiàn)有表格元素基礎上創(chuàng)建DataGrid

2.4.2 通過table標簽創(chuàng)建DataGrid

2.4.3 通過js腳本創(chuàng)建DataGrid

2.4.4 DataGrid的主要方法

2.5 Tree控件

2.5.1 使用DOM標簽創(chuàng)建Tree

2.5.2 js腳本創(chuàng)建Tree

2.6 表單控件

2.6.1 驗證框

2.6.2 輸入框

2.6.3 數(shù)值輸入框

2.6.4 日期輸入框

2.6.5 下拉列表框

總結(jié)

一、概述

二、常用控件