JQuery EasyUI的一些常用组件

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的一些常用组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Jquery Easyui选项卡组件Tab使用详解（10）

    Jquery Easyui选项卡组件Tab使用详解（10）

    本文实例为大家分享了Jquery Easyui选项卡组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-tabs" style="width: 400px;height: 250px"> <div title="Tab1" data-options="closable:true"> tab1 </div> <div title=&q

  • jQuery EasyUI框架中的Datagrid数据表格组件结构详解

    基础DOM结构 什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而"完整"的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构. 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个"基础完整DOM结构"是什么样子的: <!-- da

  • Jquery Easyui进度条组件Progress使用详解（8）

    Jquery Easyui进度条组件Progress使用详解（8）

    本文实例为大家分享了Jquery Easyui进度条组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div> JS调用加载 <div id="box" style="width: 400px;">

  • Jquery Easyui搜索框组件SearchBox使用详解（19）

    Jquery Easyui搜索框组件SearchBox使用详解（19）

    本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <input id="ss" class="easyui-searchbox" style="width:300px" data-options="prompt:'Please Input Value',menu:'#box'"> </input> <div id="b

  • Jquery Easyui菜单组件Menu使用详解（15）

    Jquery Easyui菜单组件Menu使用详解（15）

    本文实例为大家分享了Jquery Easyui菜单组件的实现代码,供大家参考,具体内容如下 加载方式 菜单组件通常用于快捷菜单,在加载方式上,通过 class 或 JS 进行设置为菜单组件.然后,再通过 JS 事件部分再响应. <div id="box" class="easyui-menu"> <div>新建</div> <div> <span>打开</span> <!--二次菜单--&

  • jQuery EasyUI基础教程之EasyUI常用组件(推荐)

    jQuery EasyUI基础教程之EasyUI常用组件(推荐)

    本文主要内容是介绍EasyUI的一些常用组件的使用,都是一些非常基础的知识,适合入门者学习,主要包括Base(基础).Layout(布局).菜单和按钮.表单.窗口.表格和树等的使用.要求完全掌握这些内容,学会查阅文档,了解开发基本思想.如果想进一步深入学习,可以直接去官网进行学习,查阅文档等http://www.jeasyui.com/. 一.简介 EasyUI是一种第三方组织开发的,开源的,功能强大的,基于jquery的插件库. 主要可以用于web的后台前端.jQuery EasyUI 提供易

  • Jquery Easyui自定义下拉框组件使用详解（21）

    Jquery Easyui自定义下拉框组件使用详解（21）

    本文实例为大家分享了Jquery Easyui自定义下拉框组件的实现代码,供大家参考,具体内容如下 加载方式 JS调用加载 自定义下拉框不能通过标签的方式进行创建. <input id="box" /> <script> $(function () { //JS 加载调用 $('#box').combo({ required : true, multiple : true, }); }); </script> 属性列表 <script>

  • Jquery下EasyUI组件中的DataGrid结果集清空方法

    Jquery下EasyUI组件中的DataGrid结果集清空方法

    我们有一个模块如下图,要求选择"地区"及"代维公司"后,刷新第一个DataGrid框体 并以第一个结果集中的行为数据条件点击完成下一个框体的检索 现在我们已完成相应功能,并在选择"地区"及"代维公司"并保证这两个选项同时有值后,自动刷新第一个DataGrid(DG1)结果集 但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果 我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是

  • Jquery组件easyUi实现手风琴(折叠面板)示例

    Jquery组件easyUi实现手风琴(折叠面板)示例

    本文是为大家分享了Jquery easyUi手风琴效果,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Accordion - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css&qu

  • JQuery EasyUI的一些常用组件

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <

  • jQuery Easyui 下拉树组件combotree

    jQuery Easyui 下拉树组件combotree

    jQuery EasyUI 组合树(ComboTree) 和组合框的用法差不多,只是在显示上有点差别:一个显示成树状结构,一个显示成列表结构. 项目中做角色授权时,需要做一个下拉框带树结构的 并且可以多选的组件,就想到了easyui的combotree,有关这个组件的用法废话不多说,直接上代码 $('#bianhao').combotree({ url : urlg2 + '/tbdefaultroll/selectByLevel?belongLevel=' + $('#jibie').comb

  • jQuery EasyUI Accordion可伸缩面板组件使用详解

    jQuery EasyUI Accordion可伸缩面板组件使用详解

    Accordion 可伸缩面板组件,基于panel,示例如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type=

  • jQuery EasyUI ProgressBar进度条组件

    jQuery EasyUI ProgressBar进度条组件

    ProgressBar(进度条)组件,这个还是挺好玩的,我们在自己做点什么的时候经常能用到,比如上传下载文件.导入导出文档啊.载入网页等等. 应用场景很多,使用起来还很简单. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javas

  • 为Jquery EasyUI 组件加上清除功能的方法(详解)

    为Jquery EasyUI 组件加上清除功能的方法(详解)

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • jQuery EasyUI 组件加上“清除”功能实例详解

    jQuery EasyUI 组件加上“清除”功能实例详解

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • 为JQuery EasyUI 表单组件增加焦点切换功能的方法

    为JQuery EasyUI 表单组件增加焦点切换功能的方法

    1.背景说明 在使用 JQuery  EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabindex 不起作用,因为页面看到的元素,是生成的,没有tabindex 属性,而真实的元素被隐藏了.本文通过一个自定义函数,实现Tab 和 回车键的焦点切换功能. 2.函数定义 通过捕获窗口按件,对回车和Tab键进行了热点切换处理.先根据当前焦点,获取需要tabindex 属性,加1后为下一焦点无素的属性

  • jQuery EasyUI Draggable拖动组件

    上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1).使用class加载方式: <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> (2).JS 加载调用

随机推荐