基于easyui的后台程序开发

easyui是一套非常成熟的ui框架，本文介绍用它来开发一套后台程序。

最后要实现的效果预览

主页分为几个区域，北区显示系统名称，用户登录信息等；西区显示菜单树；东区显示主视图；南区显示版权系统信息。

主页代码 index.html

    
    

    
    
    
    
    

    

    




    

        欢迎你,Admin 退出
    


   
 © 2016 All Rights Reserved 



    
        
            
            

                折叠所有

                展开所有

            
            
            
        
        

         

             
hello
         
        
    

菜单加载部分,tree.json ，后台需要根据登录管理员的角色，加载不同的tree 。这个一个简单tree的例子。

\[{
  "id":1,
  "text":"管理系统",
  "iconCls":"icon-book",
  "children":\[{
    "text":"人员管理",
    "checked":true,
    "url":"list.html"
  }\]
},{
  "text":"其他",
  "state":"closed",
  "children":\[{
    "text":"Easyui官网",
    "url":"http://www.jeasyui.com/"
  },
    {
      "text":"蓝旗子",
      "url":"http://www.yf2017.top/"
    }
  \]
}\]

列表页 list.html， 主要是表头信息，及数据的格式化处理。

    
    
    
    
    
    
    




    
    
        姓名
        账号
        性别
        电话
        部门
        岗位
    
    


    新建
    编辑
    移除
    


        姓名 
       性别 
        全部
            男
            女
        
        部门 
        职位 
        查询
    



    
用户信息
    
        

            姓名:
            
        
        

            账号:
            
        
        

            性别:
            
                男
                女
            
        
        

            电话:
            
        
        

            部门:
            
        
        

            职位:
            
        
    


    保存
    取消


    var url;
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','新建用户');
        $('#fm').form('clear');
        url = 'saveU.json';
    }
    function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','编辑用户');
            $('#fm').form('load',row);
            url = 'updateU.json?id='+row.id;
        }
    }
    function saveUser(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close'); // close the dialog
                    $('#dg').datagrid('reload'); // reload the user data
                }
            }
        });
    }
    function destroyUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('确认','你确定要删除该用户吗?',function(r){
                if (r){
                    $.post('deleteU.json',{id:row.id},function(result){
                        if (result.success){
                            $('#dg').datagrid('reload'); // reload the user data
                        } else {
                            $.messager.show({ // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }

    function doSearch(){
        $('#dg').datagrid({url:'api.json?name='+$("#qname").val()});
    }


    #fm{
        margin:0;
        padding:10px 30px;
    }
    .ftitle{
        font-size:14px;
        font-weight:bold;
        padding:5px 0;
        margin-bottom:10px;
        border-bottom:1px solid #ccc;
    }
    .fitem{
        margin-bottom:5px;
    }
    .fitem label{
        display:inline-block;
        width:80px;
    }
    .fitem input{
        width:160px;
    }

列表页数据-api.json，必须包含easyui定义的一些数据项，如 lastPage, pageSize, pageNumber, firstPage, rows等。下面是一个简单的例子。

{"lastPage":true,"pageSize":10,"pageNumber":1,"firstPage":true,"rows":\[{"id":75,"sex":"男","email":null,"tel":"1856666666","name":"多米多","modify":"0","job":"开发","account":"duomiduo","dept":"研发部/技术","wechat":null}\],"total":1,"totalPage":1}

新增数据在当前页弹出一个dialog, 填写完相关数据元素后，保存，系统ajax反馈。

保存反馈 saveU.json

{"id":75,"sex":"男","email":null,"tel":"1856666666","name":"多米多","modify":"0","job":"开发","account":"duomiduo","dept":"研发部/技术","wechat":null}

删除反馈 deleteU.json

{"success":"true"}