常用组件
layout（布局）
通过样式对页面经行简单的布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/color.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script> $(function() { $("#EasyUItree").tree({ url: 'datatree.json', method: 'get', //添加事件 'onClick': function(node) { //判断是否有子节点 if(!node.children){ //判断我们是否已经有了该text if($("#EasyUItabs").tabs("exists",node.text)){ $("#EasyUItabs").tabs("select",node.text); } else{ $("#EasyUItabs").tabs("add",{ title: node.text, closable:true, content:'<iframe src="'+ node.url+'" frameborder="0" width="100%" height="100%"></iframe>' }); } } } }) }) </script> </head> <!--只用完整布局--> <body class="easyui-layout"> <!--上布局--> <div data-options="region:'north',title:'超级管理系统'" style="height:100px;"> XXXX超级管理系统 </div> <div data-options="region:'west',title:'菜单',split:true" style="100px;"> <!--引入树结构--> <ul id="EasyUItree"></ul> </div> <div id="EasyUItabs" data-options="region:'center',title:'center title'" class="easyui-tabs" style="padding:5px;background:#eee;"> <!--添加tabs--> <!--data-options="closable:true"選擇是否能夠點擊刪除'--> <div title="主页" data-options="closable:true" style="padding:20px;display:none;"> <h2>欢迎来到 超级NB的 0704 Xxx 管理系统 </h2> </div> </div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"> 杰大大的超级管理系统 </div> </body> </html>
然后在上下左右中加入我们需要的内容
tabs
这就是tabs,选择的时候会弹出来，做一个点击事件，如果没有子元素我们就需要点击的时候显示头部，并且跳转到页面
'onClick': function(node) {
//判断是否有子节点
if(!node.children){
//判断我们是否已经有了该text
if($("#EasyUItabs").tabs("exists",node.text)){
$("#EasyUItabs").tabs("select",node.text);
}
else{
$("#EasyUItabs").tabs("add",{
title: node.text,
closable:true,
content:'<iframe src="'+ node.url+'" frameborder="0" width="100%" height="100%"></iframe>'
});
}
}
From
这里我们直接引入，但是可以通过使用EasyUI扩展库的功能完成我们对密码的验证以及前台东西的相应展示
EasyUI扩展库的使用：
在百度上搜索我们就会有演示和列子，以及对应引入的文件
DataGrid
把我们json的东西对应的显示到我们的页面中，能过做一些非常好的东西
整体的html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--默认样式--> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <!--图标样式--> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <!-- 插入其中的css --> <link rel="stylesheet" type="text/css" href="validatebox/jeasyui.extensions.validatebox.css"> <!-- jquery 脚本--> <script type="text/javascript" src="easyui/jquery.min.js"></script> <!-- easyui 核心插件--> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <!-- 中文插件 --> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <!-- 扩展插件 --> <script type="text/javascript" src="js/jquery.jdirk.js"></script> <script type="text/javascript" src="validatebox/jeasyui.extensions.validatebox.rules.js"></script> <script type="text/javascript" src="js/crud.js"></script> </head> <body> <!--data-options="closed:true"隐藏菜单属性--> <div class="easyui-dialog" id="edialog" title="添加/修改" style="400px;padding:10px;" data-options="closed:true"> <form id="eform" method="post"> <table cellpadding="5"> <tr> <td>用户名:</td> <td><input class="easyui-textbox" type="text" name="username" data-options="required:true"></input></td> </tr> <tr> <td>密码:</td> <td><input id='v16' class="easyui-validatebox" type="password" name="password" data-options="required:true"></input></td> </tr> <tr> <td>确认密码:</td> <td><input id="v17" class="easyui-validatebox" type="password" name="qrpassword" data-options="required:true"></input></td> </tr> <tr> <td>邮箱:</td> <td><input class="easyui-textbox" name="email" data-options="validType:'email'"></input></td> </tr> <tr> <!-- 扩展 easyUI 约束为数字 --> <td>年龄:</td> <td><input class="easyui-validatebox" name="age" data-options="validType:['integer']"></input></td> </tr> <tr> <!--下拉框 --内容动态获取 --> <td>部门:</td> <td> <select id="ecombox" class="easyui-combobox" name="department.id"></select> </td> </tr> </table> </form> <div style="text-align:center;padding:5px"> <a href="javascript:void(0)" data-method="submitForm" class="easyui-linkbutton" onclick="submitForm()">Submit</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a> </div> </div> </div> <!--toolbar:'#ft'"工具箱栏位url:'empldata.json'发送一个请求获得json--> <table id="edatagrid" class="easyui-datagrid" fit=true title="DataGrid Complex Toolbar" style="700px;height:250px" data-options="rownumbers:true,singleSelect:true,url:'empldata.json',fitColumns:true,method:'get',toolbar:'#ft'"> <thead> <tr> <!--通过field找到相应的json对象中的数据--> <th data-options="field:'id',20">编号</th> <th data-options="field:'username',20">姓名</th> <th data-options="field:'password',100,align:'right'">密码</th> <th data-options="field:'email',80,align:'right'">邮箱</th> <th data-options="field:'age',20" >年龄</th> <th data-options="field:'headImage',40,align:'center',formatter:showImg">图片</th> <th data-options="field:'department',20,align:'center',formatter:showEmpl">部门</th> </tr> </thead> </table> <div id="ft" style="padding:2px 5px;"> <a href="#" class="easyui-linkbutton" data-method="add" iconCls="icon-add" plain="true">添加</a> <a href="#" class="easyui-linkbutton" data-method="update" iconCls="icon-edit" plain="true">修改</a> <a href="#" class="easyui-linkbutton" data-method="remove" iconCls="icon-remove" plain="true">删除</a> </div> </body> </html>
增删改查JQ
我们动态的添加并且实现crud操作
//图片展示 function showImg(value, row, index) { //图片展示 return '<img src="' + value + '" alt="没有头像" style=" 50px;height: 50px;" />' }; function showEmpl(value, row, index) { //vaule的值自己打印出来看 if(value) { //返回值为图片的位置 return value.name; } else { return "没有部门"; } }; $(function() { var edatagrid = $("#edatagrid"); var edialog = $("#edialog"); var eform = $("#eform"); var ecombox = $("#ecombox"); // 动态值 标签事件,绑定onClick,调用jiedada里的方法 // 绑定on事件 $("a[data-method]").on("click", function() { var method = $(this).data("method"); jiedada[method](); }) // 加载 部门的数据 $('#ecombox').combobox({ url: 'department.json', method: 'get', '100px', panelHeight: 'auto', valueField: 'id', textField: 'text', }); // 两次密码一致的验证 $("#v17").validatebox({ validType: ['equals["#v16","jquery"]'] }); var jiedada = { "add": function() { // 点击按钮 显示对话框 eform.form("clear"); // 清除之前的数据 jiedada.show(); // 显示密码框 edialog.dialog("open"); // 显示对话框 }, "update": function() { //判断是否选中 var row = edatagrid.datagrid("getSelected"); if(row) { // 因为和 添加共用一个form ,数据会冲突,提交时清空了数据 // 加载数据 -- load eform.form("load", row); // 隐藏 密码框: jiedada.hidden(); // 部门的数据没有回显 if(row.department) { ecombox.combobox("select", row.department.name); } // 打开对话框,回显数据 edialog.dialog("open"); // } else { // alert() //不使用原始的alert 太丑了,不同浏览器的区别 $.messager.alert('警告', "<h1 style='color:red'>哈b</h1>请先选择,在进行修改的!", 'warning'); }; }, "remove": function() { // 判断是否选中: var row = edatagrid.datagrid("getSelected"); if(row) { $.messager.confirm('确认对话框', '您确定要删除我吗?', function(r) { if(r) { // 删除 发生后台请求! $.messager.alert('提示', "<h1 >删除完成!</h1>", 'info'); } else { // 取消删除 } }); } else { // alert() //不使用原始的alert 太丑了,不同浏览器的区别 $.messager.alert('警告', "<h1 style='color:red'>哈b</h1>请先选择,在删除的!", 'warning'); }; }, 'submitForm': function() { // 数据是否复合验证 if(eform.form("validate")) { // 提交表单数据 // 关闭窗口 -- 清空表单中的数据 eform.form("clear"); edialog.dialog("close"); } else { $.messager.alert("", "数据有误,验证后在提交!") } }, "hidden": function() { //修改数据时 隐藏 密码框 $("#v16").closest("tr").hide(); $("#v17").closest("tr").hide(); }, "show": function() { //添加数据时 显示 密码框 $("#v16").closest("tr").show(); $("#v17").closest("tr").show(); } }; });
对饮的json
[{ "id": 1, "text": "系统管理", "state": "open", "children": [{ "id": 12, "text": "部门管理", "iconCls":"icon-lock", "url":"/department/index" },{ "id": 11, "text": "员工管理", "iconCls":"icon-man", "url":"empldataprid.html" }] },{ "id": 1, "text": "基本信息", "state": "open", "children": [{ "id": 11, "text": "菜单管理", "iconCls":"icon-man", "url":"/user.action" },{ "id": 12, "text": "角色管理", "iconCls":"icon-man", "url":"/customer/index" },{ "id": 12, "text": "资源管理", "iconCls":"icon-man", "url":"/06_panel.jsp" } ] }]
[{ "id":1, "text":"IT部", "selected":true },{ "id":2, "text":"采购部" },{ "id":3, "text":"销售部" }]
{ "total": 139, "rows": [ { "id": 1, "username": "admin", "password": "48d05cc43f3bfe2510394e8dfcef919a", "email": "admin@itsource.com", "age": 34, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 2, "username": "roleAdmin", "password": "d563ad18fb8e2067eaee76ca27f3e8a3", "email": "roleAdmin@itsource.cn", "age": 25, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 3, "username": "admin1", "password": "6a4876827226fb87ffeb78edb2b1e7ad", "email": "amdin1@itsource.cn", "age": 25, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 4, "username": "admin2", "password": "d157d747dc2f6740e81ca9d84b669272", "email": "amdin2@itsource.cn", "age": 25, "department": { "id": 2, "name": "采购部" } }, { "id": 5, "username": "admin3", "password": "89335a5f0fdd015113e9acf90727cdce", "email": "amdin3@itsource.cn", "age": 25, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 6, "username": "admin4", "password": "12e4dc60e1813184b3e4552dedd7bf9b", "email": "amdin4@itsource.cn", "age": 25, "headImage": "img/1.png", "department": { "id": 3, "name": "销售部" } }, { "id": 7, "username": "admin5", "password": "02f9b7f759b5654d421c0ce458d16c28", "email": "amdin5@itsource.cn", "age": 25, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 8, "username": "admin6", "password": "138e943e0987d1fff7a4c367deedd4e3", "email": "amdin6@itsource.cn", "age": 25, "headImage": "", "department": { "id": 2, "name": "采购部" } }, { "id": 9, "username": "admin7", "password": "53bf9cd2cb250a9d82c3260b6d398d73", "email": "amdin7@itsource.cn", "age": 25, "department": { "id": 2, "name": "采购部" } }, { "id": 10, "username": "admin8", "password": "f6bd6e8ca007216fef1ddd9652e5d42f", "email": "amdin8@itsource.cn", "age": 25, "headImage": "" } ] }