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. 日報