文档章节

easyUI-后台管理界面

Clover286
 Clover286
发布于 2017/05/06 22:18
字数 1013
阅读 203
收藏 1

一.使用场景

二.主要方法

tree(树):制作左侧导航

DataGrid(数据表格):制作右侧数据管理

三.使用方法(参考easyui文档和网易云课堂easyui教学视频)

HTML(管理页)

<%--整体布局开始--%>
<div id="cc" class="easyui-layout" style="width:100%;height:100%;">
    <%--左侧导航栏开始--%>
    <div data-options="region:'west',title:'导航',split:true" style="width:20%;padding: 10px;">
        <ul id="nav"></ul>
    </div>
    <%--左侧导航栏结束--%>
    <%--右侧内容区域开始--%>
    <div data-options="region:'center'" style="padding:5px;background:#eee;overflow: hidden;">
        <div id="tabs">
            <div title="起始页">
                欢迎来到后台管理页面!
            </div>
        </div>
    </div>
    <%--右侧内容区域结束--%>
</div>
<%--整体布局结束--%>

JS(管理页)

/**
 * Created by Administrator on 2017/3/17.
 */
//tab设置
$(function(){
$("#tabs").tabs({
    fit:true,
    border:false,
})
    // 导航条
$("#nav").tree({
    data: [{
        text: '评论管理',
        url:'manage/discuss',
    },{
        text: '商品管理',
        url:'manage/products',
    }],
    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,
                })
            }
        }
    }


})
})

评论管理HTML:(注意:这个页面是会嵌套到管理页面的center区域即右侧的内容区域,所以这个页面不要再次加载如下注释掉的内容,因为管理页面已经加载过了easyUI相关的依赖,重复加载会出问题,如果是单独一个页面就要加载)

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/3/17
  Time: 14:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>--%>
<%--<%@ taglib prefix="fm" uri="http://java.sun.com/jsp/jstl/fmt" %>--%>
<%--<%--%>
    <%--String path = request.getContextPath();--%>
    <%--String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()--%>
            <%--+ path + "/";--%>
<%--%>--%>
<%--<html>--%>
<%--<head>--%>
    <%--<title>管理</title>--%>
    <%--<link rel="stylesheet" href="easyui/themes/default/easyui.css">--%>
    <%--<link rel="stylesheet" href="easyui/themes/icon.css">--%>
<%--</head>--%>
<%--<body>--%>
<%--编辑表开始--%>
<table id="dg"></table>
<%--编辑表结束--%>
<%--工具栏开始--%>
<div id="tb" style="width: 100%;">
    <div>
        <a href="#" id="agree" class="easyui-linkbutton" iconCls="icon-ok" plain="true">批准</a>
        <a href="#" id="cancel" class="easyui-linkbutton" iconCls="icon-cancel" plain="true">驳回</a>
        <a href="#" id="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        <a href="#"  class="easyui-linkbutton tbSubmit" onclick="obj.search()" iconCls="icon-search">查询</a>
        <input type="text" class="tbSearch" name="username" placeholder="请输入用户名">
    </div>
</div>
<%--工具栏结束--%>
<%--<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/discuss.js"></script>
<%--</body>--%>
<%--</html>--%>

评论管理js:

/**
 * Created by Administrator on 2017/5/6.
 */
//数据加载和分页
$('#dg').datagrid({
    url:'manage/discuss/show',
    toolbar:$("#tb"),
    columns:[[
        {field:'id',title:'编号',checkbox:true,width:100,},
        {field:'user',title:'用户名',width:100,align:'center',formatter:function (value,row) {
            if(row.user){
                return row.user.username;
            }

        }},
        {field:'detail',title:'内容',resizable:true,align:'center',width:100,},
        {field:'creatTime',title:'时间',sortable:true,align:'center',width:100,},
        {field:'stars',title:'评论星级',align:'center,width:100,'},
        {field:'state',title:'审核状态', align:'center',width:100,formatter:function (value,row) {
            if(value==0){
                return "待审核"
            }else if(value==1){
                return "审核通过"
            }else if(value==2){
                return "审核不通过"
            }
        }}


    ]],
    pagination:true,
    pageList:[5,10,15,20],
    pageSize:5,
    remoteSort:false,
    fitColumns:true,
    striped:true,
    rownumbers:true,
    onLoadError:function(){
        alert("加载出错,请检查您输入的词是否有误")
    }
});
//根据用户名查询评论
obj={
    search:function(){
        $("#dg").datagrid('load',{
            'username':$.trim($('input[name="username"]').val())
        })
    }
}
// 删除评论
$(function(){
    $("#delete").click(function () {
        var ids=[];//所有选中行的id数组
        var rows= $('#dg').datagrid("getSelections");//获得所有选中的行
        for(var i=0; i<rows.length; i++){
            ids.push(rows[i].id);
        }
        if(ids.length>0){
            $.ajax( {
                url:'manage/discuss/delete',
                data:{
                    ids : ids,
                },
                type:'post',
                cache:false,
                dataType:'json',
                traditional:true,
            });
        }else {
            alert("您没有选择要删除的行")
        }
        $('#dg').datagrid("reload");//删除后,刷新表格数据
    })
})
// 批准评论
$(function(){
    $("#agree").click(function () {
        var ids=[];//所有选中行的id数组
        var rows= $('#dg').datagrid("getSelections");//获得所有选中的行
        for(var i=0; i<rows.length; i++){
            ids.push(rows[i].id);
        }
        if(ids.length>0){
            $.ajax( {
                url:'manage/discuss/check',
                data:{
                    ids : ids,
                    state:1,
                },
                type:'post',
                cache:false,
                dataType:'json',
                traditional:true,
            });
        }else {
            alert("您没有选择要批准的行")
        }
        $('#dg').datagrid("reload");//审核后,刷新表格数据
    })
})
// 驳回评论
$(function(){
    $("#cancel").click(function () {
        var ids=[];//所有选中行的id数组
        var rows= $('#dg').datagrid("getSelections");//获得所有选中的行
        for(var i=0; i<rows.length; i++){
            ids.push(rows[i].id);
        }
        if(ids.length>0){
            $.ajax( {
                url:'manage/discuss/check',
                data:{
                    ids : ids,
                    state:2,
                },
                type:'post',
                cache:false,
                dataType:'json',
                traditional:true,
            });
        }else {
            alert("您没有选择要驳回的行")
        }
        $('#dg').datagrid("reload");//审核后,刷新表格数据
    })
})

 

四.注意事项

4.1各tab内容页里的id不能相同,因为是加载到同一个页面。

 

© 著作权归作者所有

Clover286
粉丝 10
博文 209
码字总数 66929
作品 0
武汉
程序员
私信 提问
asp.net easyui 动态绑定下拉框

前台: 标题

李洛尘
03/20
0
0
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
0
0
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
font-awesome与easyui结合

备忘记录 最近想重拾起来,做个ERP系统,做为一个前端盲,前端框架的选择是最头痛的问题 当前bootstrap与font-awesome的组合无疑是非常有吸引力的,从网上下了N多的后台框架模板,断断续续调...

itwarcraft
2014/10/25
0
0
Java +EasyUI+SpringMvc实现Excle导入导出(上)

前言 先介绍下项目的开发环境,采用java开发语言进行开发,前台UI使用的是EasyUI框架,接下来是SpringMvc与Ejb结合来开发,整个项目管理采用的是Maven管理,服务器用的是Jboss6.2.0企业版。 ...

fightingKing
2015/01/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【JavaScript】callee 与 caller

callee callee是函数参数arguments对象的一个属性,它指向参数arguments对象所在的函数自身。 function foo (x) {console.log(arguments.callee);return x;}foo(); 从控制台中可以看...

小草先森
28分钟前
2
0
全面剖析 Knative Eventing 0.6 版本新特性

摘要: Knative Eventing 0.6 版本已经于5月15号正式发布。相比于0.5版本,此次发布包含了一些重要特性及更新。针对这些新特性以及更新,我们如何快速、精准的定位主要技术点。本篇文章针对这...

阿里云云栖社区
30分钟前
9
0
ffmpeg常用命令

1.合并两个或多个视频文件 将a.flv b.flv合并为c.flv 编辑文件flvs.txt file 'a.flv'file 'b.flv' #ffmpeg -f concat -i flvs.txt -c copy c.flv...

硅谷课堂
31分钟前
1
0
MySQL面试题--常见的四种隔离级别

什么是事务 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消。也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个...

寰宇01
31分钟前
2
0
Docker 安装 reids

0、mac上安装docker brew cask install docker 1、查询reidis docker search redis 2、拉取redis最新版本(也可以拉取指定版本,如:docker pull redis:4.0) docker pull redis 3、查看镜像 ...

moon888
39分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部