49彩票集团首页-49彩票集团官网|官网首页

49彩票集团让大家拥有最好的账号使用功能,49彩票集团是为大家带来更加方便的使用途径,是因为在49彩票集团娱乐的玩家们越来越多,发展成为最受欢迎的网上体育娱乐公司。

项目概述、搭建开发环境、主页设计、持久层和

2019-10-06 作者:计算机网络   |   浏览(57)

JAVAEE——BOS物流项目02:学习计划、动态添加选项卡、ztree、项目底层代码构建,javaeeztree

BOS项目 第1天

JQuery ZTree简单使用

 

项目12天安排:

@(JavaScript)[jQuery, ztree, 入门]

1 学习计划

1、jQuery easyUI中动态添加选项卡

2、jquery ztree插件使用

n 下载ztree

n 基于标准json数据构造ztree

49彩票集团,n 基于简单json数据构造ztree(重点)

3、数据库建模工具PowerDesigner使用方式

4、myeclipse翻转引擎插件使用(了解)

5、项目底层代码构建(重点)

n 持久层代码抽取

n 表现层代码抽取

6、实现BOS项目登录和注销功能

 

1-2天:项目概述、搭建开发环境、主页设计、持久层和表现层设计

基本概述

jQuery easyUI中动态添加选项卡

l 用于动态添加一个选项卡

 49彩票集团 1

 

 

l 选中指定的选项卡和判断某个选项卡是否存在

 49彩票集团 2

 

<a id="but1" class="easyui-linkbutton">添加一个选项卡</a>
                <script type="text/javascript">
                    $(function(){
                        //页面加载完成后,为上面的按钮绑定事件
                        $("#but1").click(function(){
                            //判断“系统管理”选项卡是否存在
                            var e = $("#mytabs").tabs("exists","系统管理");
                            if(e){
                                //已经存在,选中就可以
                                $("#mytabs").tabs("select","系统管理");
                            }else{
                                //调用tabs对象的add方法动态添加一个选项卡
                                $("#mytabs").tabs("add",{
                                    title:'系统管理',
                                    iconCls:'icon-edit',
                                    closable:true,
                                    content:'<iframe frameborder="0" height="100%" width="100%" src="http://www.nobe51.com/uploads/allimg/191006/10204S912-2.jpg"></iframe>'
                                });
                            }
                        });
                    });
                </script>

 

3-6天:项目业务开发(取派员、区域、分区、定区、业务受理)---整个项目分为基础设置、取派、中转、路由、报表

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管理等等。

jquery ztree插件使用

官网:ztree.me

 

目录结构:

 49彩票集团 3

 

 

l 在页面中引入ztree相关的文件:

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

 

7-8天:权限控制、权限管理----apache shiro

zTree 是开源免费的软件(MIT 许可证)。在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多的 zTree 扩展功能库,让 zTree 更加强大。            ——参考《百度百科》

3.1 使用标准json数据构造ztree(了解)

                <!-- 展示ztree效果 :使用标准json数据构造ztree-->
                <ul id="ztree1" class="ztree"></ul>
                <script type="text/javascript">
                    $(function(){
                        //页面加载完成后,执行这段代码----动态创建ztree
                        var setting = {};
                        //构造节点数据
                        var zNodes = [
                                      {"name":"节点一","children":[
                                                                    {"name":"节点一_1"},
                                                                    {"name":"节点一_2"}
                                                                ]},//每个json对象表示一个节点数据
                                      {"name":"节点二"},
                                      {"name":"节点三"}
                                      ];
                        //调用API初始化ztree
                        $.fn.zTree.init($("#ztree1"), setting, zNodes);
                    });
                </script>

 

9-11天:工作流开发----activiti

官网:zTree官网

3.2 使用简单json数据构造ztree(重点)

                <!-- 展示ztree效果 :使用简单json数据构造ztree-->
                <ul id="ztree2" class="ztree"></ul>
                <script type="text/javascript">
                    $(function(){
                        //页面加载完成后,执行这段代码----动态创建ztree
                        var setting2 = {
                                data: {
                                    simpleData: {
                                        enable: true//使用简单json数据构造ztree节点
                                    }
                                }
                        };
                        //构造节点数据
                        var zNodes2 = [
                                          {"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
                                          {"id":"2","pId":"3","name":"节点二"},
                                          {"id":"3","pId":"0","name":"节点三"}
                                      ];
                        //调用API初始化ztree
                        $.fn.zTree.init($("#ztree2"), setting2, zNodes2);
                    });
                </script>

 

效果:

 49彩票集团 4

 

12天:总结

PS:zTree的官方API文档和demo挺详细的,值得一读。

3.3 发送ajax请求获取json数据构造ztree

                <!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
                <ul id="ztree3" class="ztree"></ul>
                <script type="text/javascript">
                    $(function(){
                        //页面加载完成后,执行这段代码----动态创建ztree
                        var setting3 = {
                                data: {
                                    simpleData: {
                                        enable: true//使用简单json数据构造ztree节点
                                    }
                                }
                        };

                        //发送ajax请求,获取json数据
                        //jQuery提供 的ajax方法:ajax、post、get、load、getJSON、getScript
                        var url = "${pageContext.request.contextPath}/json/menu.json";
                        $.post(url,{},function(data){
                            //调用API初始化ztree
                            $.fn.zTree.init($("#ztree3"), setting3, data);
                        },'json');
                    });
                </script>

 

 

今天内容安排:

案例

3.4 使用ztree提供的API为节点绑定事件

49彩票集团 5

                <!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
                <ul id="ztree3" class="ztree"></ul>
                <script type="text/javascript">
                    $(function(){
                        //页面加载完成后,执行这段代码----动态创建ztree
                        var setting3 = {
                                data: {
                                    simpleData: {
                                        enable: true//使用简单json数据构造ztree节点
                                    }
                                },
                                callback: {
                                    //为ztree节点绑定单击事件
                                    onClick: function(event, treeId, treeNode){
                                        if(treeNode.page != undefined){
                                            //判断选项卡是否已经存在
                                            var e = $("#mytabs").tabs("exists",treeNode.name);
                                            if(e){
                                                //已经存在,选中
                                                $("#mytabs").tabs("select",treeNode.name);
                                            }else{
                                                //动态添加一个选项卡
                                                $("#mytabs").tabs("add",{
                                                    title:treeNode.name,
                                                    closable:true,
                                                    content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
                                                });
                                            }
                                        }
                                    }
                                }
                        };

                        //发送ajax请求,获取json数据
                        //jQuery提供 的ajax方法:ajax、post、get、load、getJSON、getScript
                        var url = "${pageContext.request.contextPath}/json/menu.json";
                        $.post(url,{},function(data){
                            //调用API初始化ztree
                            $.fn.zTree.init($("#ztree3"), setting3, data);
                        },'json');
                    });
                </script>

View Code

 

1、项目概述(背景、常见软件类型、软件开发流程

使用标准json数据构造ztree

数据库建模工具PowerDesigner使用方式

 49彩票集团 6

 

2、搭建开发(数据库、web项目、SVN管理项目)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8">
   <title>ztree测试</title>
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
   <link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>

   <script type="text/javascript">
    $(function(){
     $("#btn").click(function() {
      var isExists = $("#et").tabs("exists", "标题");
      if(isExists) {
        $("#et").tabs("select","标题");
      } else {
        $("#et").tabs("add", {
         title:"标题",
         closable:true,
         iconCls:"icon-save",
         content:"<iframe frameborder='no' height='100%' width='100%' src='3-tabs.jsp'></iframe>"
        });
      }
     });
    });
   </script>
   <!-- 使用标准json数据构造ztree -->
   <script type="text/javascript">
    $(function() {
     var setting = {};

     var zNodes = [
         {name:'结点1',children:[
              {name:'结点11'},
              {name:'结点12'}
              ]},
         {name:'结点2'},
         {name:'结点3'}
         ];

     $.fn.zTree.init($("#ztree1"), setting, zNodes);
    });
   </script>
  </head>
  <body class="easyui-layout">
   <!-- 分为五个区域 -->
   <div style="height: 100px;" data-options="region:'north'">北部区域</div>
   <div style="width: 200px;" data-options="region:'west'">
    <div class="easyui-accordion" data-options="fit:true">
     <div data-options="iconCls:'icon-save'" title="系统菜单">
      <a id="btn" class="easyui-linkbutton">按钮</a>
     </div>
     <div data-options="iconCls:'icon-remove'" title="业务菜单">
      <ul id="ztree1" class="ztree"></ul>
     </div>
     <div data-options="iconCls:'icon-remove'" title="功能菜单">内容3</div>
     <div data-options="iconCls:'icon-remove'" title="非功能菜单">内容4</div>
    </div>
   </div>
   <div style="" data-options="region:'center'">
    <div id="et" class="easyui-tabs" data-options="fit:true">
     <div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div>
     <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>
    </div>
   </div>
   <div style="width: 100px;" data-options="region:'east'">东部区域</div>
   <div style="height: 50px;" data-options="region:'south'">南部区域</div>
  </body>
</html>

myeclipse翻转引擎插件使用

 

3、主页设计(jQuery easyUI)

使用简单json数据构造ztree

本文由49彩票集团发布于计算机网络,转载请注明出处:项目概述、搭建开发环境、主页设计、持久层和

关键词: