EasyUi入门之Layout布局,手风琴和树的知识点

最新推荐文章于 2019-07-08 13:00:16 发布

万人愉

最新推荐文章于 2019-07-08 13:00:16 发布

阅读量632

点赞数

分类专栏： web前端 ssh框架 java 文章标签： easyui jsp javaweb

本文链接：https://blog.csdn.net/qq_37111857/article/details/79115416

版权

java 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

ssh框架

2 篇文章 0 订阅

订阅专栏

web前端

1 篇文章 0 订阅

订阅专栏

总结了一下这星期所学的课程 EasyUi 觉的在后台管理的时候有一个界面挺好的
Easyui是基于jQuery的用户界面插件集合；
完整支持HTML5的完美框架；

本博客简述了实现步骤以及完整实现代码如有问题请微信 :aikele1379

1.百度JQuery EasyUi中文网下载EasyUI
网址:[http://www.jeasyui.net/download/]
2.主要文件放置路径(可以把下载的文件全部放进去)

3.Layout,手风琴和树布局效果
效果图
这里写图片描述
代码实现
(1)首先准备是要准备好的:EasyUi文件放在WebContext下面的res(如果没有请手动创建)文件
(2)引用EasyUi文件

<link rel="stylesheet" type="text/css" href="res/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="res/themes/icon.css">
<link rel="stylesheet" type="text/css" href="res/demo.css">
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/jquery.easyui.min.js"></script>

(3)Layout布局搭建

<div style="margin:20px 0;"></div>
<!-- 整个布局 -->
<div class="easyui-layout" style="width:1000px;height:550px;">

    <!-- 上边  -->
    <div data-options="region:'north'" style="height:100px;background:#B3DFDA" title="电脑配件系统"></div>        
    <!-- 下边  -->
    <div data-options="region:'south',split:true"  style="height:100px;background:#A9FACD" title="我是布局的上方哦"></div>
    <!-- 右边  -->
    <div data-options="region:'east',split:true" title="East" style="width:200px;"></div>
    <!-- 左边  -->
    <div data-options="region:'west',split:true" title="管理列表" style="width:200px;"></div>
    <!-- 中间  -->
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"></div>

</div>

总体布局也算是搭好了下面就该实现树和手风琴的功能了,不过在这之前树状结构我在这用的是从数据库获取的信息,通过JSON传递数据到树
数据库:采用通过查询id获取信息 id互相关联. 不多说截图献上,请思考红框内容
这里写图片描述

查询数据库返回给JSP显示页面

//在此用的Hibernate的sessionFactory.getCurrentSession().createQuery查询方法
    @Override 
    public List<Tree> findTree(int id) {
        List<Tree> list=(List<Tree>) sessionFactory.getCurrentSession().createQuery("from Tree where parentid = " + id).list();
        return list;
    }

Action层获取传值方法

    //调用查询方法  返回字符串给Struts2.xml接受
    public String jsonTree() {
        list = service.findTree(id);
        return "jsontree";
    }

Struts2.xml action配置文件

<action name="trees" class="computerAction" method="jsonTree">
            <result name="jsontree" type="json">
                <param name="root">list</param>
            </result>
        </action>

JSP页面树接受并显示实现

此获取数据库实现树代码可以放在Layout布局中的任意一个, 根据需求自行解决

    <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>

上面代码实现树
下面代码实现手风琴

<!-- 手风琴样式实现 -->
            <div class="easyui-accordion" data-options="fit:true,border:false">
                <div title="电脑管理" style="padding:10px;">
                    <ul class="easyui-tree" data-options="url:'trees',method:'get' "></ul>
                </div>
                <div title="添加电脑配件" style="padding:10px;">
                    <a href="addComputerParts.jsp">添加电脑配件</a>
                </div>
                <div title="查看电脑配件" data-options="selected:true" style="padding:10px;">
                    <a href="findAllComputer">查看电脑配件</a>
                </div>
                <div title="查看电脑" style="padding:10px">
                    <a href="selectComputer">查看电脑</a>
                </div>
                <div title="添加电脑" style="padding:10px">
                    <a href="selectparts">添加电脑</a>
                </div>
            </div>

好了到此整个代码已经简述完了 , 下面JSP代码是EasyUi布局的 Layout 树和手风琴代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUi</title>
    <link rel="stylesheet" type="text/css" href="res/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="res/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="res/demo.css">
    <script type="text/javascript" src="res/jquery.min.js"></script>
    <script type="text/javascript" src="res/jquery.easyui.min.js"></script>
</head>
<body>
    <div style="margin:20px 0;"></div>
    <div class="easyui-layout" style="width:1000px;height:550px;">

        <!-- 上边  -->
        <div data-options="region:'north'" style="height:100px;background:#B3DFDA" title="电脑配件系统"></div>        
        <!-- 下边  -->
        <div data-options="region:'south',split:true"  style="height:100px;background:#A9FACD" title="我是布局的上方哦"></div>
        <!-- 右边  -->
        <div data-options="region:'east',split:true" title="East" style="width:200px;">
            <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
        </div>
        <!-- 左边  -->
        <div data-options="region:'west',split:true" title="管理列表" style="width:200px;">

            <!-- 手风琴样式实现 -->
            <div class="easyui-accordion" data-options="fit:true,border:false">
                <div title="电脑管理" style="padding:10px;">
                    <ul class="easyui-tree" data-options="url:'trees',method:'get' "></ul>
                </div>
                <div title="添加电脑配件" style="padding:10px;">
                    <a href="addComputerParts.jsp">添加电脑配件</a>
                </div>
                <div title="查看电脑配件" data-options="selected:true" style="padding:10px;">
                    <a href="findAllComputer">查看电脑配件</a>
                </div>
                <div title="查看电脑" style="padding:10px">
                    <a href="selectComputer">查看电脑</a>
                </div>
                <div title="添加电脑" style="padding:10px">
                    <a href="selectparts">添加电脑</a>
                </div>
            </div>

        </div>


        <!-- 中间  -->
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        </div>
    </div>
</body>
</html>

谢谢!!!

万人愉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
EasyUi入门之Layout布局,手风琴和树的知识点

总结了一下这星期所学的课程 EasyUi 觉的在后台管理的时候有一个界面挺好的 Easyui是基于jQuery的用户界面插件集合；完整支持HTML5的完美框架；本博客简述了实现步骤以及完整实现代码如有问题请微信 :aikele13791.百度JQuery EasyUi中文网下载EasyUI 网址:[http://www.jeasyui.net/download
复制链接

扫一扫

专栏目录