怎么使用easy_ui搭建后台ui--初试牛刀（下）管理页面的搭建以及数据的增删查改实现-前端--易笔记-weiyer.com

　　核心提示：1.效果如下图，主要是完成后台菜单的搭建，以及某个功能模块的增删查改 2.后台管理页面的搭建，使用到了Layout(布局)组件，以及Tabs(选项卡)组件，Tree(树)组件具体代码如下：!DOCT...

1.效果如下图，主要是完成后台菜单的搭建，以及某个功能模块的增删查改

怎么使用easy_ui搭建后台ui--初试牛刀（下）管理页面的搭建以及数据的增删查改实现

2.后台管理页面的搭建，使用到了Layout(布局)组件，以及Tabs(选项卡)组件，Tree(树)组件

具体代码如下：

<!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">  
  
<p data-options="region:'north',title:'header',split:true,noheader:true" style="height:60px;background:#666;">  
    <p class="logo">后台管理</p>  
    <p class="logout">您好，| <a href="logout.php">退出</a></p>  
</p>     
<p data-options="region:'south',title:'footer',split:true,noheader:true" style="height:35px;line-height:30px;text-align:center;">  
    &copy;2009-2015 SEVEN_2016. Powered by PHP and EasyUI.  
</p>      
<p data-options="region:'west',title:'导航',split:true" style="width:180px;padding:10px;">  
    <ul id="nav" class="easyui-tree"></ul>   
  
</p>     
<p data-options="region:'center'" style="overflow:hidden;">  
    <p id="tabs">  
        <p title="起始页" style="padding:0 10px;display:block;">  
            欢迎来到后台管理系统！  
        </p>  
    </p>  
</p>   
  
  
<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>

调整样式：

.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 15px 0 0;  
    color:#fff;  
}  
.dialog-button{  
    text-align:center;  
}  
a {  
    color:#fff;  
    text-decoration:none;  
}  
a:hover {  
    text-decoration:underline;  
}

面板组件的创建，导航树的实现

$('#tabs').tabs({  
        fit : true,  
        border : false,  
    });  
    $('#nav').tree({  
        url:'get_data.php',  
        lines:true,  
        onLoadSuccess:function(node,data){  
            if(data){  
                $(data).each(function(){  
                    if(this.state=='closed'){  
                        $('#nav').tree('expandAll');  
                    }  
                });  
            }  
        },  
        onClick:function(node){  
            if(node.url){  
                if($('#tabs').tabs('exists',node.text)){  
                    $('#tabs').tabs('select',node.text);  
                }else{  
                    $('#tabs').tabs('add',{  
                    title:node.text,  
                    closable:true,  
                    href:node.url  
                    });  
  
                }  
                  
            }  
        }  
    });

url返回的数据是json格式，可以从数据库取出，也可以自己构造

get_data.PHP:

[{      
    "id": 1,      
    "text": "文章管理",      
    "state": "closed",      
    "children": [{      
        "id": 11,      
        "text": "文章列表"  
          
    },{      
        "id": 12,      
        "text": "文章回收"     
    }]      
},  
{      
    "id": 2,      
    "text": "用户管理",      
    "state": "closed",      
    "children": [{      
        "id": 21,      
        "text": "用户列表",  
        "url":"user.php"   
    }]      
}  
]

如果存在url，点击之后新增一个面板，并且载入url页面，并且如果原面板已经存在，就不用创建新的面板

3.数据的增删查改的实现，使用到组件DataGrid(数据表格)组件

html代码如下:

<table id="manager"></table>

js代码如下：

$('#manager').datagrid({
    url 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: 100,
        checkbox: true,
    },
    {
        field: 'manager',
        title: '管理员帐号',
        width: 100,
    },
    {
        field: 'auth',
        title: '拥有权限',
        width: 100,
    },
    {
        field: 'date',
        title: '创建日期',
        width: 100,
    },
    ]],
});

4.管理组件：

<p style="margin-bottom:5px;">  
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="manager_tool.add();">添加</a>  
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="manager_tool.edit();">修改</a>  
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="manager_tool.remove();">删除</a>  
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" id="save" onclick="manager_tool.reload();">刷新</a>  
        <a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" id="redo" onclick="manager_tool.redo();">取消选择</a>          
    </p>

5.新增管理

页面：

<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>

js代码：

$('#manager_add').dialog({
    width: 350,
    modal: true,
    closed: true,
    title: '新增管理',
    buttons: [{
        text: '提交',
        iconCls: 'icon-add',
        handler: function() {
            if ($('#manager_add').form('validate')) {

                $.ajax({
                    url: 'addManger.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('新增失败！', '未知错误！请重试！');
                        }

                    }
                });

            }

        }
    },
    {
        text: '取消',
        iconCls: 'icon-redo',
        handler: function() {
            $('#manager_add').dialog('close').form('reset');

        }
    }],
});

点击按钮之后：

manager_tool = {
    add: function() {
        $('#manager_add').dialog('open');
        $('input[name="manager"]').focus();
    }
}

文本框的验证：

//管理账号  
$('input[name="manager"]').validatebox({
    required: true,
    validType: 'length[2,20]',
    missingMessage: '请输入管理名称',
    invalidMessage: '管理名称在2-20位！'
});
//管理密码  
$('input[name="password"]').validatebox({
    required: true,
    validType: 'length[2,20]',
    missingMessage: '请输入管理密码',
    invalidMessage: '管理密码在2-20位！'
});

以及树形数据的选择;

//分配权限  
$('#auth').combotree({
    url: 'get_data.php',
    lines: true,
    multiple: true,
    checkbox: true,
    onlyLeafCheck: true,
    onLoadSuccess: function(node, data) {
        var _this = this;
        if (data) {
            $(data).each(function() {
                if ($.inArray(data.text, auth) != -1) {
                    $(_this).tree('check', data.target)
                }
                if (this.state == 'closed') {
                    $(_this).tree('expandAll');
                }
            });
        }
    }
});

6.编辑

页面代码：

<form id="manager_edit" style="margin:0;padding:5px 0 0 25px;color:#333;">  
    <p>管理帐号：<input  name="id" type="hidden"></p>  
    <p>管理帐号：<input type="text" name="manager_edit" 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>

js代码：

//编辑  
$('#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({
                    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');
        },
    }],
});

点击按钮之后：

manager_tool = {
    edit: function() {
        //获取选择的行，  
        var rows = $('#manager').datagrid('getSelections');
        if (rows.length > 1) {
            $.messager.alert('警告操作', '编辑记录只能选定一条数据！');
        } else if (rows.length == 1) {
            $.ajax({
                url: 'getManger.php',
                type: "post",
                data: {
                    id: rows[0].id
                },
                beforeSend: function() {
                    $.messager.progress({
                        text: '正在获取中...',
                    });
                },
                success: function(data, response, status) {
                    $.messager.progress('close');
                    if (data > 0) {
                        //返回修改来的数据  
                        var obj = $.parseJSON(data);
                        var auth = obj[0].auth.split(',');
                        $('#manager_edit').form('load', {
                            id: obj[0].id,
                            manager_edit: obj[0].manager,
                            auth_edit: obj[0].auth
                        }).dialog('open');

                    } else {
                        $.messager.alert('获取失败！', '未知错误！请重试！');
                    }

                }
            });
        } else if (rows.length == 0) {
            $.messager.alert('警告操作', '编辑记录至少选定一条数据！');
        }
    }
}

7.删除

点击按钮之后：

manager_tool = {
    remove: function() {
        var rows = $('#manager').datagrid('getSelections');
        if (rows.length > 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({
                        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');
        }
    }
}

怎么使用easy_ui搭建后台ui--初试牛刀（下）管理页面的搭建以及数据的增删查改实现

时间：2017/1/4 9:29:11 点击：

本类热门

本类推荐

本类固顶

怎么使用easy_ui搭建后台ui--初试牛刀（下）管理页面的搭建以及数据的增删查改实现

时间：2017/1/4 9:29:11 点击：

您可能感兴趣的文章

相关评论

发表我的评论

本类热门

本类推荐

本类固顶