JQuery EasyUI入门
来源：互联网 发布：2016西决g6知乎 编辑：程序博客网 时间：2024/06/08 17:38
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>menubutton(菜单按钮)
<%@ 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> 0 0
- JQuery EasyUI入门
- Jquery EasyUI入门
- Jquery EasyUI入门
- jquery easyui 入门环境搭建
- jQuery之easyui的入门
- 【easyui学习笔记】1.jQuery EasyUI 入门初窥
- jQuery EasyUI系列教程之入门篇
- jQuery EasyUI
- jquery easyUI
- JQuery EasyUI
- jquery easyui
- jquery EasyUI
- jQuery EasyUI
- jQuery EasyUI
- jQuery EasyUI
- jquery easyui
- Jquery&EasyUi
- Jquery EasyUI
- 分布式企业应用系统服务部署和配置
- SSH小框架笔记
- Python第十天
- [51nod1203]JZPLCM
- 实时语音传输系统总结
- JQuery EasyUI入门
- Ubuntu环境编译FFmpeg3.2.2-for-android
- 单点登录SSO的实现原理
- oracle数据库创建序列和触发器实现id自增
- 101个MySQL的调节和优化技巧
- SpringMVC学习笔记
- 自定义分页标签详解
- 异常机制—学习笔记—java中异常处理
- 关于推荐系统中的特征工程
