JQueryEasyUI的一些常用組件

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

創(chuàng)新互聯(lián)公司專(zhuān)注于網(wǎng)站建設(shè)|企業(yè)網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋樓梯護(hù)欄等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷(xiāo)售的產(chǎn)品，結(jié)合品牌形象的塑造，量身定制品質(zhì)網(wǎng)站。

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

一.表單

form提供了各種方法來(lái)操作執(zhí)行表單字段，比如：ajax提交, load, clear等等。當(dāng)提交表單的時(shí)候可以調(diào)用validate方法檢查表單是否有效。

用法：

使用form標(biāo)簽創(chuàng)建

 
  
 
    Name: 
     
  
 
  
 
    Email: 
     
  
  
 

 使用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ì)用于縮短開(kāi)發(fā)時(shí)間，并且使開(kāi)發(fā)人員不需要具備特定的知識(shí)。它是輕量級(jí)的且功能豐富。單元格合并、多列標(biāo)題、凍結(jié)列和頁(yè)腳只是其中的一小部分功能。

用法：

html標(biāo)簽：

 
  
 
    
 
      
編碼
 
      
名稱(chēng)
 
      
價(jià)格
 
    
 
  
 

 用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ù)表格：

 
  
 
    
 
      
Item ID
 
      
Product ID
 
      
List Price
 
      
Unit Cost
 
      
Attribute
 
    
 
  
 

 jquery操作：

$('#tt').edatagrid({  
  url: 'datagrid_data.json',  
  saveUrl: ...,  
  updateUrl: ...,  
  destroyUrl: ...  
}); 

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

常用方法：

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

以上所述是小編給大家介紹的JQuery EasyUI的一些常用組件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！