JQuery EasyUI入门

@(JavaScript)[jQuery, EasyUI, 入门]

  • JQuery EasyUI入门

    • 基本概述
    • 案例
      • Layout布局
      • Accordion手风琴
      • Tab选项卡
        • 同一选项卡只能打开一个
      • messager消息框
      • menubutton菜单按钮
      • datagrid数据表格
        • 数据表格的基本使用

          • json内容
          • html文件
        • 带编辑功能的数据表格
          • json内容
          • html文件
        • 跨行跨列的数据表格
          • json内容
          • html文件
        • datagrid处理复杂json数据
        • datagrid使用load方法
      • combobox下拉列表框
        • json内容
        • html文件
      • combotree下拉树

基本概述

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

——参考《百度百科》

官网：Jquery EasyUI官网、Jquery EasyUI中文网

PS：可以到官网或者中文网完整的学习easyUI的组件，以下是一些自己写的小案例。

案例

Layout(布局)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>layout测试</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css"><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script></head><body class="easyui-layout"><!-- 分为五个区域 --><div style="height: 100px;" data-options="region:'north'">北部区域</div><div style="width: 200px;" data-options="region:'west'">西部区域</div><div style="" data-options="region:'center'">中心区域</div><div style="width: 100px;" data-options="region:'east'">东部区域</div><div style="height: 50px;" data-options="region:'south'">南部区域</div></body>
</html>

Accordion(手风琴)

  <div style="" data-options="region:'center'"><div class="easyui-tabs" data-options="fit:true"><div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div><div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div></div></div>

Tab(选项卡)

  <div style="" data-options="region:'center'"><div class="easyui-tabs" data-options="fit:true"><div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div><div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div></div></div>

同一选项卡只能打开一个

  <div style="width: 200px;" data-options="region:'west'"><div class="easyui-accordion" data-options="fit:true"><div data-options="iconCls:'icon-save'" title="系统菜单"><a id="btn" class="easyui-linkbutton">按钮</a></div><div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div></div></div><div style="" data-options="region:'center'"><div id="et" class="easyui-tabs" data-options="fit:true"><div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div><div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div></div></div><script type="text/javascript">$(function(){$("#btn").click(function() {var isExists = $("#et").tabs("exists", "标题");if(isExists) {$("#et").tabs("select","标题");} else {$("#et").tabs("add", {title:"标题",closable:true,iconCls:"icon-save",content:"<iframe frameborder='no' height='100%' width='100%' src='3-tabs.jsp'></iframe>"});}});});</script>

messager(消息框)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Messager的使用</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css"><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript">$(function() {// $.messager.alert("标题", "一条消息", "info");/* $.messager.confirm("标题", "确认消息？", function(val) {alert(val);}); *//* $.messager.prompt("标题", "请输入", function(message) {alert(message);}); */// $.messager.progress();$.messager.show({title:'标题',msg:'这是一条消息，五秒后会消失',timeout:5000,showType:'slide',showSpeed:1000});});</script></head><body></body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>MenuButton的使用</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css"><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script></head><body><a id="mb" class="easyui-menubutton" data-options="iconCls:'icon-help', menu:'#menudiv'">功能菜单</a><div id="menudiv"><div data-options="iconCls:'icon-save'">保存</div><div data-options="iconCls:'icon-edit'">修改</div><div class="menu-sep"></div><div data-options="iconCls:'icon-remove'">删除</div></div></body>
</html>

datagrid(数据表格)

数据表格的基本使用

json内容
{"total": 100,"rows":[{"id":"001","name":"王五","price":31232,"age":20},{"id":"002","name":"赵六","price":32132,"age":20}]}
html文件
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid的使用</title>
<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript"src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">$(function() {$("#dg").datagrid({url:'datagrid_data.json',columns:[[{field:"id",title:"编号",checkbox:true},{field:"name",title:"姓名"},{field:"price",title:"价格"},{field:"age",title:"年龄"}]],rownumbers:true,toolbar: [{text:'编辑',iconCls: 'icon-edit',handler: function(){alert('edit');}},{text:'帮助',iconCls: 'icon-help',handler: function(){alert('help');}}],pagination:true,pageList:[10,30,50]});});</script></head>
<body><!-- 1.将页面中静态HTML代码渲染为datagrid样式 --><table class="easyui-datagrid"><thead><tr><th data-options="field:'id'">编号</th><th data-options="field:'name'">姓名</th><th data-options="field:'price'">价格</th></tr></thead><tbody><tr><td>001</td><td>张三</td><td>123</td></tr><tr><td>002</td><td>李四</td><td>321</td></tr></tbody></table><hr/><!-- 2.发送ajax请求获取动态json数据动态创建datagrid --><table class="easyui-datagrid" data-options="url:'datagrid_data.json'"><thead><tr><th data-options="field:'id'">编号</th><th data-options="field:'name'">姓名</th><th data-options="field:'price'">价格</th></tr></thead></table><hr/><!-- 3.调用easyUI提供的API动态创建datagrid --><table id="dg"></table></body>
</html>

带编辑功能的数据表格

json内容
{"total": 100,"rows":[{"id":"001","name":"张三","price":12345,"age":20,"birthday":"1995-01-01"},{"id":"002","name":"李四","price":54321.2,"age":30,"birthday":"1996-01-01"},{"id":"003","name":"王五","price":123.45,"age":20,"birthday":"1997-08-31"},{"id":"004","name":"赵六","price":999.11,"age":50,"birthday":"1995-05-01"},{"id":"005","name":"钱七","price":888,"age":24,"birthday":"1995-02-21"}]}
html文件
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid的使用——编辑功能</title>
<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript"src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">// 全局变量// 选中行索引var editIndex;$(function() {$("#dg").datagrid({url:'datagrid_data.json',columns:[[{field:"id",title:"编号",checkbox:true,width:100},{field:"name",title:"姓名",editor:{type:'validatebox',options:{required:true}},width:100},{field:"price",title:"价格",editor:{type:'numberbox',options:{precision:2,required:true}},width:100},{field:"age",title:"年龄",editor:{type:'numberbox',options:{precision:0,required:true}},width:100},{field:"birthday",title:"生日",editor:{type:'datebox',options:{required:true}},width:100},]],striped : true,    // 斑马线rownumbers:true,   // 行号toolbar: [{text:'添加',iconCls: 'icon-add',handler: function(){// 如果选中行，第二次点击则保存并添加新的一行if(editIndex != undefined) {$("#dg").datagrid("endEdit", editIndex);}if(editIndex == undefined){// 清除所有选择$("#dg").datagrid("clearSelections");$('#dg').datagrid('insertRow',{index: 0,row: {}});editIndex = 0;$("#dg").datagrid("beginEdit", editIndex);}}},{text:'编辑',iconCls: 'icon-edit',handler: function(){// 如果选中行，第二次点击则保存if(editIndex != undefined) {$("#dg").datagrid("endEdit", editIndex);} else {var rows = $("#dg").datagrid('getSelections');// 获取选中行if(rows.length != 1) {$.messager.alert("提示消息","请选择单行!!!");} else {editIndex = $("#dg").datagrid("getRowIndex", rows[0]);$("#dg").datagrid("beginEdit", editIndex);}}}},{text:'删除',iconCls: 'icon-remove',handler: function(){var rows = $("#dg").datagrid('getSelections');// 删除选中行for(var i = 0; i < rows.length; i++) {$("#dg").datagrid('deleteRow',$("#dg").datagrid("getRowIndex", rows[i]));}}},{text:'保存',iconCls: 'icon-save',handler: function(){if(editIndex != undefined) {$("#dg").datagrid("endEdit", editIndex);}}},{text:'取消',iconCls: 'icon-cancel',handler: function(){if(editIndex != undefined) {// 取消编辑$("#dg").datagrid("cancelEdit", editIndex);// 获取编辑行的id，如果是undefined，证明未定义，可以删除if($('#dg').datagrid('getRows')[editIndex].id == undefined){$("#dg").datagrid('deleteRow',editIndex);}editIndex = undefined;}}}],pagination:true,pageList:[5,10,30,50],onAfterEdit : function(rowIndex, rowData, changes){console.info(rowData);editIndex = undefined;},onDblClickRow: function(rowIndex, rowData, changes) {console.info(rowIndex);if(editIndex == undefined) {$('#dg').datagrid('beginEdit',rowIndex);editIndex = rowIndex;}}});});</script>
</head>
<body><!-- 3.调用easyUI提供的API动态创建datagrid --><table id="dg"></table>
</body>
</html>

跨行跨列的数据表格

json内容
{"total": 100,"rows":[{"id":"001","name":"张三","price":12345,"age":20,"birthday":"1995-01-01"},{"id":"002","name":"李四","price":54321.2,"age":30,"birthday":"1996-01-01"},{"id":"003","name":"王五","price":123.45,"age":20,"birthday":"1997-08-31"},{"id":"004","name":"赵六","price":999.11,"age":50,"birthday":"1995-05-01"},{"id":"005","name":"钱七","price":888,"age":24,"birthday":"1995-02-21"}]}
html文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid的使用——标题跨行跨列</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">// 全局变量// 选中行索引var editIndex;$(function() {$("#dg").datagrid({url:'datagrid_data.json',columns:[[{field:"id",title:"编号",checkbox:true,width:100,rowspan:2},{field:"name",title:"姓名",editor:{type:'validatebox',options:{required:true}},width:100,rowspan:2},{field:"price",title:"价格",editor:{type:'numberbox',options:{precision:2,required:true}},width:100,rowspan:2},{title:"其他信息",colspan:2}],[{field:"age",title:"年龄",editor:{type:'numberbox',options:{precision:0,required:true}},width:100},{field:"birthday",title:"生日",editor:{type:'datebox',options:{required:true}},width:100}]],striped : true,    // 斑马线rownumbers:true    // 行号});});</script>
</head>
<body><!-- 3.调用easyUI提供的API动态创建datagrid --><table id="dg"></table>
</body>
</html>

datagrid处理复杂json数据

 {field:'noticebill.telephone',title : '联系方式',width : 100,align : 'center',formatter: function(value,row,index) {return row.noticebill['telephone'];}}

datagrid使用load方法

 $(function(){//提供一个工具方法，作用是将表单中所有的输入项和值转换为json数据$.fn.serializeJson=function(){var serializeObj={};var array=this.serializeArray();$(array).each(function(){if(serializeObj[this.name]){if($.isArray(serializeObj[this.name])){serializeObj[this.name].push(this.value);}else{serializeObj[this.name]=[serializeObj[this.name],this.value];}}else{serializeObj[this.name]=this.value;}});return serializeObj;}$("#btn").click(function(){//调用上面提供的工具方法，将指定的表单输入项转为json数据，作为过滤条件var p = $("searchForm").serializeJson()     //{key:value,key:value}console.info(p);// 重新发送ajax，提供过滤条件$("#grid").datagrid('load', p);$("#searchForm").get(0).reset();// 重置查询表单$("#searchWindow").window("close"); // 关闭窗口});});

combobox(下拉列表框)

json内容

[{"id":"001","text":"软件部"},{"id":"002","text":"市场部"},{"id":"003","text":"人事部"}
]

html文件

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Combobox的使用</title>
<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript"src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"></script></head>
<body><!-- 1. 将页面静态的html代码渲染为combobox样式 --><!--<select id="cb" class="easyui-combobox" name="dept"><option value="aa">研发部</option><option>市场部</option><option>人事部</option></select>--><!-- 2. html标签发送ajax请求获取动态json数据创建combobox --><!--<input id="cc" class="easyui-combobox" name="dept"data-options="valueField:'id',textField:'text',url:'combobox_data.json'" />--><!-- 3. JavaScript发送ajax请求获取动态json数据创建combobox --><input id="cd" class="easyui-combobox" name="dept"/><script type="text/javascript">$("#cd").combobox({url:'combobox_data.json',valueField:'id',textField:'text'});</script>
</body>
</html>

combotree(下拉树)

[{"id":1,"text":"My Documents","children":[{"id":11,"text":"Photos","state":"closed","iconCls":"icon-save","children":[{"id":111,"text":"Friend"},{"id":112,"text":"Wife"},{"id":113,"text":"Company"}]},{"id":12,"text":"Program Files","children":[{"id":121,"text":"Intel"},{"id":122,"text":"Java","attributes":{"p1":"Custom Attribute1","p2":"Custom Attribute2"}},{"id":123,"text":"Microsoft Office"},{"id":124,"text":"Games","checked":true}]},{"id":13,"text":"index.html"},{"id":14,"text":"about.html"},{"id":15,"text":"help.html","iconCls":"icon-help"}]}]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Combotree的使用</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">$(function(){$("#ct2").combotree({url:'combotree_data.json',width:200,required:true});});</script>
</head>
<body><!-- 方式1：html标签 --><select id="ct1" name="ct1" class="easyui-combotree" style="width:200px;" data-options="url:'combotree_data.json',required:true"></select><hr/><!-- 方式2：JavaScript代码 --><input id="ct2" name="ct2">
</body>
</html>

JQuery EasyUI入门相关推荐

  1. easyui java1234_李炎恢jQuery EasyUI视频教程 下载

    李炎恢jQuery EasyUI视频教程  下载 01.[jQuery EasyUI]第1章 jQuery EasyUI入门 02.[jQuery EasyUI]第2章 使用EasyUI 03.[jQ ...

  2. 网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

    简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它 ...

  3. JQuery EasyUI学习框架

    前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...

  4. Easyui入门视频教程 第01集---认识Easyui

    认识EasyUI 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax b ...

  5. EasyUI学习总结(一)——EasyUI入门

    一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1 下载完成之 ...

  6. Easy-UI入门案例

    Easy-UI是封装了前台逻辑以及显示的基于Jquery技术的前端框架. Easy-UI特点 EasyUI支持两种渲染方式分别为javascript方式(如:$('#p').panel({-}))和h ...

  7. EasyUI入门（DataGrid）

    DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识.它是轻量级的且功能丰富.单元格合并. ...

  8. EasyUI入门（LinkButton，Tabs）

    今天在来按照文档上的Demo写一下效果. 一.LinkButton(按钮) 按钮组件使用超链接按钮创建.它使用一个普通的<a>标签进行展示.它可以同时显示一个图标和文本,或只有图标或文字. ...

  9. JQuery EasyUI的常用组件

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...

最新文章

  1. ADO.NET Entity Framework 学习（1） [ZT]
  2. HtmlUnit设置代理并解析IFrame页面
  3. huggingface实操_Transformers 简介（上）
  4. linux iopen i2c dev,i2c-dev - Linux驱动子系统之I2C_Linux编程_Linux公社-Linux系统门户网站...
  5. connect函数在阻塞和非阻塞模式下的行为
  6. vue 引用网络css_vue如何引用其他组件（css和js）
  7. sqlserver有外键无法创建触发器_数据库不使用外键的 9 个理由
  8. EJB3.0零碎要点---在部署web本地客户端的时候org.apache.jasper.JasperException: java.lang.ClassCastException: $Proxy
  9. 64位CentOS源码编译方式安装wine
  10. Android Studio 常用快捷键
  11. linux 终端命令字体大小,如何实现更改Linux终端字体的种类和大小
  12. 如何培训新进的软件测试人员
  13. 【LeetCode - 317】离建筑物最近的距离
  14. 后氧传感器正常数据_怎么看氧传感器数据流
  15. 在北京尚学堂的第三个周末
  16. 如何设置Sketch快捷键，Sketch提升效率的常用技巧
  17. 计算机毕业实习报告范文,大学计算机专业毕业实习报告范文
  18. 网页查看计算机硬件,怎么查看电脑硬件设备的Guid值?
  19. matlab有一座小山,那里，有一座哭泣的小山作文1000字
  20. JVM-04.垃圾回收机制

热门文章

  1. C语言，期末复习之编写程序返回三个整数中的中间数
  2. AttributedString 图片间距问题
  3. 单节点Rancher 2.5.1 证书过期报错 x509: certificate has expired or is not yet valid 解决方案
  4. 【C语言】（for循环嵌套）找出1000以内的水仙花数
  5. script和scriptreplay命令实现终端录制和回放。
  6. 测试用例组织结构_用例和组织结构
  7. python 图像格式转换_如何用六行Python构建图像类型转换器
  8. golang.org/x/lint安装失败
  9. Python爬虫必备技能，Xpath提取数据规格详解
  10. 利用Python多进程执行，加快MySQL批量添加数据的执行速度