前端——EasyUI基本使用
1、easyUI使用
一、頁面佈局javascript
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</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元素描述每一個區域 -->
<div title="XXX系統" style="height: 100px" data-options="region:'north'">北部區域</div>
<div title="西部菜單" style="width: 200px" data-options="region:'west'">西部區域</div>
<div 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>
二、摺疊面板css
<div title="西部菜單" style="width: 200px" data-options="region:'west'">
<!-- 製做accordion摺疊面板
fit:true----自適應(填充父容器)
-->
<div class="easyui-accordion" data-options="fit:true">
<!-- 使用子div表示每一個面板,添加圖標 -->
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<div title="面板二">2222</div>
<div title="面板三">3333</div>
</div>
</div>
三、Tabs選項面板html
<div data-options="region:'center'">
<!-- 製做一個tabs選項卡面板 -->
<div class="easyui-tabs" data-options="fit:true">
<!-- 使用子div表示每一個面板 -->
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<!--data-options="closable:true"：小XX-->
<div data-options="closable:true" title="面板二">2222</div>
<div title="面板三">3333</div>
</div>
</div>
四、動態添加一個選項卡java
<div title="西部菜單" style="width: 200px" data-options="region:'west'">
<!-- 製做accordion摺疊面板
fit:true----自適應(填充父容器)
-->
<div class="easyui-accordion" data-options="fit:true">
<!-- 使用子div表示每一個面板,添加圖標 -->
<div data-options="iconCls:'icon-cut'" title="面板一">
<a class="easyui-linkbutton" id="btn1">添加一個選項卡</a>
<script>
$("#btn1").click(function () {
// 判斷當前點擊的標籤是否存在mytabs上
var e = $("#mytabs").tabs("exists","系統管理");
// 若是存在，選擇那個標籤
if (e){
$("#mytabs").tabs("select","系統管理")
}else {
// 不然，在mytabs上添加一個標籤
$("#mytabs").tabs("add", {
title: "系統管理", // 標題
iconCls: 'icon-edit', // 圖標
closable: true, // 關閉按鈕
content: '<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>' // 內容
})
}
})
</script>
</div>
<div title="面板二">2222</div>
<div title="面板三">3333</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 製做一個tabs選項卡面板 -->
<div class="easyui-tabs" data-options="fit:true" id="mytabs">
<!-- 使用子div表示每一個面板 -->
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<!--data-options="closable:true"：小XX-->
<div data-options="closable:true" title="面板二">2222</div>
<div title="面板三">3333</div>
</div>
</div>
2、ztree插件的使用
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>jquery依賴JQueryajax
一、使用標準json數據構造ztree（瞭解）json
<div title="面板二">
<ul id="ztree1" class="ztree"></ul>
<script>
$(function () {
// 配置信息
var setting1 = {}; // 什麼不寫，使用默認值
// 構造節點數據
var zNodes1 = [
{"name":"節點一","children":[
{"name":"節點一_1"},
{"name":"節點一_2"}
]},//每一個json對象表示一個節點數據
{"name":"節點二"},
{"name":"節點三"}
];
// 調用API建立ztree
$.fn.zTree.init($("#ztree1"), setting1, zNodes1);
})
</script>
</div>
二、使用簡單json數據構造ztree（重點）ide
<div title="面板三">
<ul id="ztree2" class="ztree"></ul>
<script>
$(function () {
// 配置信息
var setting2 = {
data: {
simpleData: {
enable: true//使用簡單json數據構造ztree節點
}
}
};
// 構造節點數據
var zNodes2 = [
// pid指的是，父節點的id；0爲沒有父節點
{"id":"1","pId":"0","name":"節點一"},
{"id":"2","pId":"1","name":"節點二"},
{"id":"3","pId":"2","name":"節點三"}
];
// 調用API建立ztree
$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
})
</script>
</div>
三、發送ajax請求獲取json數據構造ztree工具
<div title="面板四">
<ul id="ztree3" class="ztree"></ul>
<script>
$(function () {
// 配置信息
var setting3 = {
data:{simpleData: {
enable: true //配置使用簡單json數據構造ztree節點
}}
};
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function (dat) {
// 調用API建立ztree
$.fn.zTree.init($("#ztree3"), setting3, dat);
},"json");
})
</script>
</div>
四、綁定動態添加選項卡佈局
<div title="面板四">
<ul id="ztree3" class="ztree"></ul>
<script>
$(function () {
// 配置信息
var setting3 = {
data: {
simpleData: {
enable: true//使用簡單json數據構造ztree節點
}
},
callback:{
onClick:function (event, treeId, treeNode) {
// 判斷是否有Page字段
if (treeNode.page!=undefined){
// 判斷是否有那個字段
var e = $("#mytabs").tabs("exists",treeNode.name);
if(e){
$("#mytabs").tabs("select",treeNode.name)
}else{
$("#mytabs").tabs("add", {
title: treeNode.name,
closable: true,
content: '<iframe frameborder="0" height="100%" width="100%" src="' + treeNode.page + '"></iframe>'
})
}
}
}
}
};
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function (dat) {
// 調用API建立ztree
$.fn.zTree.init($("#ztree3"), setting3, dat);
},"json");
})
</script>
</div>
3、EasyUI（2）
導入漢化包
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>
一、 alert
$.messager.alert("標題","內容","question");
二、confirm
$.messager.confirm("提示信息","你肯定要刪除當前記錄嗎？",function(r){
alert(r); // r爲true/false
});
三、show
$.messager.show({
title:'歡迎信息',
msg:'歡迎【admin】登陸系統！',
timeout:5000,
showType:'slide'
});
四、菜單
<!-- 製做菜單 --> <a data-options="iconCls:'icon-help',menu:'#mm'" class="easyui-menubutton">控制面板</a> <!-- 使用div元素製做下拉菜單 --> <div id="mm"> <div onclick="alert(1111)" data-options="iconCls:'icon-edit'">修改密碼</div> <div>聯繫管理員</div> <div class="menu-sep"></div> <div>退出系統</div> </div>
五、表單驗證
須要加上屬性
<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;"> <form action="" id="editPasswordForm"> <table cellpadding=3> <tr> <td>新密碼：</td> <td><input required="true" data-options="validType:'length[4,6]'" id="txtNewPass" type="Password" class="txt01 easyui-validatebox" /></td> </tr> <tr> <td>確認密碼：</td> <td><input required="true" data-options="validType:'length[4,6]'" id="txtRePass" type="Password" class="txt01 easyui-validatebox" /></td> </tr> </table> </form> </div> <div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;"> <a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >肯定</a> <a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a> </div>
當點擊提交時，再次進行驗證；驗證經過後發送ajax請求
//爲肯定按鈕綁定事件
$("#btnEp").click(function(){
//進行表單校驗
var v = $("#editPasswordForm").form("validate");
if(v){
//表單校驗經過，手動校驗兩次輸入是否一致
var v1 = $("#txtNewPass").val();
var v2 = $("#txtRePass").val();
if(v1 == v2){
//兩次輸入一致，發送ajax請求
$.post("userAction_editPassword.action",{"password":v1},function(data){
alert(data)
if(data == '1'){
//修改爲功，關閉修改密碼窗口
$("#editPwdWindow").window("close");
}else{
//修改密碼失敗，彈出提示
$.messager.alert("提示信息","密碼修改失敗！","error");
}
});
}else{
//兩次輸入不一致，彈出錯誤提示
$.messager.alert("提示信息","兩次密碼輸入不一致！","warning");
}
}
});
擴展校驗規則
<script type="text/javascript">
$(function(){
//爲保存按鈕綁定事件
$("#save").click(function(){
//表單校驗，若是經過，提交表單
var v = $("#addStaffForm").form("validate");
if(v){
//$("#addStaffForm").form("submit");
$("#addStaffForm").submit();
}
});
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
//擴展手機號校驗規則
$.extend($.fn.validatebox.defaults.rules, {
telephone: {
validator: function(value,param){
return reg.test(value);
},
message: '手機號輸入有誤！'
}
});
});
</script>
<input type="text" data-options="validType:'telephone'" name="telephone" class="easyui-validatebox" required="true"/>
4、datagrid使用方法
方式一：將靜態HTML渲染爲datagrid樣式
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">編號</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>90</td>
</tr>
<tr>
<td>002</td>
<td>老王</td>
<td>3</td>
</tr>
</tbody>
</table>
方式二：發送ajax請求獲取json數據建立datagrid
<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'"
class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">編號</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年齡</th>
</tr>
</thead>
</table>
方式三：使用easyUI提供的API建立datagrid（推薦）
<script type="text/javascript">
$(function(){
//頁面加載完成後，建立數據表格datagrid
$("#mytable").datagrid({
//定義標題行全部的列
columns:[[
{title:'編號',field:'id',checkbox:true},
{title:'姓名',field:'name'},
{title:'年齡',field:'age'},
{title:'地址',field:'address'}
]],
//指定數據表格發送ajax請求的地址
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
rownumbers:true,
singleSelect:true,
//定義工具欄
toolbar:[
{text:'添加',iconCls:'icon-add',
//爲按鈕綁定單擊事件
handler:function(){
alert('add...');
}
},
{text:'刪除',iconCls:'icon-remove'},
{text:'修改',iconCls:'icon-edit'},
{text:'查詢',iconCls:'icon-search'}
],
//顯示分頁條
pagination:true
});
});
</script>
若是數據表格中使用了分頁條，要求服務端響應的json變爲：
請求
響應
相關文章
- 1. 前端webpack workflow（二）——Webpack基本使用
- 2. （一）EasyUI 使用——基本概念
- 3. 前端框架EasyUI
- 4. 前端框架easyUI
- 5. EasyUI前端框架
- 6. 前端基於easyui的mvc擴展
- 7. EasyUI之Tabs基本用法
- 8. 前端基本功
- 9. 前端數據校驗的使用——nice-validator基本使用
- 10. easyui(前後端分離)
- 更多相關文章...
- • Redis基本安裝和使用 - Redis教程
- • 使用UDP協議掃描端口 - TCP/IP教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端webpack workflow（二）——Webpack基本使用
- 2. （一）EasyUI 使用——基本概念
- 3. 前端框架EasyUI
- 4. 前端框架easyUI
- 5. EasyUI前端框架
- 6. 前端基於easyui的mvc擴展
- 7. EasyUI之Tabs基本用法
- 8. 前端基本功
- 9. 前端數據校驗的使用——nice-validator基本使用
- 10. easyui(前後端分離)