业务操作系统(二)

目录

    1.layout

    2.accordion

    3.tabs

    4.Ztree

一、EasyUI相关组件

1.layout(布局)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>layout布局的使用</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>
  </head>

  <body class="easyui-layout" >
      <!-- 每个div是一个区域 -->
      <div data-options="region:‘north‘,title:‘北‘" style="height:150px;">北部区域</div>
      <div data-options="region:‘south‘,title:‘南‘" style="height:150px;">南部区域</div>
      <div data-options="region:‘east‘,title:‘东‘" style="width:150px;">南部区域</div>
      <div data-options="region:‘west‘,title:‘西‘" style="width:150px;">南部区域</div>
      <div title="中心" data-options="region:‘center‘" >中心区域</div>
  </body>
</html>

效果:

    

 

2.accordion(折叠面板)

<body class="easyui-layout" >
      <!-- 每个div是一个区域 -->
      <div data-options="region:‘north‘,title:‘北‘" style="height:150px;">北部区域</div>
      <div data-options="region:‘south‘,title:‘南‘" style="height:150px;">南部区域</div>
      <div data-options="region:‘east‘,title:‘东‘" style="width:150px;">东部区域</div>
      <div data-options="region:‘west‘,title:‘西‘" style="width:150px;">

          <!-- 折叠面板 -->
          <div class="easyui-accordion" data-options="fit:‘true‘">
              <!-- 每个div是其中一个面板 -->
              <div title="标题1" data-options="iconCls:‘icon-add‘">面板1</div>
              <div title="标题2" data-options="iconCls:‘icon-cut‘">面板2</div>
              <div title="标题3" data-options="iconCls:‘icon-save‘">面板3</div>
          </div>

      </div>
      <div title="中心" data-options="region:‘center‘" >中心区域</div>
</body>

效果:

 

3.tabs(选项卡)

<body class="easyui-layout" >
      <!-- 每个div是一个区域 -->
      <div data-options="region:‘north‘,title:‘北‘" style="height:150px;">北部区域</div>
      <div data-options="region:‘south‘,title:‘南‘" style="height:150px;">南部区域</div>
      <div data-options="region:‘east‘,title:‘东‘" style="width:150px;">东部区域</div>
      <div data-options="region:‘west‘,title:‘西‘" style="width:150px;">

          <!-- 折叠面板 -->
          <div class="easyui-accordion" data-options="fit:‘true‘">
              <!-- 每个div是其中一个面板 -->
              <div title="标题1" data-options="iconCls:‘icon-add‘">面板1</div>
              <div title="标题2" data-options="iconCls:‘icon-cut‘">面板2</div>
              <div title="标题3" data-options="iconCls:‘icon-save‘">面板3</div>
          </div>

      </div>
      <div title="中心" data-options="region:‘center‘" >

          <!-- 选项卡 -->
          <div class="easyui-tabs" data-options="fit:‘true‘">

              <div title="面板一" data-options="closable:‘true‘">内容1</div>
              <div title="面板二" data-options="closable:‘true‘">内容2</div>
              <div title="面板三" data-options="closable:‘true‘">内容3</div>

          </div>

      </div>
  </body>

效果:

     

 

(1)动态的打开选项卡

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <title>layout布局的使用</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>

    <script type="text/javascript">

        $(function(){

            //为按钮绑定事件
            $("#linkone").click(function(){

                //判断当前选项卡是否打开
                var ifExists = $("#tabs").tabs("exists","百度");

                if(ifExists){
                    //如果已经打开就选中它
                    $("#tabs").tabs("select","百度");
                }
                else{

                    //如果没有打开就添加一个新的选项卡
                    $("#tabs").tabs("add",{

                        title:"百度",
                        iconCls:"icon-add",
                        closable:true,
                        content:‘<iframe width="100%" height="100%" frameborder="0" src="http://www.baidu.com" />‘
                    });
                }

            });
        });

    </script>

  </head>

  <body class="easyui-layout" >

      <!-- 每个div是一个区域 -->
      <div data-options="region:‘north‘,title:‘北‘" style="height:150px;">北部区域</div>
      <div data-options="region:‘south‘,title:‘南‘" style="height:150px;">南部区域</div>
      <div data-options="region:‘east‘,title:‘东‘" style="width:150px;">东部区域</div>
      <div data-options="region:‘west‘,title:‘西‘" style="width:150px;">

          <!-- 折叠面板 -->
          <div class="easyui-accordion" data-options="fit:‘true‘">
              <!-- 每个div是其中一个面板 -->
              <div title="标题1" data-options="iconCls:‘icon-add‘">

                  <a id="linkone" class="easyui-linkbutton">面板一</a>

              </div>
              <div title="标题2" data-options="iconCls:‘icon-cut‘">面板2</div>
              <div title="标题3" data-options="iconCls:‘icon-save‘">面板3</div>
          </div>

      </div>
      <div title="中心" data-options="region:‘center‘" >

          <!-- 选项卡 -->
          <div class="easyui-tabs" data-options="fit:‘true‘" id="tabs">

              <div title="面板一" data-options="closable:‘true‘">内容1</div>
              <div title="面板二" data-options="closable:‘true‘">内容2</div>
              <div title="面板三" data-options="closable:‘true‘">内容3</div>

          </div>

      </div>
  </body>
</html>

效果:

     

 

4.Ztree

menu.json

[

        { "id":"11", "pId":"0", "name":"基础数据",  "click":false},

        { "id":"112", "pId":"11", "name":"收派标准",  "page":"page_base_standard.action"},

        { "id":"113", "pId":"11", "name":"取派员设置",  "page":"page_base_staff.action"},

        { "id":"114", "pId":"11", "name":"区域设置","page":"page_base_region.action"},

        { "id":"115", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},

        { "id":"116", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},

        { "id":"12", "pId":"0", "name":"受理","click":false },

        { "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},

        { "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},

        { "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},

        { "id":"13", "pId":"0", "name":"调度","click":false },

        { "id":"131", "pId":"13", "name":"查台转单","page":""},

        { "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"},

        { "id":"14", "pId":"0" , "name":"中转配送流程管理","click":false },

        { "id":"141", "pId":"14", "name":"工作单审核" ,"page":"page_zhongzhuan_check.action"},

        { "id":"142", "pId":"14", "name":"查看个人任务" ,"page":"page_workflow_personaltask.action"},

        { "id":"143", "pId":"14", "name":"查看组任务","page":"page_workflow_grouptask.action"}

]

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <title>layout布局的使用</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" type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>

    <script type="text/javascript">

        $(function(){

            function zTreeClick(event,treeId,treeNode){

                var name = treeNode.name;
                var page = treeNode.page;

                if(undefined != page){
                    //判断当前选项卡是否打开或存在
                    var ifOpen = $("#tabs").tabs("exists",name);
                    if(ifOpen){
                        //存在就选中
                        $("#tabs").tabs("select",name);
                    }
                    else{
                        //动态打开一个选项卡面板
                        $("#tabs").tabs("add",{
                            title:name,
                            iconCls:‘icon-add‘,
                            closable:‘true‘,
                            content:‘<iframe frameborder="0" width="100%" height="100%" src="‘+page+‘"></iframe>‘
                        });
                    }

                }

            }

            var url = "${pageContext.request.contextPath}/json/menu.json"

            $.post(url,{},function(data){

                //动态的创建Ztree
                var setting = {

                        //使用简单json
                        data:{
                            simpleData:{
                                enable:true
                            }
                        },
                        //点击事件的回调函数
                        callback:{
                            onClick:zTreeClick
                        }
                }

                //初始化Ztree
                $.fn.zTree.init($("#tree"),setting,data);

            });

        });

    </script>

  </head>

  <body class="easyui-layout" >

      <!-- 每个div是一个区域 -->
      <div data-options="region:‘north‘,title:‘北‘" style="height:150px;">北部区域</div>
      <div data-options="region:‘south‘,title:‘南‘" style="height:150px;">南部区域</div>
      <div data-options="region:‘east‘,title:‘东‘" style="width:150px;">东部区域</div>
      <div data-options="region:‘west‘,title:‘西‘" style="width:150px;">

          <!-- 折叠面板 -->
          <div class="easyui-accordion" data-options="fit:‘true‘">
              <!-- 每个div是其中一个面板 -->
              <div title="标题1" data-options="iconCls:‘icon-add‘">

                  <!-- 树形菜单 -->
                  <ul id="tree" class="ztree"></ul>

              </div>
              <div title="标题2" data-options="iconCls:‘icon-cut‘">面板2</div>
              <div title="标题3" data-options="iconCls:‘icon-save‘">面板3</div>
          </div>

      </div>
      <div title="中心" data-options="region:‘center‘" >

          <!-- 选项卡 -->
          <div class="easyui-tabs" data-options="fit:‘true‘" id="tabs">

              <div title="面板一" data-options="closable:‘true‘">内容1</div>
              <div title="面板二" data-options="closable:‘true‘">内容2</div>
              <div title="面板三" data-options="closable:‘true‘">内容3</div>

          </div>

      </div>
  </body>
</html>

效果:

    

时间: 2024-12-30 22:49:54

业务操作系统(二)的相关文章

ExtJS 4.2 业务开发(二)数据展示和查询

本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统,并提供查询.添加.修改的功能. 大致的目录结构如下: ShipMgrTab.js :船舶业务的入口. controller 目录:存放船舶业务的逻辑控制文件. model 目录:存放船舶业务的model文件. store 目录 :存放船舶业务的store文件. view 目录 :存放船舶业务的组件

讲讲金融业务(二)--银行自助结算业务系统架构(A)

本篇论文主要读者适合对银行业务感兴趣的技术开发者,我这里尽量用普通读者能读懂的语言来描述银行自助结算业务系统架构. 在讲之前,先要阐述一个概念,即银联: 银联即各家银行的联合体,各家加入银联的银行都是银联的股东,银联的主要业务为:POS/ATM等自助结算收单业务,银联在线支付,互联网手机支付三项业务. 在没有银联的之前,自助结算业务系统架构是下面这样子的: 即自助结算终端将根据各家银行卡的交易转发至相应的银行.事实上各家银行部署的自助结算终端只受理本行业务.因此,自助结算终端的功能极其受限,比如

TRTOS嵌入式操作系统二次开发使用说明

 TRTOS 使 用 说 明   一.系统添加设备修改参数说明 1.Tos系统参数设置(文件位置 Tos/Configs/Define.h) 2.设备的添加和挂载 设备统一读写接口函数类型typedef void (*DeviceWRFunc)(void *Addr,void*Data,void *Length); 设备的挂载接口 在写好的外部设备驱动后如果该设备属于独占操作的需要添加到设备管理序列,以便通过系统内部的设备管理功能协调各任务轮流使用 3.Tos的Main入口执行顺序 对已经写

业务操作系统(四)

一.页面分析 Ztree树的加载 var setting = { data : { simpleData : { // 简单数据 enable : true } }, callback : { onClick : onClick } }; // 基本功能菜单加载 $.ajax({ url : "${pageContext.request.contextPath}/json/menu.json", type : "POST", dataType : "jso

操作系统(二)进程控制

1 进程状态 1. 进程的三种基本状态 1) 就绪(Ready)状态 2) 执行状态3) 阻塞状态(请求I/O,申请缓冲空间等) 2. 挂起状态 引入挂起状态的原因有: (1)终端用户的请求.当终端用户在自己的程序运行期间发现有可疑问题时,希望暂时使自己的程序静止下来.亦即,使正在执行的进程暂停执行;若此时用户进程正处于就绪状态而未执行,则该进程暂不接受调度,以便用户研究其执行情况或对程序进行修改.我们把这种静止状态称为挂起状态. (2)父进程请求.有时父进程希望挂起自己的某个子进程,以便考查和

业务操作系统(六)

一.分区的相关操作 1.保存      (1)实体类 (2)前台页面 <div style="overflow:auto;padding:5px;" border="false"> <form> <table class="table-edit" width="80%" align="center"> <tr class="title">

业务操作系统(一)

一.搭建开发环境 1.数据库环境 (1)创建一个数据库.      create database bos character set utf8 (2)创建一个数据库用户.      create user bos identified by '123456' (3)为用户授权      grant all on bos.* to bos (4)使用创建的用户登录MySql      mysql –ubos –p123456   2.Web环境 (1)web.xml <?xml version=

业务操作系统(五)

一.文件异步上传      传统表单提交文件上传会刷新页面,使用OCUpload插件可以实现异步上传. (1)页面部分   (2)Action @Controller @Scope("prototype") public class RegionAction extends BaseAction<Region>{ @Autowired private RegionService regionService; private File myFile; private Stri

面向业务的立体化高可用架构设计

面向业务的立体化高可用架构设计 摘要:为了实现阿里九游游戏接入系统的业务高可用,技术人员跳出传统的面向系统的高可用的思路,转而从业务的角度来整体考虑高可用,最终实现了一套立体化的高可用架构,本文逐一展示这套立体化高可用架构的一些具体实践. 通常情况下我们在谈论高可用架构设计的时候,主要关注的是系统结构的高可用,例如主备架构.集群架构.多中心架构.我们做架构设计的时候,也主要是从系统结构本身出发,例如我们把单机改为双机.双机改为集群.单机房改为异地多机房等等. 这种以系统结构为目标的高可用架构设计