jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件，该框架提供了创建网页所需的一切，帮助您轻松建立站点。

创新互联公司专注于网站建设|企业网站维护|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖楼梯护栏等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身定制品质网站。

注：本次介绍的JQuery EasyUI版本为1.5版。

一.表单

form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。

用法：

使用form标签创建

 
  
 
    Name: 
     
  
 
  
 
    Email: 
     
  
  
 

 使用jquery实现表单的异步提交：

$('#ff').form({  
  url:...,  
  onSubmit: function(){
    //提交表单时执行的操作
  },  
  success:function(data){  
    //提交成功后返回的结果
  }  
});  
// 提交表单  
$('#ff').submit();

 通过以上操作就可以使用form表单将数据提交到后台。

二.数据表格（数据表格）

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

用法：

html标签：

 
  
 
    
 
      
编码
 
      
名称
 
      
价格
 
    
 
  
 

 用jquery接受数据：

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

 就可以将后台数据以表格的方式展现到前台。

三.可编辑数据表格

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

在HTML标签里面创建数据表格：

 
  
 
    
 
      
Item ID
 
      
Product ID
 
      
List Price
 
      
Unit Cost
 
      
Attribute
 
    
 
  
 

 jquery操作：

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

 就可以通过双击修改表格数据。

常用方法：

$('#tt').edatagrid("saveRow");//保存编辑行并发送到服务器
$('#tt').edatagrid("destroyRow");//销毁当前选择的行
$('#tt').edatagrid("addRow");//添加一个新的空行

以上所述是小编给大家介绍的JQuery EasyUI的一些常用组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！