jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件，該框架提供了創建網頁所需的一切，幫助您輕松建立站點。

注：本次介紹的JQuery EasyUI版本為1.5版。

一.表單

form提供了各種方法來操作執行表單字段，比如：ajax提交, load, clear等等。當提交表單的時候可以調用validate方法檢查表單是否有效。

用法：

使用form標簽創建

?

<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(){ //提交表單時執行的操作 },    success:function(data){    //提交成功后返回的結果 }    
});    
// 提交表單    
$('#ff').submit();  

?通過以上操作就可以使用form表單將數據提交到后臺。

?

二.數據表格（數據表格）

?

DataGrid以表格形式展示數據，并提供了豐富的選擇、排序、分組和編輯數據的功能支持。DataGrid的設計用于縮短開發時間，并且使開發人員不需要具備特定的知識。它是輕量級的且功能豐富。單元格合并、多列標題、凍結列和頁腳只是其中的一小部分功能。

用法：

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標簽里面創建數據表格：

<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");//保存編輯行并發送到服務器
$('#tt').edatagrid("destroyRow");//銷毀當前選擇的行
$('#tt').edatagrid("addRow");//添加一個新的空行

?以上就是jquery easyui的一些常用組件。

?

轉載于:https://www.cnblogs.com/wujianrui/p/7143385.html

總結

以上是生活随笔為你收集整理的JQuery EasyUI的常用组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。