常用组件
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:''
});
}
}
}
})
})
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="width:100px;">
<ul id="EasyUItree">ul>
div>
<div id="EasyUItabs" data-options="region:'center',title:'center title'" class="easyui-tabs" style="padding:5px;background:#eee;">
<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:''
});
}
}
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">
<link rel="stylesheet" type="text/css" href="validatebox/jeasyui.extensions.validatebox.css">
<script type="text/javascript" src="easyui/jquery.min.js">script>
<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>
<div class="easyui-dialog" id="edialog" title="添加/修改" style="width: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>
<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()">Submita>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Cleara>
div>
div>
div>
<table id="edatagrid" class="easyui-datagrid" fit=true title="DataGrid Complex Toolbar" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'empldata.json',fitColumns:true,method:'get',toolbar:'#ft'">
<thead>
<tr>
<th data-options="field:'id',width:20">编号th>
<th data-options="field:'username',width:20">姓名th>
<th data-options="field:'password',width:100,align:'right'">密码th>
<th data-options="field:'email',width:80,align:'right'">邮箱th>
<th data-options="field:'age',width:20" >年龄th>
<th data-options="field:'headImage',width:40,align:'center',formatter:showImg">图片th>
<th data-options="field:'department',width: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 '' }; 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', width: '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('警告', "
哈b
请先选择,在进行修改的!", 'warning'); }; }, "remove": function() { // 判断是否选中: var row = edatagrid.datagrid("getSelected"); if(row) { $.messager.confirm('确认对话框', '您确定要删除我吗?', function(r) { if(r) { // 删除 发生后台请求! $.messager.alert('提示', "删除完成!
", 'info'); } else { // 取消删除 } }); } else { // alert() //不使用原始的alert 太丑了,不同浏览器的区别 $.messager.alert('警告', "哈b
请先选择,在删除的!", '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": "[email protected]", "age": 34, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 2, "username": "roleAdmin", "password": "d563ad18fb8e2067eaee76ca27f3e8a3", "email": "[email protected]", "age": 25, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 3, "username": "admin1", "password": "6a4876827226fb87ffeb78edb2b1e7ad", "email": "[email protected]", "age": 25, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 4, "username": "admin2", "password": "d157d747dc2f6740e81ca9d84b669272", "email": "[email protected]", "age": 25, "department": { "id": 2, "name": "采购部" } }, { "id": 5, "username": "admin3", "password": "89335a5f0fdd015113e9acf90727cdce", "email": "[email protected]", "age": 25, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 6, "username": "admin4", "password": "12e4dc60e1813184b3e4552dedd7bf9b", "email": "[email protected]", "age": 25, "headImage": "img/1.png", "department": { "id": 3, "name": "销售部" } }, { "id": 7, "username": "admin5", "password": "02f9b7f759b5654d421c0ce458d16c28", "email": "[email protected]", "age": 25, "headImage": "img/1.png", "department": { "id": 1, "name": "IT部" } }, { "id": 8, "username": "admin6", "password": "138e943e0987d1fff7a4c367deedd4e3", "email": "[email protected]", "age": 25, "headImage": "", "department": { "id": 2, "name": "采购部" } }, { "id": 9, "username": "admin7", "password": "53bf9cd2cb250a9d82c3260b6d398d73", "email": "[email protected]", "age": 25, "department": { "id": 2, "name": "采购部" } }, { "id": 10, "username": "admin8", "password": "f6bd6e8ca007216fef1ddd9652e5d42f", "email": "[email protected]", "age": 25, "headImage": "" } ] }