JQuery EasyUI(54)

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

學習要點：

1. 前端新增管理
2. 服務器端新增

---

<!-- admin.css -->
.logo{
    width:180px;
    height:50px;
    line-height:50px;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    float:left;
    color:#fff;
}
.logout{
    float:right;
    padding:30px 15xp 0 0;
    color:#fff;
}
 
.dialog_button{
    text-align:center; 
}

.textbox{
   heigth:22px;
   padding:0 2px;
}

a{
    color:#fff;
    text-decoration:none;
}
 
a:hover{
    text-decoration:underline;
}

//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="obj.edit();">修改</a>
     <a href="#" class="easyui-linkbutton" iconCls="icon-delete-new" plain="true"
οnclick="obj.remove();">刪除</a>
     <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"  id="save">保存</a>
     <a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true"  id="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="textbox" 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"]').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');
        },
        }];
  });

  //賬號管理：
   $('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位',
   });  

 //分配權限
   $('#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 = {
     add:function(){
       $('#manager_add').dialog('open');
       $('input[name="manager"]').focus();
         },
     };

  });
});

<?php
  //addManager.php

   require 'config.php';
   
   $manager = $_POST['manager'];
   $password = sha1($_POST['password']);
   $auth = $_POST['auth'];
   $date = time();

   mysql_query("INSERT INTO easyui_admin (manager,password,auth,date) VALUES ('$manager','$password','$auth','$date')") or die('SQL 錯誤！');
   echo mysql_affected_rows();
   mysql_close();    
?>

 

 

作者：Roger_CoderLife

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

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