JQuery EasyUI的一些常用組件

發(fā)布時間：2020-10-04 14:05:31 來源：腳本之家閱讀：145 作者：吳建銳欄目：web開發(fā)

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

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

一.表單

form提供了各種方法來操作執(zhí)行表單字段，比如：ajax提交, load, clear等等。當(dāng)提交表單的時候可以調(diào)用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實現(xiàn)表單的異步提交：

$('#ff').form({  
  url:...,  
  onSubmit: function(){
    //提交表單時執(zhí)行的操作
  },  
  success:function(data){  
    //提交成功后返回的結(jié)果
  }  
});  
// 提交表單  
$('#ff').submit();

通過以上操作就可以使用form表單將數(shù)據(jù)提交到后臺。

二.數(shù)據(jù)表格（數(shù)據(jù)表格）

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

用法：

html標簽：

<table class="easyui-datagrid"  
    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接受數(shù)據(jù)：

$('#dg').datagrid({  
  url:'datagrid_data.json',   
});

就可以將后臺數(shù)據(jù)以表格的方式展現(xiàn)到前臺。

三.可編輯數(shù)據(jù)表格

首先需要加載edatagrid擴展，加載完成后才能使用。

在HTML標簽里面創(chuàng)建數(shù)據(jù)表格：

<table id="tt"  
    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: ...  
});

就可以通過雙擊修改表格數(shù)據(jù)。

常用方法：

$('#tt').edatagrid("saveRow");//保存編輯行并發(fā)送到服務(wù)器
$('#tt').edatagrid("destroyRow");//銷毀當(dāng)前選擇的行
$('#tt').edatagrid("addRow");//添加一個新的空行

以上所述是小編給大家介紹的JQuery EasyUI的一些常用組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細節(jié)

JQuery EasyUI的一些常用組件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽