基於easyui 寫的後臺管理系統（用戶角色，角色功能）的實現

時間 2019-11-29

標籤基於 easyui 寫的後臺管理系統用戶角色功能實現简体版

原文原文鏈接

學了後臺管理系統後，本身嘗試寫了個一些零碎的功能塊，以便增強本身對Easyui的理解和具體運用。javascript

那後臺管理信息系統裏最重要的一塊應該是用戶與角色，角色與功能，之間的關係了，整理了下這兩個模塊的代碼發上來。css

1.用戶角色模塊是用了兩個表格來實現，能夠對不一樣用戶所對應的角色進行簡單的編輯刪除和增長。html

++++++++++++++++++++++++++++++++++++++++java

頁面就是用了easyui組件，好比表格的樣式還有分頁條等內容，組件裏一些屬性和方法也能夠更加方便的實現功能的實現。具體可參照easyui的API。後臺傳過來的值也只需跟表格字段裏的鍵值一一對應就能夠了，代碼中對於增長用戶、刪除用戶等方法的實現用的是ajax方法。jquery

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>用戶角色設置</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <link rel="stylesheet" type="text/css" href="Common/jquery-easyui-1.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="Common/jquery-easyui-1.5/themes/default/easyui.css">
    <script type="text/javascript" src="Common/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="Common/jquery-easyui-1.5/jquery.min.js"></script>
    <script type="text/javascript" src="Common/jquery-easyui-1.5/jquery.easyui.min.js"></script>

  </head>
  
  
    <body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
          <a href="Web/Jsp/Main2.jsp">轉到角色功能</a>
    </div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
    <div data-options="region:'east',iconCls:'icon-reload',title:'角色設置',split:true" style="width:650px;">
       <table id="dg2" class="easyui-datagrid" title="用戶信息" style="width:700px;height:336px" 
  data-options="url:'servlet/roleServlet',fitColumns:true,pagination:true,pageList:[10]">   

        <thead>
            <tr>
                <th data-options="field:'RoleId',checkbox:'true',width:40"></th>
                <th data-options="field:'Title',width:60">角色名稱</th>
                <th data-options="field:'Memo',width:120">說明</th>
            </tr>
        </thead>
        </table>
        <div id="tb2">    
            <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="save()">保存設置</a> 
        </div>        
    </div>   
    <div data-options="region:'west',title:'用戶維護',split:true" style="width:700px;">
      <table id="dg1" class="easyui-datagrid" title="用戶信息" style="width:700px;height:336px" 
          data-options="url:'servlet/userServlet',fitColumns:true,singleSelect:true,pagination:true,pageList:[10]">   

        <thead>
            <tr>
                <th data-options="field:'UserId',width:40"> </th>
                <th data-options="field:'UserName',width:60">用戶名</th>
                <th data-options="field:'UserPwd',width:120">用戶密碼</th>
                <th data-options="field:'Name',width:60,align:'right'">姓名</th>
                <th data-options="field:'Phone',width:300,">用戶聯繫電話</th>
                <th data-options="field:'Memo',width:80,align:'right'">備註</th>
                <th data-options="field:'_operate',width:120,align:'center',formatter:formatOper">操做</th>
            </tr>
        </thead>
    </table>
      <div id="tb1">    
    <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">增長用戶</a> 
    </div>
    </div>     
    <!-- ++++++++++++++++++++彈出的增長用戶框++++++++++++++++++++++++++++++++++++++++ --> 
      <div class="easyui-dialog" id="add" 
        data-options="title:'增長用戶',closable:true,closed:true,buttons:[{text:'肯定',handler:queding},{text:'關閉',handler:function(){$('#add').dialog('close')}}]">

         <table>
            <tr><td>用戶名:<td><input name="UserName" type="text" id="username"></td></td></tr>
            <tr><td>用戶密碼：<td><input name="UserPwd" type="text" id="userpwd"></td></td></tr>
            <tr><td>姓名：<td><input name="Name" type="text" id="name"></td></td></tr>
            <tr><td>用戶聯繫電話：<td><input name="Phone" type="text" id="phone"></td></td></tr>
            <tr><td>備註：<td><input name="Memo" type="text" id="memo"></td></td></tr>
            </table>
        </div>
     
  </body>
  <script type="text/javascript">

    function formatOper(value,row,index){  
            
              return '<a href="javascript:void(0);" onclick="bianjiUser('+index+')">編輯</a> <a href="javascript:void(0);" onclick="shanchuUser('+index+')">刪除</a>';
        };
    //++++++++++增長用戶按鈕++++++++    
    $("#dg1").datagrid({
        toolbar:'#tb1'
    });
    //+++++增長用戶+++++
       function add(){
         $('#add').dialog('open').dialog({
                title:增長用戶,
                modal: true
         });
       };
       
       function queding(){
                                                   
         var message={
                        "username":$("#username").val(),
                        "userpwd":$("#userpwd").val(),
                        "name":$("#name").val(),
                        "phone":$("#phone").val(),
                        "memo":$("#memo").val(),
                    };
             if($("#username").val()!=""&&$("#userpwd").val()!=""&&$("#name").val()!=""&&$("#phone").val()!=""&&$("#memo").val()!="")
              {
                  $.ajax({
                      type:"post",
                      url:"servlet/adduserServlet",
                      data:{"Message":JSON.stringify(message)},
                      success:function(){
                         $('#dg1').datagrid('reload');
                         alert("添加成功！");
                        $("#username").val("");
                        $("#userpwd").val("");
                        $("#name").val("");
                        $("#phone").val("");
                        $("#memo").val("");
                      }
                    })  
                    
                } 
                else{alert("請填寫完整！");
                       $("#username").val("");
                        $("#userpwd").val("");
                        $("#name").val("");
                        $("#phone").val("");
                        $("#memo").val("");
                    }             
                
       }
     //++++++++++用戶編輯+++++++++++++
       function  bianjiUser(index){
               
             alert(index);   
        }
     
     //++++++++++++用戶刪除++++++++++++++++  
        function shanchuUser(index){
           $.ajax({
               type:"post",
               url:"servlet/shanchuServlet",
               data:{"index":index},
               success:function(){
                  $("#dg1").datagrid('reload');
               }
           });
           
        }
    //++++++++保存設置按鈕+++++++++
    $("#dg2").datagrid({
        toolbar:'#tb2'
     });
     //=====保存設置===== 
      function save(){
         var userow=$('#dg1').datagrid("getSelected");
         var rows1=$('#dg2').datagrid("getChecked");
         $.ajax({                           //先刪除用戶所對應的角色
             type:"post",
             url:"servlet/deleteServlet",
             data:{"userid":userow.UserId},
         });
         
            $.ajax({                        //再將勾選的角色保存
                  type:"post",
                  url:"servlet/saveServlet",
                  data:{"rows":JSON.stringify(rows1),"userid":userow.UserId}
            })
       
         
       };
        
         $("#dg1").datagrid({
                //================點擊用戶選中角色============
              onClickRow:function(Index,rowData){
              var rows = $('#dg2').datagrid("getRows");
              $("#dg2").datagrid('uncheckAll');
                  $.ajax({
                       type:"post",
                       url:"servlet/ru2Servlet",
                       data:{"Userid":rowData.UserId},
                       success:function(array1){
                          for(var i=0;i<array1.length;i++){
                              for(var j=0;j<rows.length;j++){
                               if(array1[i]==rows[j].RoleId){
                                    $("#dg2").datagrid('checkRow',j);                                 
                               }
                            }                            
                          }
                       }
                  });
               }
         });
          
             
       $("#dg2").datagrid({
       //============勾選角色保存設置=====
            onCheck:function(Index,rowData){
               $.ajax({
                     type:"post",
                     url:"servlet/ru1Servlet",
                     data:{"roleid":rowData.RoleId},
                     dataType:"json",
                     
               });
               
            }
       });
     //  var rows = $('#dg2').datagrid('getSelected');
     //   alert(rows.Title);
       
        
        
  </script>
</html>