BOS物流管理系统-第一天

BOS物流管理系统-第一天-系统分析、环境搭建、前端框架

BoBo老师

 

整体项目内容目标：

  1. 对项目概述的一些理解
  2. 亮点技术的学习
  3. 注意学习方式：优先完成当天代码。
  4. 其他内容。

 

最终：

学到新的技术，会应用新的技术；对项目有个整体感觉；

 

课程安排：12天左右

 

主要内容：

  1. 项目整体概述和一般流程（项目概念、一般项目流程等）
  2. BOS项目的概述（项目背景、需求、技术架构、学习目标）
  3. 开发环境搭建
    1. 项目导入和运行（传统项目结构）（Struts2的通配符映射）
    2. 项目导入和运行（Maven项目结构）（STS开发工具）
  4. jQuery EasyUI框架（常用布局组件、Ztree菜单技术、数据表格组件等）

 

学习目标：

  1. 项目的一般流程、了解
  2. STS工具的使用、会
  3. maven的环境搭建、掌握
  4. 前端开发框架EasyUI、掌握

 

  1. 项目的整体概念和一般流程

    1. 什么是项目

我们要做项目，首先得简单了解一下什么是项目。通俗一点的解释是用有限的资源、时间为特定的客户完成特定目标的一次性工作。资源比如人财物等，时间是指有明确的开始和结束时间，不能无限期。

其实各行各业都是有项目的概念的，为了完成一个目标，都会去启动一个项目。制造汽车的有制造工程师，建设桥梁的有桥梁工程师，盖楼的有什么？民工？是建筑工程师！我们是软件工程师！

我们身处IT行业中的软件行业中，作为软件工程师，是为了做什么事情？构建信息系统。比如传统的软件行业中最常见的OA（什么是OA？办公自动化），以及现在比较流行的电商系统（都有什么？淘宝，京东）。

信息系统项目是什么？是根据用户的需求，优选各种技术和产品，进行设计开发，形成一个完整的整体，并能彼此协调工作。信息系统的目标是满足用户需求，提高用户的管理经营效率，帮助用户获取更大利润。

看出来了吧，我们做项目的最基本要求就是什么？满足用户需求。

 

P.S.:传统项目分类：OA自动化办公系统、CRM客户关系管理系统、 ERP综合管理平台.

 

OA---》MIS---》ERP（企业管理的全流程软件：进销存、人力、办公、客户管理。。）

 

 

  1. 项目的一般流程（软件项目的生命周期）

大家看看下面这个图：

软件项目的一般流程：


其中软件这块的流程（也叫生命周期）：

这个就是一个基本的项目流程（瀑布模型），也是常见的一种项目方式。其中，计划主要是可行性分析，软件设计又包括概要设计和详细设计，编码中还包含单元测试。

  • 计划阶段：做这个东西行不行（可行性）
  • 需求分析：分析要做什么
  • 设计阶段：具体怎么做？
  • 编码阶段：具体开始做
  • 测试：看看做的怎么样，有没有问题
  • 运维：软件跑起来，用起来。

 

 

  1. 项目中软件工程师所具备的基本能力

    我们所处的位置在哪？刚开始一般是在编码阶段。后续一般逐步会涉及需求的分析和设计，当然也有公司会一开始就把需求分析设计编码都扔给你。这些都称之为开发阶段，不要以为开发就是纯编码。

    需求分析和设计也是是程序员的一种能力，我会在后面的项目中逐步给大家讲解。

 

  1. 职业规划

 

三条线：

1．技术—》技术组长》架构师---》技术总监-->CTO 技术大牛

2．管理---》项目组长---》项目助理---》项目经理---》部门经理—》项目副总

3．业务---》需求-|产品（这几年越来月流行-张小龙）|跑业务

 

证书相关：

软考/pmp：    

 

  1. BOS项目概述相关

 

  1. BOS项目背景

BOS(Business Operation System)，是软件系统中最核心业务系统简称。

BOSS(Business Operation Support System业务操作支援系统-中国移动的核心系统)

本次项目的BOS是用友软件公司为宅急送公司开发ERP系统。BOS一期工程 C/S结构，二期工程B/S 结构。

项目规模：

完整项目开发周期：约1年多。（包括需求分析、系统设计、 编码、测试、 bug修复等）（现在的项目都是模块化，周期不会太长，----敏捷开发（大模块分解为小模块-快速迭代—小的里程碑）—快速开发）

参与的项目人员：40人左右（项目经理、开发人员、需求人员、产品人员、运维人员、计划人员、相关责任人-敏捷管理-SCRUM）

参与的开发人员：二三十人团队（开发时间约3、4个月—工作量80人月=20人*4月左右）。

（补充：真正完整规范的项目：需求分析设计+编码开发单元测试+集成测试运维，每一个都要占用1/3）

 

猪和鸡的故事。

项目中相关人：主要人员（猪，全投入，如开发人员）+参与人员（鸡，部分投，如产品人员，公司副总）

 

人月、人天—计量单位—》来自于《人月神话》

 

 

  1. 软件需求规格说明书

软件需求说明书也称之为软件需求规格说明书，英文SRS(Software Requirements Specification), /frs(Funtion Requirements Specification)

软件需求说明书的编制是为了使用户和软件开发者双方对该软件的初始规定有一个共同的理解， 使之成为整个开发工作的基础。包含硬件、功能、性能、输入输出、接口需求、警示信息、保密安全、数据与数据库、文档和法规的要求。

 

    BOS项目的需求规格说明书：

 

项目开发任务

  1. 需求分析(开发任务-要做什么)

项目完整开发流程：

    需求分析（需求分析文档）à系统设计（页面原型设计- Axure ,jquery easyui数据库设计 PowerDesigner ） ------ 编码 ----- 测试 ----- 集成部署和运维

 

 

 

BOS系统非常庞大，十几天学习哪些功能

涉及三大核心业务模块 ： 基础设置模块、 取派模块、中转模块

 

  • 基础设置模块： 管理物流信息基础元素信息-元数据 （取件人-快递员信息、客户所属区域、配送区域、配送时间、排班 、车辆、线路信息等…）
  • 取派模块：客户要进行快递，系统进行业务受理、系统分单到快递员、快递员到客户家取件、称重、打包、计费、派件等…
  • 中转模块： 管理货物在配送路程中间数据、出入库等…
  • 路由模块： 管理车辆和线路
  • 财务模块： 计费
  • PDA模块： 管理快递员无线电通信
  • 报表模块： 生成统计数据

 

用户权限管理： 通用权限管理系统 Apache Shiro

 

 

  1. 项目开发平台和技术

开发环境：

 

开发环境

产品环境

操作系统

Windows

Linux rhel-server-6.3

开发工具

Eclipse(Spring Tool Suite)、JDK7

JDK7

数据库

Oracle10g XE

Oracle11g

Web容器

Tomcat7

JBoss Application Server 7

浏览器

FireFox(FireBug)或Chrome(开发者工具)

  

 

 

 

开发技术：

 

编号

工具

版本

说明
 

Struts2

2.3.15.3

表现层MVC框架
 

Spring

3.2.12

业务管理IoC和AOP框架
 

Spring Data JPA

1.4.1

数据层持久层框架
 

Hibernate

3.6.10

数据层持久化框架
 

Junit

4.11

单元测试框架
 

jQuery

1.8.3

JS框架
 

jQuery Easy UI

1.3.2

JS前端UI框架
 

Ztree

3.5

JS树形菜单插件
 

Apache POI

3.9

Office文档读写框架
 

Apache CXF(Hessian)

3.1.5

接口远程调用
 

HibernateSearch(Lucene)

3.4.2

全文索引库技术
 

Apache Shiro

1.2.4

权限管理框架
 

Activiti

5.19.0.2

工作流框架
 

HighChart

4.0.4

JS报表框架
 

EhCache

2.6.10

缓存技术
 

Oracle

10.2.0.4.0

数据库
 

slf4j

1.7.5

日志技术
       

 

业务功能：上传下载、Excel解析、远程系统调用、全文检索、权限控制、工作流、报表

 

  1. 项目学习目标

1、学习可以直接在企业应用开发技术（远程系统调用集成 WebService、全文检索 Lucene 【Hibernate Search】、 权限控制 Apache Shiro 、工作流 Activiti 、 报表 HighCharts）。

2、体验项目技术变化性（数据库层Spring Data 调用 JPA、新技术）---- 运用技术解决问题。（不会的技术也能用在业务上）

3、增强动手能力（每个同学，主动动手开发）

4、团队工作氛围（有问题找组长，组长要负责全组的开发情况和问题收集，每天要提交工作日报）(我项目经理—班长项目经理助理—组长项目组长---组员)

    日报：组员写好，发给组长，组长进行汇总，再出一份日报

时间上：当天

晚上9之前（下晚自习（8。30---9点之前）—组长（9点一刻）---汇总—发给班长—最迟10点30点发送）

  1. 开发环境搭建相关

    1. 开发工具-STS的下载安装和基本设置使用

STS的下载:

http://spring.io/tools/sts

 

STS（Spring Tool Suite）:是Spring官方提供eclipse+插件的免费的Java开发工具。

 

STS的推荐优化：

 

  • 更改工作空间编码：UTF-8—必须
  • 更改JSP编码：UTF-8—必须
  • 更改字体大小：12号
  • 更改换Java代码行字符数量（java-codestyle-formatter）
  • 更改换JavaScript代码行字符数量(javascript-codestyle-formatter)
  • 关闭自动更新(automatic updates)

 

代码模版：（java-codestyle-code template）

 

  1. 原型的制作

参考： 下发C/S 结构原型，制作网页原型

 

  1. 项目原型的导入(Eclipse结构)

导入项目原型，不建议import，可以新建一个项目，将文件复制对应目录

 

新建Web工程：

配置Runtime：

填写工程名称等：

 

导入项目：

 

启动tomcat运行项目：

选择服务器和刚配置的运行时：

了解：默认情况下，项目会发布到eclipse-workspace内置的一个tomcat环境。

 

查看项目基本情况。

 

  1. 项目目录结构分析

问题：使用struts2如何限制和访问页面？

解决方案（技巧）：

  1. 业务相关页面都放在WEB-INF下，可以限制浏览器的直接访问。（Struts2推荐的项目页面存放位置，客户端无法直接访问）

  2. 使用Struts2的通配符（二级通配符映射）+Action默认的Class+我们的约定（目录和页面命名规范），来间接访问页面。

这个Action，没有class ------ 执行默认Class （struts-default.xml ），执行ActionSupport类 的 execute方法 ，返回SUCCESS。<result> 默认name就是success ，匹配结果集，将一个Action访问路径， 映射为 WEB-INF下jsp页面。

 

例如： 访问WEB-INF/pages/admin/function_add.jsp

    只需要在浏览器输入 page_admin_function_add.action 就可以

    这样做的好处： 可以使用Interceptor（拦截器）对所有jsp进行权限控制 ！

 

  1. 项目原型导入（Maven结构-项目结构重构）

    1. maven环境配置（回顾）

      1. 下载 maven 的 zip 包

解压到硬盘

    2、 配置解压/conf/settings.xml 本地仓库路径

3、配置环境变量 JAVA_HOME、M2_HOME、MAVEN_HOME， 将bin加入path

4、将之前下发 本地仓库，覆盖到仓库目录

 

Eclipse中配置maven：

    1、 window-preferences –搜索maven ，勾选源码和doc自动下载

    2、 配置外部maven路径

    3、 配置settings.xml 的位置

    4、重建索引

 

  1. 构建maven工程，移植BOS工程

 

新建maven project ，跳过骨架选择：

 

配置pom.xml 通过坐标导入jar包：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>cn.itcast.projects</groupId>

    <artifactId>mavenbos</artifactId>

    <version>0.0.1-SNAPSHOT</version>

    <packaging>war</packaging>

    <name>mavenbos</name>

    <description>物流maven</description>

 

    <properties>

        <spring.version>3.2.12.RELEASE</spring.version>

    <spring.datajpa.version>1.4.1.RELEASE</spring.datajpa.version>

        <hibernate.version>3.6.10.Final</hibernate.version>

        <slf4j.version>1.7.5</slf4j.version>

        <c3p0.version>0.9.1.2</c3p0.version>

        <oracle.version>10.2.0.4.0</oracle.version>

        <struts2.version>2.3.15.3</struts2.version>

        <servlet.version>2.5</servlet.version>

        <jsp.version>2.0</jsp.version>

        <junit.version>4.11</junit.version>

    </properties>

 

    <dependencies>

        <dependency>

            <groupId>org.springframework</groupId>

            <artifactId>spring-context</artifactId>

            <version>${spring.version}</version>

        </dependency>

        <dependency>

            <groupId>org.springframework</groupId>

            <artifactId>spring-aspects</artifactId>

            <version>${spring.version}</version>

        </dependency>

        <dependency>

            <groupId>org.springframework</groupId>

            <artifactId>spring-orm</artifactId>

            <version>${spring.version}</version>

        </dependency>

        <dependency>

            <groupId>org.springframework</groupId>

            <artifactId>spring-web</artifactId>

            <version>${spring.version}</version>

        </dependency>

        <dependency>

            <groupId>org.springframework</groupId>

            <artifactId>spring-test</artifactId>

            <version>${spring.version}</version>

        </dependency>

        <dependency>

            <groupId>org.springframework.data</groupId>

            <artifactId>spring-data-jpa</artifactId>

            <version>${spring.datajpa.version}</version>

        </dependency>

        <dependency>

            <groupId>org.hibernate</groupId>

            <artifactId>hibernate-core</artifactId>

            <version>${hibernate.version}</version>

        </dependency>

        <dependency>

            <groupId>org.hibernate</groupId>

            <artifactId>hibernate-entitymanager</artifactId>

            <version>${hibernate.version}</version>

        </dependency>

        <dependency>

            <groupId>org.slf4j</groupId>

            <artifactId>slf4j-log4j12</artifactId>

            <version>${slf4j.version}</version>

        </dependency>

        <dependency>

            <groupId>c3p0</groupId>

            <artifactId>c3p0</artifactId>

            <version>${c3p0.version}</version>

        </dependency>

        <dependency>

            <groupId>com.oracle</groupId>

            <artifactId>ojdbc14</artifactId>

            <version>${oracle.version}</version>

            <scope>runtime</scope>

        </dependency>

        <dependency>

            <groupId>org.apache.struts</groupId>

            <artifactId>struts2-core</artifactId>

            <version>${struts2.version}</version>

        </dependency>

        <dependency>

            <groupId>org.apache.struts</groupId>

            <artifactId>struts2-spring-plugin</artifactId>

            <version>${struts2.version}</version>

        </dependency>

        <dependency>

            <groupId>org.apache.struts</groupId>

            <artifactId>struts2-json-plugin</artifactId>

            <version>${struts2.version}</version>

        </dependency>

        <dependency>

            <groupId>org.apache.struts</groupId>

            <artifactId>struts2-convention-plugin</artifactId>

            <version>${struts2.version}</version>

        </dependency>

        <dependency>

            <groupId>javax.servlet</groupId>

            <artifactId>servlet-api</artifactId>

            <version>${servlet.version}</version>

            <scope>provided</scope>

        </dependency>

        <dependency>

            <groupId>javax.servlet</groupId>

            <artifactId>jsp-api</artifactId>

            <version>${jsp.version}</version>

            <scope>provided</scope>

        </dependency>

        <dependency>

            <groupId>junit</groupId>

            <artifactId>junit</artifactId>

            <version>${junit.version}</version>

            <scope>test</scope>

        </dependency>

    </dependencies>

    <build>

        <!-- 修改打包后的默认的名字 -->

        <finalName>${artifactId}</finalName>

        <plugins>

            <!-- 编译的jdk版本 -->

            <plugin>

                <groupId>org.apache.maven.plugins</groupId>

                <artifactId>maven-compiler-plugin</artifactId>

                <version>3.1</version>

                <configuration>

                    <source>1.7</source>

                    <target>1.7</target>

                </configuration>

            </plugin>

            <!-- tomcat插件 -->

            <plugin>

                <groupId>org.codehaus.mojo</groupId>

                <artifactId>tomcat-maven-plugin</artifactId>

                <version>1.1</version>

                <configuration>

                    <port>80</port>

                </configuration>

            </plugin>

            <!-- tomcat7插件 -->

            <plugin>

                <groupId>org.apache.tomcat.maven</groupId>

                <artifactId>tomcat7-maven-plugin</artifactId>

                <version>2.2</version>

            </plugin>

        </plugins>

    </build>

 

</project>

 

提示：oracle的jar在中央仓库不存在，当引入坐标时，需手动放入jar或手动安装：

 

在jar的所在目录下打开命令窗口，然后输入如下命令：

mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=10.2.0.4.0 -Dpackaging=jar -Dfile=ojdbc14.jar

 

 

导入页面和配置文件复制到项目中：

 

使用tomcat插件（默认是1.1版本）运行项目：

Maven build ---- tomcat:run 运行

 

如果更换了jdk编译版本了，可能会导致工程报错，但运行没问题。

解决方案：

 

如果要部署程序：

会打个war，放到tomcat服务器上。

定义war包的名字：

 

  1. 系统的主页设计（EasyUI的学习）

    1. 主页设计方式

常见的主页样式：

历史：早期，前端设计页面的布局，使用table来布局。缺点：不灵活，执行效率低。

后来，流行div方式：优点灵活，当年缺点：浏览器兼容性，需要用css样式来定位和美化。

现在：流程的方式：div+css----》html5---标签+css3。

完整过程：ui工程师进行界面设计---》切图---》页面元素----》交给前端工程师---》html+—+css样式美化，形成真实页面---》交给后端工程师，对页面数据进行处理。

信息管理平台对页面的要求不如电商行业的高。一般无需专业美工。一般使用现成的框架可以完成我们的事情。

 

作为后端工程师（Java工程师），更注重数据相关的操作开发，对前端（CSS、HTML）一般都不是很擅长，那么要想做出比较美观的页面，可以选择现成的前端开发框架。

    前端框架选择：

    比较流行的前端开发框架有：

  • JS系列前端框架（jQuery EasyUI、ExtJS）；
  • Flash系列前端框架（Adobe Flex-将页面生成flash文件）；
  • 前后端整合框架（ZK等）。

    这两年开始流程更炫的框架：bootstrap,angelajs。

    本次项目使用jQuery EasyUI。

    

提示（面试）：

  1. 为什么选择EasyUI，而不选择ExtJS？

EasyUI语法基于Jquery（类选择器），学习简单，方便使用；ExtJS语法和Jquery不同，学习成本比较高，复杂（JS要求高）。

 

  1. jQuery EasyUI简述

jQuery EasyUI是一个完整的Web前端框架，它采用组件式开发方式构建页面。

 

【提示】

jquery EasyUI和Jquery UI 是不同的，jquery UI 是官方提供免费插件库（功能级别，每个插件都可以实现一种功能autocomlete实现自动补全），jquery easy ui是第三方收费插件库 （应用级别，功能完整实现前端页面开发）

课前资料中是1.3.2版本（从1.2.3 版本开始收费 ）

 

官网：www.jeasyui.com

中文网：http://www.jeasyui.net/

 

  1. 在项目中引入EasyUI

 

解压目录结构分析：

【关于主题样式】：

在themes文件夹下，提供5种主题样式 + 图表文件夹

 

EasyUI的导入方式：

1．某一个组件的插件引入

在easyui中，每个插件，必须要被 easyloader.js加载，才会发挥作用。因此，引入某一个插件的方法是：引入easyloader.js+组件js

单独组件的js可以通过帮助文档查询。

2．所有组件的插件同时引入

引入方法：引入jquery.easyui.min.js（=easyloader.js+所有组件plugins）

 

完整引入需要：jquery.easyui.min.js（核心JS库）+locale（国际化-本地语言文件-只需保留中文的）+ themes（主题-样式+图标）

引入的代码：

<!-- 引入jQuery -->

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>

<!-- EasyUI核心 -->

<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>

<!-- EasyUI国际化 -->

<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>

<!-- EasyUI主题样式CSS -->

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"/>

<!-- EasyUI图标 -->

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css"/>

 

提示：jquery必须先引入，easyui在之后引入，但其国际化、样式、图标，在easyui之后引入。

 

  1. layout插件-布局组件

说明：用于主页布局。

这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的,但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立复杂的布局,他想要的。

 

预期效果参考：

 

代码：

<!-- 对整个body应用layout布局 -->

<body class="easyui-layout">

    <!-- 为每个div设置宽高，属于easyui布局中的哪个区域

    通过region属性指定区域位置

    每个区域可以通过title属性设置标题

     -->

    <div style="height:100px" region="north" title="XXX管理系统">北部</div>

    <div style="width:200px" data-options="region:'west',title:'系统菜单'">西部</div>

    <div data-options="region:'center'">中部</div>

    <div style="width:80px" data-options="region:'east'">东部</div>

    <div style="height:60px" data-options="region:'south'">南部</div>

</body>

 

组件容器属性：

面板属性：

 

  1. according插件—可折叠组件

说明：用户显示可折叠菜单

accordion允许您提供多个面板和显示一次. 每个分组有内置支持展开和折叠. 点击分组的头可以展开或收缩面板. 分组内要ajax加载内容可以通过指定一个"href"属性. 用户可以定义一个小组被选中。如果没有指定,那么第一个面板是默认了。

预期效果参考：

代码：

<!-- 折叠菜单

        添加fit=true属性，使当前控件，占满父容器区域

        -->

        <div class="easyui-accordion" data-options="fit:true">

            <!-- 每个选项卡，就是一个子div

            必须提供title属性

            -->

            <div title="菜单1">菜单1内容</div>

            <div data-options="title:'菜单2',selected:true">菜单2内容</div>

            <div data-options="title:'菜单3'">菜单2内容</div>

        </div>

 

组件容器属性：

面板属性：

 

 

  1. tab插件—选项卡组件

说明：

这个选项卡显示一组面板。它显示只有一个选项卡面板在一个时间。每个选项卡面板的标题和一些迷你按钮工具,包括关闭按钮和其他自定义按钮。

提示：使用tab选项卡的好处是不需要覆盖原来的页面，可以随时切换，提升了用户的UE，提升了效率。

 

预期效果参考：

代码：

<!-- 选项卡菜单

        添加fit=true属性，使当前控件，占满父容器区域

        -->

        <div class="easyui-tabs" data-options="border:false,fit:true">

            <!-- 每个选项卡，就是一个子div

            必须提供title属性

            -->

            <div title="选项卡1">内容1</div>

            <div data-options="title:'选项卡2',selected:true">内容2</div>

            <div data-options="title:'选项卡2',closable:true">内容3</div>

        </div>

 

组件容器属性：

选项卡面板属性

 

 

  1. zTree— jQuery树插件（非EasyUI组件）

官网：http://www.ztree.me/

交流：http://my.oschina.net/dyhunter

 

课前资料：

解压后，目录结构分析：

all 所有功能 = core 核心功能 + excheck 扩展勾选 + exedit 扩展编辑 +exhide 扩展隐藏

引入zTree的方式：jquery.ztree.all-3.5.js+样式（css+图片）。

效果：

 

引入的代码：

<!-- zTree的js -->

<script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>

<!-- zTree样式 -->

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css"/>

 

  1. 标准 JSON 数据（standardData）的zTree

 

预期效果参考1：

开发步骤：

  1. 在页面中需要显示树的位置，添加<ul>元素，class设置为ztree。

<!-- 标准json数据ztree -->

                <ul id="standardZtree" class="ztree"></ul>
  1. 编写js代码，进行设置zTree、准备json数据和初始化生成zTree

$(function(){

            //生成zTree的代码

            //---------------标准json数据

            //1)进行ztree设置

            var setting ={};

            //2)准备json数据(标准)用来填充树

            var zNodes =[

             {name:"百度"},//一个json对象代表一个节点，name属性必须写。

             {name:"搜狐"},

             {name:"新浪"},

             {name:"腾讯"},

             ];

            //3)初始化并生成zTree

            $.fn.zTree.init($("#standardZtree"), setting, zNodes);

        });

 

预期效果参考2：

开发步骤：

  1. 同上（略）
  2. 编写js代码，进行设置zTree、准备json数据和初始化生成zTree。

基本代码同上，只是json数据不同，如下：

var zNodes =[

{name:"搜索引擎",children:[

{name:"百度"},

{name:"谷歌"}

]},

             {name:"搜狐"},//一个json对象代表一个节点，name属性必须写。

             {name:"新浪"},

             {name:"腾讯"},

             ];

 

预期效果参考3：

Json数据代码：

var zNodes =[

{name:"搜索引擎",children:[

//自定义菜单的图标

{name:"百度",icon:"${pageContext.request.contextPath}/js/ztree/img/diy/3.png"},

{name:"谷歌",icon:"${pageContext.request.contextPath}/js/ztree/img/diy/5.png"}

],

//自定义父节点的打开和关闭图标

iconOpen:"${pageContext.request.contextPath}/js/ztree/img/diy/1_open.png", iconClose:"${pageContext.request.contextPath}/js/ztree/img/diy/1_close.png"

},

//无子节点的父节点设置

{name:"金融公司", isParent:true},

//菜单打开一个链接

             {name:"搜狐",url:"http://www.sohu.com"},//一个json对象代表一个节点，name属性必须写。

             {name:"新浪"},

             {name:"腾讯"},

             ];

 

适用于：分节点异步加载

 

  1. 简单 JSON 数据（simpleData）的zTree

 

标准JSON数据的zTree是通过children属性来描述子节点。缺点是：若树的层级很多，则不方便手动编写json代码。

预期效果参考：

开发步骤：

  1. 在页面中需要显示树的位置，添加<ul>元素，class设置为ztree。

<!-- 简单json数据ztree -->

                <ul id="simpleZtree" class="ztree"></ul>

 

  1. 编写js代码，进行设置zTree、准备json数据和初始化生成zTree.

 

//---------------简单json数据方式

            //1)进行ztree设置

            var setting2 ={

                    data: {

                        //默认值是标准json数据，需手动将简单json数据功能打开

                        //当该功能开启后，idkey（默认key为id）、pidkey（默认key为pId）就有效了。

                        simpleData: {

                            enable: true

                        }

                    }

            };

            //2)准备json数据(标准)用来填充树

            var zNodes2 =[

                     {name:"友情链接",id:"1",pId:"0"},//pId=0代表没有父节点

                     {name:"百度",id:"101",pId:"1"},//pId=1代表父节点是id=1的子节点

                     {name:"门户网站",id:"2",pId:"0"}

              

             ];

            //3)初始化并生成zTree

            $.fn.zTree.init($("#simpleZtree"), setting2, zNodes2);

 

可参考的API文档：

 

  1. zTree和EasyUI的Tab选项卡组件的整合

 

预期效果参考：

开发步骤：

  1. 为节点（json）添加自定义page属性，值为页面的链接地址，并给zTree节点设置自定义点击事件。

 

callback:{

                        onClick:function(event, treeId, treeNode, clickFlag){

                            //event事件对象,    treeId:节点的ID,treeNode:节点的json数据对象，clickFlag：操作类型标识

                            //alert(treeNode.name);

                            //如果该属性不为空,则创建新的选项卡

                            if(treeNode.page!=undefined&&treeNode.page!=""){

                                

                            }

                            

                        }

                    }

 

 

zTree（文档）点击事件：

 

  1. 添加或切换tab选项卡

 

给选项卡添加一个id：

在选项卡上添加一个新的tab：

【提示】

关于jQuery EasyUI的方法调用语法：对象.组件(方法名,参数)

如：$("#mytabs").tabs(方法名, 参数)

 

判断tab是否已经存在，如果存在则切换，不重新创建：

 

填充url内容（使用iframe）

//在选项卡上添加一个新的tab：

                                    $("#mytabs").tabs("add",{

                                        title:treeNode.name,

                                        //content:"内容。。。",

                                        //content:"<iframe src='"+treeNode.page+"'></iframe>",

                                        //content:"<iframe src='"+treeNode.page+"' scrolling='auto' frameborder='0' width='100%' height='100%'></iframe>",

                                        content:'<div style="width:100%;height:100%;overflow:hidden;">'

                                            + '<iframe src="'

                                            + treeNode.page

                                            + '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>',

                                        closable:true

                                    });

 

【回顾】

<iframe> 标签属性参考：

frameborder {int}：是否显示框架的边框；

src {URL}：指定一个资源(如网页、图片)的uri；

scrolling {boolean}：是否显示框架的滚动条；

width {int}：定义iframe的宽度；

height {int}：定义iframe的高度；

一般用来显示响应的内容，内部的内容不会影响到外面。

 

  1. DataGrid插件—数据表格组件

说明：

datagrid显示数据表格格式,提供了丰富的支持选择、分类、组织和编辑数据。datagrid被设计来减少开发时间和要求没有专业知识开发人员。它是最重要的,功能丰富。单元合并、 表头合并、冻结一列页脚只是它的一些特性

简单的说：数据表格组件用来简化开发，其作用有数据列表的显示、分页、排序、编辑等。

参考效果展示：

 

  1. 方式一：DataGrid加载HTML静态数据（了解）

目标：在一个Table的HTML数据上应用DataGrid，使其成为DataGrid表格。

预期效果：

开发步骤：

  1. 编写一个table

<table>

        <tr>

            <th>编号</th>

            <th>名称</th>

            <th>价格</th>

        </tr>

        <tr>

            <td>1</td>

            <td>电视机</td>

            <td>998</td>

        </tr>

        <tr>

            <td>2</td>

            <td>电冰箱</td>

            <td>9999</td>

        </tr>

    </table>

 

  1. 在table上添加class="easyui-datagrid"

  1. 使用<thead> <tbody> 分离表头和数据内容
  2. 在表头每个<th> 设置 field属性(只是显示数据，无加载数据意义)

 

<h1>加载html静态数据</h1>

    <table class="easyui-datagrid">

        <thead>

            <tr>

                <th data-options="field:'id'">编号</th>

                <th data-options="field:'name',width:200">名称</th>

                <th data-options="field:'price'">价格</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>电视机</td>

                <td>998</td>

            </tr>

            <tr>

                <td>2</td>

                <td>电冰箱</td>

                <td>9999</td>

            </tr>

        </tbody>

    </table>

 

 

  1. 方式二：加载Json远程数据

目标：通过DataGrid的url属性，加载服务器端返回的json数据。（捆绑数据）

预期参考效果：

 

开发步骤：

  1. 给DataGrid添加url属性，指向一个json数据文件。

<h1>加载json远程数据</h1>

    <table class="easyui-datagrid" data-options="url:'data.json'">

        <thead>

            <tr>

                <th data-options="field:'id'">编号</th>

                <th data-options="field:'name',width:200">名称</th>

                <th data-options="field:'price'">价格</th>

            </tr>

        </thead>

    </table>

 

  1. 编写一个含有json数组的数据文件。

[

    {"id":"1","name":"电视机","price":998},

    {"id":"2","name":"电冰箱","price":9999}

]

 

【继续】

常用属性功能示例说明，常见几个功能如下：

预期参考效果：

DataGrid属性：

 

  1. 显示行号：rownumbers
  2. 自动适应页面宽度：fitColumns
  3. 显示操作工具条：toolbar
  4. 显示分页工具条：pagination（json数据的属性：total代表总记录数，rows代表当前页的记录）

 

 

 

 

列属性：

  1. 显示列字段名：field
  2. 设置列宽：width（若没有定义，则自动根据内容扩充宽度；若在表格属性中指定了自适应，则该值为宽度的比例值）
  3. 显示复选框：checkbox

 

 

 

 

  1. 方式三：使用JavaScript来加载数据

目标：使用js来初始化DataGrid并加载数据。

 

参考预期效果：

 

开发步骤：

  1. 在页面上放置一个table标签元素

 

  1. 编写js，初始化表格和加载数据

 

$("#myGrid").datagrid({

                //加载json远程数据

                url:"data2.json",

                //表头信息(二维数组)

                columns:[[

                 {title:"编号",field:"id",checkbox:true},

                 {title:"名称",field:"name",width:200},

                 {title:"价格",field:"price",width:100},

                 ]],

                //添加其他属性

                rownumbers:true,//显示行号

                fitColumns:true,//自适应页面宽度

                pagination:true,//显示分页工具条

                //toolbar:'#tb'//显示操作工具条

                toolbar:[

                     {id:"add",//按钮元素的属性id

                     text:"添加",//按钮的文本

                     iconCls:"icon-add",//按钮图标

                     handler: function(){//点击事件的回调函数

                         alert('添加数据。。。')

                         }

                     }

                     ,'-',//中间加一个分隔符

                     {id:"edit",//按钮元素的属性id

                         iconCls:"icon-edit",//按钮图标

                         handler: function(){//点击事件的回调函数

                             alert('更新数据。。。')

                             }

                         }

                 ]

            });

 

 

今晚作业：

  1. 环境搭建（必须完成）
  2. Easyui的学习（layout布局，according可折叠，tab选项卡，datagrid表格）ztree。
  3. 日报

 

posted @ 2017-01-10 23:00  beyondcj  阅读(7516)  评论(3)  编辑  收藏  举报