第二百三十節，jQuery EasyUI，後臺管理界面---後臺管理
jQuery EasyUI，後臺管理界面---後臺管理javascript
一，admin.php，後臺管理界面php
<?php session_start(); if (!isset($_SESSION['admin'])) { //判斷用戶登陸成功時建立的SESSION是否存在 header('location:login.php'); //若是不存在，跳轉到登陸頁面 } ?> <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <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="css/admin.css" /> </head> <body class="easyui-layout"> <div data-options="region:'north',title:'header',split:true,noheader:true" style="height:60px;background:#666;"> <div class="logo">後臺管理</div> <div class="logout">您好，<?php echo $_SESSION['admin']?> | <a href="logout.php">退出</a></div> </div> <div data-options="region:'south',title:'footer',split:true,noheader:true" style="height:35px;line-height:30px;text-align:center;"> ©2009-2015 瓢城 Web 俱樂部. Powered by PHP and EasyUI. </div> <div data-options="region:'west',title:'導航',split:true,iconCls:'icon-world'" style="width:180px;padding:10px;"> <ul id="nav"></ul> </div> <div data-options="region:'center'" style="overflow:hidden;"> <div id="tabs"> <div title="起始頁" iconCls="icon-house" style="padding:0 10px;display:block;"> 歡迎來到後臺管理系統！ </div> </div> </div> <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/admin.js"></script> </body> </html>
二，logout.php點擊退出css
<?php session_start(); session_destroy(); //清除建立的session header('location:login.php'); //跳轉到登陸頁面 ?>
三，admin.js加載導航html
數據庫表java
admin.jsnode
$(function () { $('#nav').tree({ //將導航元素執行樹形結構方法 url : 'nav.php', //遠程加載樹形結構數據 lines : true, //顯示結構虛線 onLoadSuccess : function (node, data) { //在數據加載成功後觸發 if (data) { //data接收的全部目錄信息對象，判斷目錄節點是否存在 $(data).each(function (index, value) { //遍歷全部目錄 if (this.state == 'closed') { //判斷若是目錄對象裏的state等於closed,說明此目錄有子目錄 $('#nav').tree('expandAll'); //展開全部節點 } }); } }, onClick : function (node) { //當用戶點擊一個目錄時 if (node.url) { //判斷當前對象的url是否存在，也就是在數據庫裏的url鏈接地址 if ($('#tabs').tabs('exists', node.text)) { //判斷當前目錄名稱的選項卡是否打開 $('#tabs').tabs('select', node.text); //若是打開的則選擇在當前選項卡上 } else { //若是固然選項卡沒有打開 $('#tabs').tabs('add', { //添加一個新選項卡面板 title : node.text, //標題爲當前目錄的名稱 iconCls : node.iconCls, //圖標爲當前目錄的圖標 closable : true, //顯示關閉按鈕 href : node.url + '.php', //讀取遠程數據並顯示到面板 }); } } } }); $('#tabs').tabs({ //將佈局的id爲tabs，也就是內容區塊執行選項卡組件 fit : true, //鋪滿容器， border : false, //不顯示選項卡容器邊框 }); });
nav.php，導航數據頁mysql
<?php require 'config.php'; $id = isset($_POST['id']) ? $_POST['id'] : 0; //判斷是否有傳遞id,若是有id值爲id,若是沒有id值爲0 //將$id值到數據庫去查找nid字段 $query = mysql_query("SELECT id,text,state,iconCls,url FROM easyui_nav WHERE nid='$id'") or die('SQL 錯誤！'); $json = ''; while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) { $json .= json_encode($row).','; } $json = substr($json, 0, -1); echo '['.$json.']'; mysql_close(); ?>
四，點擊對應的導航，遠程對應的頁面獲取數據庫信息顯示到對應的選項卡jquery
導航jsajax
$(function () { $('#nav').tree({ //將導航元素執行樹形結構方法 url : 'nav.php', //遠程加載樹形結構數據 lines : true, //顯示結構虛線 onLoadSuccess : function (node, data) { //在數據加載成功後觸發 if (data) { //data接收的全部目錄信息對象，判斷目錄節點是否存在 $(data).each(function (index, value) { //遍歷全部目錄 if (this.state == 'closed') { //判斷若是目錄對象裏的state等於closed,說明此目錄有子目錄 $('#nav').tree('expandAll'); //展開全部節點 } }); } }, onClick : function (node) { //當用戶點擊一個目錄時 if (node.url) { //判斷當前對象的url是否存在，也就是在數據庫裏的url鏈接地址 if ($('#tabs').tabs('exists', node.text)) { //判斷當前目錄名稱的選項卡是否打開 $('#tabs').tabs('select', node.text); //若是打開的則選擇在當前選項卡上 } else { //若是固然選項卡沒有打開 $('#tabs').tabs('add', { //添加一個新選項卡面板 title : node.text, //標題爲當前目錄的名稱 iconCls : node.iconCls, //圖標爲當前目錄的圖標 closable : true, //顯示關閉按鈕 href : node.url + '.php', //讀取遠程數據並顯示到面板 }); } } } }); $('#tabs').tabs({ //將佈局的id爲tabs，也就是內容區塊執行選項卡組件 fit : true, //鋪滿容器， border : false, //不顯示選項卡容器邊框 }); });
選項卡操做sql
HTML
<?php session_start(); if (!isset($_SESSION['admin'])) { header('location:login.php'); } ?> <table id="manager"></table> <div id="manager_tool" style="padding:5px;"> <div style="margin-bottom:5px;"> <a href="#" class="easyui-linkbutton" iconCls="icon-add-new" plain="true" onclick="manager_tool.add();">添加</a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit-new" plain="true" onclick="manager_tool.edit();">修改</a> <a href="#" class="easyui-linkbutton" iconCls="icon-delete-new" plain="true" onclick="manager_tool.remove();">刪除</a> <a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="manager_tool.reload();">刷新</a> <a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" onclick="manager_tool.redo();">取消選擇</a> </div> <div style="padding:0 0 0 7px;color:#333;"> 查詢賬號：<input type="text" class="textbox" name="user" style="width:110px"> 建立時間從：<input type="text" name="date_from" class="easyui-datebox" editable="false" style="width:110px"> 到：<input type="text" name="date_to" class="easyui-datebox" editable="false" style="width:110px"> <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="obj.search();">查詢</a> </div> </div> <form id="manager_add" style="margin:0;padding:5px 0 0 25px;color:#333;"> <p>管理賬號：<input type="text" name="manager" class="textbox" style="width:200px;"></p> <p>管理密碼：<input type="password" name="password" class="textbox" style="width:200px;"></p> <p>分配權限：<input id="auth" class="textbox" name="auth" style="width:205px;"></p> </form> <form id="manager_edit" style="margin:0;padding:5px 0 0 25px;color:#333;"> <input type="hidden" name="id" class="textbox" style="width:200px;"> <p>管理賬號：<input type="text" name="manager_edit" disabled="true" class="textbox" style="width:200px;"></p> <p>管理密碼：<input type="password" name="password_edit" class="textbox" style="width:200px;"></p> <p>分配權限：<input id="auth_edit" class="textbox" name="auth_edit" style="width:205px;"></p> </form> <script type="text/javascript" src="js/manager.js"></script>
js
$(function () { $('#manager').datagrid({ //執行數據表格組件 url : 'manager_data.php', //獲取遠程數據 fit : true, //面板大小自適應父容器 fitColumns : true, //表格自適應面板 striped : true, //是否顯示斑馬效果 rownumbers : true, //顯示行號 border : false, //是否顯示邊框 pagination : true, //是否顯示分頁 pageSize : 20, //每頁顯示多少條數據 pageList : [10, 20, 30, 40, 50], //可選每頁顯示多少條數據 pageNumber : 1, //起始頁 sortName : 'date', //默認以什麼字段排序 sortOrder : 'desc', //排序方式 toolbar : '#manager_tool', //加載增刪改查工具欄區塊 columns : [[ //表格數據 { field : 'id', //數據庫id字段 title : '自動編號', //標題 width : 100, checkbox : true, //自動編號 }, { field : 'manager', //數據庫管理員字段 title : '管理員賬號', width : 100, }, { field : 'auth', //數據庫權限字段 title : '擁有權限', width : 100, }, { field : 'date', //數據庫日期字段 title : '建立日期', width : 100, }, ]], }); //新增 $('#manager_add').dialog({ //執行對話框組件 width : 350, title : '新增管理', modal : true, //遮罩 closed : true, //能夠關閉窗口 iconCls : 'icon-user-add', //圖標 buttons : [{ //建立按鈕 text : '提交', //提交按鈕 iconCls : 'icon-add-new', //圖標 handler : function () { //點擊提交按鈕後觸發 if ($('#manager_add').form('validate')) { //判斷驗證表單是否所有合法 $.ajax({ //執行ajax提交 url : 'addManager.php', type : 'post', data : { //提交數據 manager : $('input[name="manager"]').val(), //獲取用戶名值 password : $('input[name="password"]').val(), //獲取密碼值 auth : $('#auth').combotree('getText'), //權限文本 }, beforeSend : function () { //提交時 $.messager.progress({ //進度條信息框 text : '正在新增中...', }); }, success : function (data, response, status) { //提交成功後 $.messager.progress('close'); //關閉進度條信息框 if (data > 0) { //判斷返回添加成功 $.messager.show({ //消息框 title : '提示', msg : '新增管理成功', }); $('#manager_add').dialog('close').form('reset'); //關閉對話框，重置表單 $('#manager').datagrid('reload'); //從新加載樹形表格數據 } else { $.messager.alert('新增失敗！', '未知錯誤致使失敗，請重試！', 'warning'); //添加失敗提示信息 } } }); } }, },{ text : '取消', //取消按鈕 iconCls : 'icon-redo', handler : function () { //點擊取消按鈕後執行函數 $('#manager_add').dialog('close').form('reset'); //關閉對話框，重置表單 }, }], }); //修改 $('#manager_edit').dialog({ //修改對話框 width : 350, title : '修改管理', modal : true, //遮罩鎖屏 closed : true, //能夠關閉窗口 iconCls : 'icon-user-add', //圖標 buttons : [{ //設置提交按鈕 text : '提交', iconCls : 'icon-edit-new', //按鈕圖標 handler : function () { //點擊提交後執行函數 if ($('#manager_edit').form('validate')) { //判斷表單的數據是否合法 $.ajax({ //ajax提交數據 url : 'updateManager.php', type : 'post', data : { //提交數據 id : $('input[name="id"]').val(), //獲取用戶名 password : $('input[name="password_edit"]').val(), //獲取密碼 auth : $('#auth_edit').combotree('getText'), //獲取權限文本 }, beforeSend : function () { //提交時 $.messager.progress({ //進度條信息框 text : '正在修改中...', }); }, success : function (data, response, status) { //提交後 $.messager.progress('close'); //關閉進度條信息框 if (data > 0) { //判斷修改是否成功 $.messager.show({ //消息框 title : '提示', msg : '修改管理成功', }); $('#manager_edit').dialog('close').form('reset'); //關閉對話框，重置表單 $('#manager').datagrid('reload'); //從新加載數據表格 } else { $.messager.alert('修改失敗！', '未知錯誤或沒有任何修改，請重試！', 'warning'); //修改失敗提示 } } }); } }, },{ text : '取消', //取消按鈕 iconCls : 'icon-redo', handler : function () { //點擊取消按鈕執行函數 $('#manager_edit').dialog('close').form('reset'); //關閉對話框，重置表單 }, }], }); //管理賬號驗證 $('input[name="manager"]').validatebox({ required : true, validType : 'length[2,20]', missingMessage : '請輸入管理名稱', invalidMessage : '管理名稱在 2-20 位', }); //管理密碼驗證 $('input[name="password"]').validatebox({ required : true, validType : 'length[6,30]', missingMessage : '請輸入管理密碼', invalidMessage : '管理密碼在 6-30 位', }); //修改管理密碼驗證 $('input[name="password_edit"]').validatebox({ //required : true, validType : 'length[6,30]', missingMessage : '請輸入管理密碼', invalidMessage : '管理密碼在 6-30 位', }); //分配權限驗證 $('#auth').combotree({ //樹形下拉框 url : 'nav.php', required : true, //不能爲空 lines : true, //顯示虛線 multiple : true, //支持多選 checkbox : true, //顯示覆選框 onlyLeafCheck : true, //只有底層目錄才顯示覆選框 onLoadSuccess : function (node, data) { //在數據加載成功後觸發 var _this = this; if (data) { //判斷目錄對象是否存在 $(data).each(function (index, value) { //遍歷出目錄對象 if (this.state == 'closed') { //判斷若是有子目錄 $(_this).tree('expandAll'); //展開全部目錄 } }); } }, }); //增刪改查執行對象 manager_tool = { //刷新 reload : function () { //點擊刷新執行方法 $('#manager').datagrid('reload'); //重載數據表格 }, //取消全選 redo : function () { //點擊取消全選 $('#manager').datagrid('unselectAll'); //取消全選 }, //添加 add : function () { //點擊添加按鈕執行 $('#manager_add').dialog('open'); //打開添加對話框 $('input[name="manager"]').focus(); //將光標定位到表單 }, //刪除 remove : function () { //點擊刪除按鈕執行 var rows = $('#manager').datagrid('getSelections'); //獲取數據表格全部選中對象 if (rows.length > 0) { //判斷選中對象長度大於0 $.messager.confirm('肯定操做', '您正在要刪除所選的記錄嗎？', function (flag) { //執行消息提示框，確認或者取消 if (flag) { //點擊確認 var ids = []; for (var i = 0; i < rows.length; i ++) { //循環出選中對象 ids.push(rows[i].id); //將選中對象追加到數組 } //console.log(ids.join(',')); $.ajax({ //ajax提交 type : 'POST', url : 'deleteManager.php', data : { ids : ids.join(','), //數組格式化分隔符 }, beforeSend : function () { //提交中執行函數 $('#manager').datagrid('loading'); //顯示載入狀態 }, success : function (data) { //提交成功後 if (data) { //判斷是否刪除了數據 $('#manager').datagrid('loaded'); //隱藏載入狀態 $('#manager').datagrid('load'); //從新加載數據表格 $('#manager').datagrid('unselectAll'); //取消全部選中的行 $.messager.show({ //刪除消息提示 title : '提示', msg : data + '個管理被刪除成功！', }); } }, }); } }); } else { //若是沒有選中任何行 $.messager.alert('提示', '請選擇要刪除的記錄！', 'info'); //提示信息 } }, //修改 edit : function () { //點擊修改執行 var rows = $('#manager').datagrid('getSelections'); //獲取選中數組 if (rows.length > 1) { //數組長度大於1 $.messager.alert('警告操做！', '編輯記錄只能選定一條數據！', 'warning'); //提示只能選中一條 } else if (rows.length == 1) { //判斷若是隻選擇了一條 $.ajax({ //ajax url : 'getManager.php', type : 'post', data : { id : rows[0].id, //將要修改的id發送 }, beforeSend : function () { //提交時執行 $.messager.progress({ //提示信息 text : '正在獲取中...', }); }, success : function (data, response, status) { //提交成功後 $.messager.progress('close'); //關閉提示信息 if (data) { //判斷若是獲取成功 var obj = $.parseJSON(data); //將JSON轉換成js格式 var auth = obj[0].auth.split(','); //獲取要修改數據的權限，格式化分隔符 $('#manager_edit').form('load', { //讀取數據填充到表單 id : obj[0].id, //將id填充到name爲id輸入框 manager_edit : obj[0].manager, //將用戶名填充到name爲manager_edit輸入框 //auth_edit : obj[0].auth, }).dialog('open'); //打開對話框 //分配權限 $('#auth_edit').combotree({ //樹形下拉框 url : 'nav.php', //獲取樹形目錄 required : true, //不能爲空 lines : true, //顯示虛線 multiple : true, //支持多選 checkbox : true, //顯示覆選框 onlyLeafCheck : true, //只有底層目錄顯示覆選框 onLoadSuccess : function (node, data) { //數據加載成功後觸發 var _this = this; if (data) { //判斷獲取到樹形數據 $(data).each(function (index, value) { //遍歷目錄 if ($.inArray(value.text, auth) != -1) { //查找遍歷到的權限名稱在數組裏的下標，是否等於-1 $(_this).tree('check', value.target); //勾選指定節點，說明是已有權限 } if (this.state == 'closed') { //判斷若是有子目錄 $(_this).tree('expandAll'); //展開全部目錄 } }); } }, }); } else { //判斷若是獲取失敗 $.messager.alert('獲取失敗！', '未知錯誤致使失敗，請重試！', 'warning'); //提示失敗信息 } } }); } else if (rows.length == 0) { //若是一條沒選中 $.messager.alert('警告操做！', '編輯記錄至少選定一條數據！', 'warning'); //提示選擇信息 } }, }; });
parseJSON()將JSON格式轉換成js原生格式
相關文章
- 1. Bootstrap後臺管理界面模板(ACE後臺管理界面)
- 2. Easyui 搭建後臺管理界面
- 3. Django後臺管理界面
- 4. 三、後臺管理界面展示
- 5. easyui 後臺管理系統
- 6. 16Solr後臺管理界面介紹
- 7. solr--3.後臺管理界面介紹
- 8. 後臺管理
- 9. MongoPress後臺管理界面欣賞
- 10. EasyUI 搭建後臺登陸界面和管理系統主界面
- 更多相關文章...
- • Rust 組織管理 - RUST 教程
- • Swarm 集羣管理 - Docker教程
- • Docker 清理命令
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Bootstrap後臺管理界面模板(ACE後臺管理界面)
- 2. Easyui 搭建後臺管理界面
- 3. Django後臺管理界面
- 4. 三、後臺管理界面展示
- 5. easyui 後臺管理系統
- 6. 16Solr後臺管理界面介紹
- 7. solr--3.後臺管理界面介紹
- 8. 後臺管理
- 9. MongoPress後臺管理界面欣賞
- 10. EasyUI 搭建後臺登陸界面和管理系統主界面