JQuery EasyUI的一些常用組件
jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件，該框架提供了創(chuàng)建網頁所需的一切，幫助您輕松建立站點。
注：本次介紹的JQuery EasyUI版本為1.5版。
一.表單
form提供了各種方法來操作執(zhí)行表單字段，比如：ajax提交, load, clear等等。當提交表單的時候可以調用validate方法檢查表單是否有效。
用法：
使用form標簽創(chuàng)建
<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>
使用jquery實現表單的異步提交：
$('#ff').form({
url:...,
onSubmit: function(){
//提交表單時執(zhí)行的操作
},
success:function(data){
//提交成功后返回的結果
}
});
// 提交表單
$('#ff').submit();
通過以上操作就可以使用form表單將數據提交到后臺。
二.數據表格（數據表格）
DataGrid以表格形式展示數據，并提供了豐富的選擇、排序、分組和編輯數據的功能支持。DataGrid的設計用于縮短開發(fā)時間，并且使開發(fā)人員不需要具備特定的知識。它是輕量級的且功能豐富。單元格合并、多列標題、凍結列和頁腳只是其中的一小部分功能。
用法：
html標簽：
<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">編碼</th>
<th data-options="field:'name',width:100">名稱</th>
<th data-options="field:'price',width:100,align:'right'">價格</th>
</tr>
</thead>
</table>
用jquery接受數據：
$('#dg').datagrid({
url:'datagrid_data.json',
});
就可以將后臺數據以表格的方式展現到前臺。
三.可編輯數據表格
首先需要加載edatagrid擴展，加載完成后才能使用。
在HTML標簽里面創(chuàng)建數據表格：
<table id="tt" style="width:600px;height:200px"
title="Editable DataGrid"
singleSelect="true">
<thead>
<tr>
<th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
<th field="productid" width="100" editor="text">Product ID</th>
<th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
<th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
<th field="attr1" width="150" editor="text">Attribute</th>
</tr>
</thead>
</table>
jquery操作：
$('#tt').edatagrid({
url: 'datagrid_data.json',
saveUrl: ...,
updateUrl: ...,
destroyUrl: ...
});
就可以通過雙擊修改表格數據。
常用方法：
$('#tt').edatagrid("saveRow");//保存編輯行并發(fā)送到服務器
$('#tt').edatagrid("destroyRow");//銷毀當前選擇的行
$('#tt').edatagrid("addRow");//添加一個新的空行
以上所述是小編給大家介紹的JQuery EasyUI的一些常用組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
2012年開發(fā)人員的16款新鮮的jquery插件體驗分享
jQuery的是一個多瀏覽器的Javascript集合，以輕松地簡化了客戶端腳本的HTML;使用這些插件方法可以創(chuàng)建高效強大的網頁和Web程序2012-12-12
之前本人的工作和學習多以原生js 為主，對jQuery 一直都不是很了解，但jQuery 作為當今最優(yōu)秀的js 類庫之一，必須是要花時間好好學習下的，今天正好蛋疼，讀了里面一些代碼2011-04-04
今天小朋友寫了個程式，出現亂碼，將解決過程分享一下 為方便說明，將環(huán)境簡化，vs.net 2003, jquery-1.3.2.js, web service調用2010-02-02
jQuery+canvas實現簡單的球體斜拋及顏色動態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實現簡單的球體斜拋及顏色動態(tài)變換效果,通過jQuery+html5的canvas利用時間函數進行實時數學運算動態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下2016-01-01
JS 遍歷 json 和 JQuery 遍歷json操作完整示例
這篇文章主要介紹了JS 遍歷 json 和 JQuery 遍歷json操作,結合完整實例形式詳細分析了JavaScript與jQuery遍歷json格式數據的簡單實現技巧,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了jQuery實現簡單全選框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
在本篇文章里小編給大家分享了關于jQuery無沖突模式知識點分析內容，需要的朋友們可以學習下。2019-01-01
這篇文章主要介紹了jQuery簡單操作cookie的插件,以實例形式分析了jQuery操作cookie的插件功能定義與使用技巧,需要的朋友可以參考下2016-01-01
下面小編就為大家?guī)硪黄猨query實時獲取時間的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
jquery.Jwin.js 基于jquery的彈出層插件代碼
測試頁面需要引用jquery的js文件 插件文件jquery.Jwin.js jquery.Jwin插件的使用參數都有詳細說明2012-05-05