JQuery EasyUI的常用組件

標籤：cti   輕量級   input   validate   開發人員   頁尾   建立   datebox   box   

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的一些常用組件。

 

JQuery EasyUI的常用組件