JQuery EasyUI入门
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>
梦里梦外;
我就是我
刺骨的言语ヽ痛彻心扉
爱被打了一巴掌
ゞ 浴缸里的玫瑰
╰+攻爆jí腚メ
还没有评论，来说两句吧...