初識JQuery EasyUI框架
EasyUI 官方網站：http://www.jeasyui.com/index.phpjavascript
EasyUI API：http://www.jeasyui.com/documentation/index.phpphp
最近使用JQuery的EasyUI進行對錶格進行CRUD操做，看到官網上的示例演示特別簡單，可是在實際操做中發現並無那麼簡單。如下就是在本身寫的時候出現的一些問題。css
UI頁面以下：html
這個示例有三個頁面：java
主頁面：easyui_exercise.html：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>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">
<script type = "text/javascript" src = "js/jquery-2.1.4.min.js"></script>
<script src = "easyui/jquery.easyui.min.js"></script>
<script src = "easyui/easyui-lang-zh_CN.js"></script>
<script src = "easyui/jquery.edatagrid.js"></script>
<script src = js/datepicker/WdatePicker.js></script>
</head>
<style>
#memo_id p {
padding-left: 10px;
}
</style>
<script>
$(function () {
$("#sys_mng_id div:first a").click(function () {
if ($("#tabs_id").tabs("exists", $(this).text())) {
$("#tabs_id").tabs("select", $(this).text());
} else {
$("#tabs_id").tabs("add", {
title: $(this).text(),
selected: true,
closable: true,
content: $(this).text()
})
}
});
$("#tabs_id").tabs({
// tools: [{
// iconCls: "icon-add",
// handler: function () {
// alert("添加");
// }
// }, {
// iconCls: "icon-save",
// handler: function () {
// alert("正在保存");
// }
// }],
onBeforeClose: function (title) {
return window.confirm("您肯定要關閉 " + title + " 選項卡嗎?");
}
});
})
</script>
<body class = "easyui-layout">
<div data-options = "region:'north',split:false,border:false" style = "height:15%;text-align: center;">
<h1>初次學習JQuery組件--EasyUi</h1>
</div>
<div data-options = "region:'south',split:false,border:true" style = "height:5%;text-align: center">©Flying版權全部
</div>
<div id = "memo_id" data-options = "region:'east',title:'備註',split:false,collapsible:true,border:false"
style = "width:20%;">
<h1 style = "text-align: center">今天新聞</h1>
<p>網站建設中...</p>
<p>網站建設中...</p>
<p>網站建設中...</p>
<p>網站建設中...</p>
<p>網站建設中...</p>
<p>網站建設中...</p>
</div>
<div id = "sys_mng_id" class = "easyui-accordion" data-options = "
region:'west',title:'系統菜單',split:false,collapsible:true,selected:-1,multiple:false,border:false"
style = "width:20%;overflow: auto">
<div title = "部門管理"
data-options = "iconCls:'icon-save',href: 'http://localhost:8080/SSMProjectMaven/tree.html'"></div>
<div title = "人事管理" data-options = "iconCls:'icon-reload'">此處內容</div>
<div title = "客戶管理" data-options = "iconCls:'icon-remove'">此處內容</div>
<div title = "權限管理" data-options = "iconCls:'icon-edit'">此處內容</div>
<div title = "報表管理" data-options = "iconCls:'icon-print'">此處內容</div>
<div title = "幫助" data-options = "iconCls:'icon-help'">此處內容</div>
</div>
<div id = "tabs_id" data-options = "region:'center',border:false"
style = "padding:5px;background:#eee;">
</div>
<script>
$(function () {
$("body").layout("panel", "center").panel({
href: "http://localhost:8080/SSMProjectMaven/student.html"
});
})
</script>
</body>
</html>
在我是把student.html和tree.html頁面嵌入到該主頁面中的。node
我發現使用EasyUI的panel的href屬性嵌入另外一個頁面時，只會加載href指向頁面的body中的內容，jquery
也就是說若是你在子頁面中在body以外引入了javascript外部文件，可是在主頁面中沒有引入該文件，那麼該子頁面在主頁面中將不能正常工做。在body以外設置的CSS屬性亦是如此。因此在子頁面中設置的CSS屬性應該儘可能放在body標籤內，或者使用內聯樣式。ajax
子頁面(該頁面中須要注意的地方已經在代碼中註釋註明了)：student.html
WdatePicker組件的使用參見該篇博客：http://my.oschina.net/u/2608182/blog/731627數據庫
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>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">
<script type = "text/javascript" src = "js/jquery-2.1.4.min.js"></script>
<script src = "easyui/jquery.easyui.min.js"></script>
<script src = "easyui/easyui-lang-zh_CN.js"></script>
<script src = "easyui/jquery.edatagrid.js"></script>
<script src = js/datepicker/WdatePicker.js></script>
</head>
<body>
<style>
#dlg div {
margin-top: 10px;
}
#search_form input {
border-radius: 5px;
border: 1px solid #95B8E7;
height: 20px;
}
</style>
<table id = "dgg"></table>
<div id = "dlg" style = "text-align: center">
<form id = "search_form">
<div>
<label for = "name">姓名:</label>
<input type = "text" id = "name" class = "easyui-textbox" data-options = "required:false">
</div>
<div>
<label for = "birthday">生日:</label>
<!--
這裏感受EasyUI的datebox插件很差用故使用了WdatePicker插件
-->
<input id = "birthday" class = "Wdate"
onfocus = "WdatePicker({
skin:'whyGreen',
isShowWeek:false,
readOnly:true,
highLineWeekDay:true,
dateFmt:'yyyy-MM-dd'})">
</div>
</form>
</div>
<script>
$(function () {
$("#dlg").dialog({
title: "搜索",
closed: true,
modal: true,
width: 300,
height: 150,
buttons: [{
iconCls: "icon-search",
text: "搜索",
handler: function () {
$("#dgg").edatagrid("load", {
name: $("#name").val(),
/*
Tips:
這裏須要注意，若是是使用EasyUI的datebox插件的話，
$("#birthday").val()這句代碼將取不出來值,
要取出值必須使用如下語句：
$("#birthday").datebox("getValue");
若是使用WDatePicker插件的話不存在這個問題
*/
birthday: $("#birthday").val()
});
$("#dlg").dialog("close");
}
}, {
iconCls: "icon-cancel",
text: "取消",
handler: function () {
$("#dlg").dialog("close");
}
}]
});
$("#dgg").edatagrid({
title: '學生信息',
/*
Tips：
* 這裏若是要使用edatagrid插件自帶的saveRow,distroyRow等相似方法的話，
* idField屬性必須指定，不然在使用這些方法的時候插件將不會自動發送主鍵
* （例如這裏我設置的是Student類的屬性sid做爲數據庫裏的主鍵）參數到服務器，
* 通過測試，貌似插件根本不會向服務器發送請求，除非這裏指定了idField屬性
* */
idField: 'sid',
fit: true,
method: "GET",
url: "http://localhost:8080/SSMProjectMaven/student/ajax_page.do",
columns: [[
/*
* 該列將顯示以多選框形式顯示
* */
{field: 'sid', checkbox: true},
{
field: 'name', title: 'name', sortable: false, align: "center", width: 50,
editor: {
type: 'validatebox',
options: {
required: true
}
}
},
{
field: 'birthday', title: 'birthday', align: "center", width: 50,
editor: {
type: 'datebox',
options: {
required: false,
editable: false
}
}
}
]],
toolbar: [{
iconCls: 'icon-add',
text: "添加",
handler: function () {
$('#dgg').edatagrid('addRow');
}
}, '-', {
iconCls: 'icon-save',
text: "保存",
handler: function () {
$('#dgg').edatagrid('saveRow');
}
}, '-', {
iconCls: 'icon-undo',
text: "撤銷當前編輯行",
handler: function () {
$('#dgg').edatagrid('cancelRow');
}
}, '-', {
iconCls: 'icon-remove',
text: "刪除選中行",
/*
Tips:
* 這裏的刪除記錄我沒有選擇使用edatagrid插件自帶的destroyRow方法，
* 緣由是我發現若是我選擇了多條記錄同時刪除的話，例如我選擇了10條記錄
* 選擇刪除，該插件就會向服務器發送10次請求，每一個請求都附帶一個idField
* 屬性設置的sid，不能實現一次請求批量刪除記錄，大大增長了服務器的壓力。
* 我這裏實現的是一次請求向服務器發送全部用戶選擇的記錄的sid，後臺實現
* 記錄批量刪除。
* */
handler: function () {
var rows = $('#dgg').edatagrid('getChecked');
if (rows.length == 0) {
$.messager.alert("警告", "您沒有選擇任何行", 'warning');
return false;
}
$.messager.confirm("確認", "您肯定要刪除已經選擇的 " + rows.length + " 行嗎?", function (flag) {
if (flag) {
var indexs = [];
for (var i = 0; i < rows.length; i++) {
indexs.push(rows[i].sid);
}
$.ajax({
url: "http://localhost:8080/SSMProjectMaven/student/deletes.do",
type: "GET",
/*
* Tips:
* 這裏真的要注意了，費了我好長時間解決這個問題。
* 這裏的data就是要向服務器發送的參數，這裏因爲
* idss的值是一個數組，若是data屬性的設置以下：
* data:{'idss':indexs}
* JQuery在解析這個Json對象的時候向服務器最終發送的參數以下：
* 解析以後的參數(帶有中括號[])：idss[]:179,idss[]:195,idss[]:196
* 編碼以後的參數(帶有"%5B%5D"字符)：idss%5B%5D=179&idss%5B%5D=195&idss%5B%5D=196
* 然而我服務器設置的用來接收此參數的變量名是idss啊,
* 而且也不能把變量名設置成idss[]啊。
* 後來通過查看JQuery的API以及查找了網上相關資料，JQuery有以下兩個方法
* $("form").serialize()，$.param(),
* serialize方法用於把表單內容序列化爲Json數據結構的數據，
* 可是咱們想服務器發送參數是用相似於aaa=xxx&bbb=xxx的字符串，
* 因此咱們就須要使用$.param()方法把Json對象解析成咱們須要的請求格式的字符串。
* 可是$.param()方法有兩種用法，
* 1. $.param({'idss': indexs}),這種方法在解析數組的時候將會產生"%5B%5D"的字符
* $.ajax()的data參數使用的就是這種方式。
* 2. $.param({'idss': indexs}, true),這種方法就不會產生"%5B%5D"字符這樣的問題,
* 解析出來的參數就是咱們須要的格式:idss=179&idss=195&idss=196
* 因爲$.ajax()的data參數默認使用第一種方式解析Json對象，因此咱們就只有
* 手動調用JQuery的$.param()函數來解決"%5B%5D"字符問題
* */
data: $.param({'idss': indexs}, true),
dataType: "json",
success: function (data) {
if (data.status == 1) {
/*
Tips:
* 下面緊接着的一小段被我註釋掉的代碼也須要注意一下。
* 舉個例子：
* 假如rows數組裏包含了5條行數據，那麼rows的下標就是從0到4.
* 下標依次對應於表格裏的第1至5條行數據，當我調用瞭如下這個方法
* $('#dgg').edatagrid("deleteRow", 0)
* 我移除掉了表格裏的第一條行數據，那麼同時rows數組的rows[0]對象
* 也會被移除掉，這時rows數組的長度也會減1，下標變成從0到3,
* 在這種狀況下若使用以下代碼：
* for (var i = 0; i < rows.length; i++) {
* var rowIndex = $('#dgg').edatagrid("getRowIndex", rows[i]);
* $('#dgg').edatagrid("deleteRow", rowIndex);
* }
* 將不會移除掉表格裏的起初的第1至5條數據，只會移除掉表格裏的第1,3,5條數據，
* 第2,4條數據不會被移除，但實際上數據庫裏的記錄是被刪除掉的。
* 使用以下注釋掉的代碼便可解決該問題。
* 可是這裏我選擇了調用$("#dgg").edatagrid("reload")這個方法重載當前頁
* */
// var n = rows.length;
// for (var i = 0; i < n; i++) {
// var rowIndex = $('#dgg').edatagrid("getRowIndex", rows[0]);
// $('#dgg').edatagrid("deleteRow", rowIndex);
// }
$("#dgg").edatagrid("reload");
}
$.messager.alert("提示", data.msg, 'info');
},
error: function () {
$.messager.alert("錯誤", "刪除失敗", 'error');
}
});
}
});
}
}, '-', {
iconCls: 'icon-search',
text: "查找",
handler: function () {
$("#search_form").form("clear");
$("#dlg").dialog("open");
}
}],
/*
* 由於沒有使用edatagrid自帶的destroyRow方法因此如下緊接着的註釋掉的代碼
* 也沒有用了。
* PS：同時感受自帶的方法靈活性不夠，限制太多。
* */
// destroyMsg: {
// norecord: { // 在沒有記錄選擇的時候執行
// title: '警告',
// msg: '當前沒有選擇任何行'
// }
// ,
// confirm: { // 在選擇一行的時候執行
// title: '確認',
// msg: '您肯定要刪除選中行?'
// }
//
// },
checkOnSelect: false,
selectOnCheck: false,
rowStyler: function (index) {
if (index % 2 != 0) {
return "background-color:#E0E3E6";
}
}
,
fitColumns: true,
singleSelect: true,
pagination: true,
pageList: [10, 20, 30, 50],
pageSize: 10,
rownumbers: true,
saveUrl: "http://localhost:8080/SSMProjectMaven/student/ajax_add.do",
updateUrl: "http://localhost:8080/SSMProjectMaven/student/update.do"
// destroyUrl: "http://localhost:8080/SSMProjectMaven/student/delete.do"
});
$("#dgg").edatagrid("getPager").pagination({
layout: ['list', 'first', 'prev', 'links', 'next', 'last', 'sep', 'refresh']
});
})
</script>
</body>
</html>
子頁面tree.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Tree</title>
<link rel = "stylesheet" type = "text/css" href = "easyui/themes/default/easyui.css">
<link rel = "stylesheet" type = "text/css" href = "easyui/themes/icon.css">
<script type = "text/javascript" src = "js/jquery-2.1.4.min.js"></script>
<script src = "easyui/jquery.easyui.min.js"></script>
<script src = "easyui/easyui-lang-zh_CN.js"></script>
</head>
<body>
<ul id = "tt"></ul>
<script>
$(function () {
$("#tt").tree({
animate: true,
lines: true,
url: "http://localhost:8080/SSMProjectMaven/node/findAllTopRoot.do",
method: "GET",
onlyLeafCheck: true,
checkbox: true,
onLoadError: function () {
alert("加載失敗");
}
}
);
})
</script>
</body>
</html>
咱們在使用EasyUI時，插件的加載均可以使用HTML方式加載，或者使用JavaScript代碼加載，當咱們使用HTML加載時，須要在容器中添加相似easyui-xxxx的類ID，當咱們使用純JavaScript代碼加載時應儘可能不要在容器中添加相似easyui-xxxx的類ID。不然在某些狀況下將會出現問題。json
舉個例子以下：
<table id = "dgg" class = "easyui-edatagrid"></table><!--注意這裏我添加了一個"easyui-edatagrid"類ID-->
<script>
$(function () {
//這裏又經過使用JavaScript代碼加載插件
$("#dgg").edatagrid({
//一系列的屬性設置
}）
//當咱們須要自定義表格的pagination時，以下
$("#dgg").edatagrid("getPager").pagination({
layout: ['list', 'first', 'prev', 'links', 'next', 'last', 'sep', 'refresh']
});
</script>
當咱們將該頁面經過另外一個頁面的panel的href屬性嵌入到panel中時，如下的這段代碼將會失效：
$("#dgg").edatagrid("getPager").pagination({
layout: ['list', 'first', 'prev', 'links', 'next', 'last', 'sep', 'refresh']
});
可是若是咱們單獨打開這個子頁面時，以上的那段代碼是有效的。真不知道這是否是一個Bug。
解決方式就是去除這個類ID（在使用純JavaScript加載插件的狀況下才去除，若使用HTML方式加載請加上這個類ID）：
class = "easyui-edatagrid"
剩下的就是對Tree這個插件講一下。
以下這段代碼：
<!--這裏給div添加了一個樣式-->
<div style="text-align:center"><ul id = "tt"></ul></div>
<script>
$(function () {
$("#tt").tree({
animate: true,
lines: true,
url: "http://localhost:8080/SSMProjectMaven/node/findAllTopRoot.do",
method: "GET",
onlyLeafCheck: true,
checkbox: true,
onLoadError: function () {
alert("加載失敗");
}
}
);
})
</script>
給Tree的容器div添加了以下的樣式：
text-align:center
產生的效果以下（父節點與子節點錯位）:
而實際的狀況應以下：
解決方式就是去掉容納Tree的容器div的以下的CSS樣式，便可恢復正常：
text-align:center
EasyUI 官方網站：http://www.jeasyui.com/index.php
相關文章
- 1. 初試jQuery EasyUI
- 2. 初識JQuery
- 3. EasyUI框架
- 4. EasyUI前端框架
- 5. 《初識JQuery總結》
- 6. 前端框架EasyUI
- 7. 【初識】-JUC·Executor框架
- 8. 初識Django框架
- 9. 初識django框架
- 10. 初識Spring框架
- 更多相關文章...
- • Docker 架構 - Docker教程
- • ionic 浮動框 - ionic 教程
- • 適用於PHP初學者的學習線路和建議
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 初試jQuery EasyUI
- 2. 初識JQuery
- 3. EasyUI框架
- 4. EasyUI前端框架
- 5. 《初識JQuery總結》
- 6. 前端框架EasyUI
- 7. 【初識】-JUC·Executor框架
- 8. 初識Django框架
- 9. 初識django框架
- 10. 初識Spring框架