JQuery EasyUI的一些常用組件
jQuery EasyUI 是一個(gè)基于 jQuery 的框架，集成了各種用戶界面插件，該框架提供了創(chuàng)建網(wǎng)頁(yè)所需的一切，幫助您輕松建立站點(diǎn)。
注：本次介紹的JQuery EasyUI版本為1.5版。
一.表單
form提供了各種方法來(lái)操作執(zhí)行表單字段，比如：ajax提交, load, clear等等。當(dāng)提交表單的時(shí)候可以調(diào)用validate方法檢查表單是否有效。
用法：
使用form標(biāo)簽創(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實(shí)現(xiàn)表單的異步提交：
$('#ff').form({
url:...,
onSubmit: function(){
//提交表單時(shí)執(zhí)行的操作
},
success:function(data){
//提交成功后返回的結(jié)果
}
});
// 提交表單
$('#ff').submit();
通過(guò)以上操作就可以使用form表單將數(shù)據(jù)提交到后臺(tái)。
二.數(shù)據(jù)表格（數(shù)據(jù)表格）
DataGrid以表格形式展示數(shù)據(jù)，并提供了豐富的選擇、排序、分組和編輯數(shù)據(jù)的功能支持。DataGrid的設(shè)計(jì)用于縮短開發(fā)時(shí)間，并且使開發(fā)人員不需要具備特定的知識(shí)。它是輕量級(jí)的且功能豐富。單元格合并、多列標(biāo)題、凍結(jié)列和頁(yè)腳只是其中的一小部分功能。
用法：
html標(biāo)簽：
<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'">價(jià)格</th>
</tr>
</thead>
</table>
用jquery接受數(shù)據(jù)：
$('#dg').datagrid({
url:'datagrid_data.json',
});
就可以將后臺(tái)數(shù)據(jù)以表格的方式展現(xiàn)到前臺(tái)。
三.可編輯數(shù)據(jù)表格
首先需要加載edatagrid擴(kuò)展，加載完成后才能使用。
在HTML標(biāo)簽里面創(chuàng)建數(shù)據(jù)表格：
<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: ...
});
就可以通過(guò)雙擊修改表格數(shù)據(jù)。
常用方法：
$('#tt').edatagrid("saveRow");//保存編輯行并發(fā)送到服務(wù)器
$('#tt').edatagrid("destroyRow");//銷毀當(dāng)前選擇的行
$('#tt').edatagrid("addRow");//添加一個(gè)新的空行
以上所述是小編給大家介紹的JQuery EasyUI的一些常用組件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- Jquery Easyui進(jìn)度條組件Progress使用詳解（8）
- Jquery Easyui選項(xiàng)卡組件Tab使用詳解（10）
- Jquery Easyui菜單組件Menu使用詳解（15）
- Jquery Easyui自定義下拉框組件使用詳解（21）
- Jquery Easyui搜索框組件SearchBox使用詳解（19）
- Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
- jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)
- jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
相關(guān)文章
jQuery文字提示與圖片提示效果實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery文字提示與圖片提示效果實(shí)現(xiàn)方法,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)與頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-07-07
要對(duì)頁(yè)面上的某個(gè)元素進(jìn)行操作，首先要選中它，這就要用到選擇符。2010-03-03
jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能示例
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能,結(jié)合實(shí)例形式分析了jQuery基于ajax動(dòng)態(tài)創(chuàng)建頁(yè)面table元素相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jQuery實(shí)現(xiàn)簡(jiǎn)單的下拉菜單導(dǎo)航功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的下拉菜單導(dǎo)航功能,涉及jQuery針對(duì)頁(yè)面元素的遍歷與節(jié)點(diǎn)修改相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
今天小編就為大家分享一篇jquery獲取元素到屏幕四周可視距離的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法
這篇文章主要介紹了jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法,涉及jQuery操作文本框的技巧,需要的朋友可以參考下2015-04-04
下面小編就為大家?guī)?lái)一篇淺談jquery之on()綁定事件和off()解除綁定事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
Jquery對(duì)新插入的節(jié)點(diǎn) 綁定Click事件失效的解決方法
下面小編就為大家?guī)?lái)一篇Jquery對(duì)新插入的節(jié)點(diǎn) 綁定Click事件失效的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jQuery實(shí)現(xiàn)的粘性滾動(dòng)導(dǎo)航欄效果實(shí)例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的粘性滾動(dòng)導(dǎo)航欄效果,涉及jQuery插件smint的相關(guān)使用技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下2017-10-10
下面小編就為大家?guī)?lái)一篇輪播的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07