BOS物流管理系統-第一天

時間  2019-11-11
標籤 bos 物流管理 系統 第一天 简体版
原文   原文鏈接

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

BoBo老師css

 

總體項目內容目標：html

  1. 對項目概述的一些理解
  2. 亮點技術的學習
  3. 注意學習方式：優先完成當天代碼。
  4. 其餘內容。

 

最終：前端

學到新的技術，會應用新的技術；對項目有個總體感受；html5

 

課程安排：12天左右java

 

主要內容：jquery

  1. 項目總體概述和通常流程（項目概念、通常項目流程等）
  2. BOS項目的概述（項目背景、需求、技術架構、學習目標）
  3. 開發環境搭建
    1. 項目導入和運行（傳統項目結構）（Struts2的通配符映射）
    2. 項目導入和運行（Maven項目結構）（STS開發工具）
  4. jQuery EasyUI框架（經常使用佈局組件、Ztree菜單技術、數據表格組件等）

 

學習目標：css3

  1. 項目的通常流程、瞭解
  2. STS工具的使用、會
  3. maven的環境搭建、掌握
  4. 前端開發框架EasyUI、掌握

 

  1. 項目的總體概念和通常流程

    1. 什麼是項目

咱們要作項目，首先得簡單瞭解一下什麼是項目。通俗一點的解釋是用有限的資源、時間爲特定的客戶完成特定目標的一次性工做。資源好比人財物等，時間是指有明確的開始和結束時間，不能無限期。程序員

其實各行各業都是有項目的概念的，爲了完成一個目標，都會去啓動一個項目。製造汽車的有製造工程師，建設橋樑的有橋樑工程師，蓋樓的有什麼？民工？是建築工程師！咱們是軟件工程師！web

咱們身處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）

參與的開發人員：二三十人團隊（開發時間約三、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. 項目學習目標

一、學習能夠直接在企業應用開發技術（遠程系統調用集成 WebService、全文檢索 Lucene 【Hibernate Search】、 權限控制 Apache Shiro 、工做流 Activiti 、 報表 HighCharts）。

二、體驗項目技術變化性（數據庫層Spring Data 調用 JPA、新技術）---- 運用技術解決問題。（不會的技術也能用在業務上）

三、加強動手能力（每一個同窗，主動動手開發）

四、團隊工做氛圍（有問題找組長，組長要負責全組的開發狀況和問題收集，天天要提交工做日報）(我項目經理—班長項目經理助理—組長項目組長---組員)

    日報：組員寫好，發給組長，組長進行彙總，再出一份日報

時間上：當天

晚上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 包

解壓到硬盤

    二、 配置解壓/conf/settings.xml 本地倉庫路徑

三、配置環境變量 JAVA_HOME、M2_HOME、MAVEN_HOME， 將bin加入path

四、將以前下發 本地倉庫，覆蓋到倉庫目錄

 

Eclipse中配置maven：

    一、 window-preferences –搜索maven ，勾選源碼和doc自動下載

    二、 配置外部maven路徑

    三、 配置settings.xml 的位置

    四、重建索引

 

  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. 日報
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程