欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery EasyUI的一些常用组件

程序员文章站 2023-02-23 23:40:27
jquery easyui 是一个基于 jquery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点。 注:本次介绍的jquery e...

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的一些常用组件,希望对大家有所帮助