JQuery EasyUI(56)

                  第三十九章： 後臺管理界面--管理員管理[4]

學習要點：

1. 修改管理員
2. 刪除管理員
3. 其他操作

---

//manager.php
<?php
   session_start();
   if(!isset($_SESSION['admin'])){
      header('location:login.php');
    }
?>
 
<table id="maneger"></table>
<div id="manager_tool" style="padding:5px;">
  <div style="margin-buttom:5px;">
     <a href="#" class="easyui-linkbutton" iconCls="icon-add-new" plain="true" οnclick="manager_tool.add();">添加</a>
     <a href="#" class="easyui-linkbutton" iconCls="icon-deit-new" plain="true" οnclick="manager_tool.edit();">修改</a>
     <a href="#" class="easyui-linkbutton" iconCls="icon-delete-new" plain="true"
οnclick="manager_tool.remove();">刪除</a>
     <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"  οnclick="manager_tool.reload();>刷新</a>
     <a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true"  οnclick="manager_tool.redo();>取消選擇</a>
  </div>
   <div style="padding:0 0 0 7px;color='#ccc'">
       查詢賬號：<input type="text" name="user" class="textbox" style="width:100px">
       創建時間從：<input type="text" name="date_from" class="easyui-datebox" 
 editable="false" style="width:100px"> 到：<input type="text" name="date_to" class="easyui-datebox" editable="false" style="width:100px">
       <a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="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="200px"></p>
   <p>管理密碼：<input type="password" name="password" class="textbox" style="200px"></p>
   <p>分配權限：<input id="auth" name="auth" class="textbox" style="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="200px">
   <p>賬號管理：<input type="text" name="manager_edit" disable="true" class="textbox" style="200px"></p>
   <p>管理密碼：<input type="password" name="password_edit" class="textbox" style="200px"></p>
   <p>分配權限：<input id="auth_edit" name="auth_edit" class="textbox" style="205px"></p>   
</form>
<script type="text/javascript" src="js/manager.js"></scrtpt>

 

//manager.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';
          title:'自動編號';
          width:200px;
          checkbox:true;
         }
         {
          field:'manager';
          title:'管理員賬號';
          width:200px;
         }
         {
          field:'auth';
          title:'擁有權限';
          width:200px;
         }
         {
          field:'date';
          title:'創建日期';
          width:200px;
         }
        ]];
  });
 
  $('#manager_add').dialog({
      width:350,
      title:'新增管理',
      modal:true,
      closed:true,
      iconCls:'icon-user-add',
      buttons:[{
        text:'提交',
        iconCls:'icon-add-new',
        headler:function(){
           if($('#manager_add').from('validate')){
             $.ajax({
             url:'addManager.php',
             type:'post',
             data:{
              manager:$('input[name="manager"]').val,
              password:$('input[name="password_edit"]').val,
              auth:$('#auth').comboTree('getText'),
              },
              beforeSend:function(){
               $.message.progress({
                   text:'正在新增中……',
                });
             },
              success:function(data,response,status){
                $.message.progress('close');
                 if(data>0){
                   $.message.show({
                     title:'提示',
                     msg:'新增管理成功！',
                  });
                   $('#manager_add').dialog('close').form('reset');
                   $('#manager').datagrid('reload');
               }else{
                   $.message.alert('新增失敗！','未知錯誤導致失敗，請重試！','warning');
               }
             }
           });
          }
        },
      },{
        text:'取消',
        iconCls:'icon-redo',
        headler: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',
        headler:function(){

           if($('#manager_edit').from('validate')){
             $.ajax({
             url:'updateManager.php',
             type:'post',
             data:{
                id:$('input[name="id"]').val,
                password:$('input[name="password"]').val,
                auth:$('input[#auth_edit]').combotree('getText'),
              },
              beforeSend:function(){
               $.message.progress({
                   text:'正在修改中……',
                });
             },
              success:function(data,response,status){
                $.message.progress('close');
                 if(data>0){
                   $.message.show({
                     title:'提示',
                     msg:'修改管理成功！',
                  });
                   $('#manager_edit').dialog('close').form('reset');
                   $('#manager').datagrid('reload');
               }else{
                   $.message.alert('修改失敗！','未知錯誤或沒有任何修改，請重試！','warning');
               }
             }
           });
          }


        },
      },{
        text:'取消',
        iconCls:'icon-redo',
        headler: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[3,60]',
      missingMessage:'請輸入管理密碼',
      invalidMessage:'管理密碼在6-30位',
   });  

 //修改管理密碼：
   $('input[name="password_edit"]').validatebox({
      //required:true,
      validType:'length[3,60]',
      missingMessage:'請輸入管理密碼',
      invalidMessage:'管理密碼在6-30位',
   });  
 
 //分配權限
   $('#auth').tree({
    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 = $('#box').datagrid('getSelections');
        if(rows.length > 0){
          $.messager.infirm('確定操作','你正在要刪除所選的記錄嗎？',function(flag){
             if(flag){
               var ids = [];
               for(var i= 0;i<rows.length;i++){
                   ids.push(rows[i].id);
                }
                 console.log(ids.join(','));
 
                $.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){
           $.message.alert('警告操作！','編輯記錄只能選定一條數據！','warning');
          }else if(rows.length == 1){

           $.ajax({
             url:'getManager.php',
             type:'post',
             data:{
              id: rows[0].id,    
              },
              beforeSend:function(){
               $.message.progress({
                   text:'正在獲取中……',
                });
             },
              success:function(data,response,status){
                $.message.progress('close');
                 if(data>0){
                   var obj = $.parseJSON(data);
                   var auth = $boj[0].auth.split(',');

                   $('#manager_edit').from('load',{
                     id: obj[0].id,
                     manager_edit: obj[0].manager,
                     //auth_edit: obj[0].auth,    
                    }).dialog('open');  

                    //分配權限
                    $('#auth_edit').tree({
                      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){
                               $(_this).tree('check',value.target);
                             } 
                             if(this.state == 'closed'){
                                $(_this).tree('expandAll');
                              }
                            });
                          }
                        },
                     });
                 }else{
                   $.message.alert('獲取失敗！','未知錯誤導致失敗，請重試！','warning');
                 }
               }
            });
          }else if(rows.length == 0){
           $.message.alert('警告操作！','編輯記錄至少選定一條數據！','warning');
         }      
       },
 
     };
 
  });

//updateManager.php

<?php

   require 'config.php';
 
   $id = $_POST['id']; 
   $auth = $_POST['auth'];

   if(!empty($_POST['password'])){
    $password = sha1($_POST['password']);
    mysql_query("UPDATE easyui_admin SET password='$password',auth='$auth' WHERE id='$id'") or die('SQL 錯誤！');
   }else{
   mysql_query("UPDATE easyui_admin SET auth='$auth' WHERE id='$id'") or die('SQL 錯誤！');
   }
    
  echo mysql_affected_rows();
  mysql_close();

?>

//deleteManager.php
<?php

  require 'config.php';
 
  $id = $_POST['ids']; 

  mysql_query("DELETE FROM easyui_admin  WHERE id IN ($ids)") or die('SQL 錯誤！');
      
  echo mysql_affected_rows();

  mysql_close();

?>

 

作者：Roger_CoderLife

鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/106112033

本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載