最新消息：本站持续更新中，请注意添加收藏夹。搜索关键词时，多换一个同义词。比如要搜索界面，可以尝试页面，画面，PER档等词汇。善于搜索,将大大提高你的查找效率。
    你的位置：赫非域 > 泛微OA教程 > 底层代码 > ecology开发之weaverTree控件

    ecology开发之weaverTree控件

    底层代码 bron1984 12814浏览
    组件 weaverTree树形组件
    功能说明 weaverTree树形组件是一款基于jquery开发的“树插件”，用于支持多节点的分层展示。其主要特点如下：
    1、支持异步加载数据，提高系统性能；
    2、采用json格式作为数据传输机制，兼容性强；
    3、支持分类统计数字显示；
    4、集成控制树形节点的样式。

    已转换为ztree的核心
    使用说明 1.引入如下js
    如果没有引入以下js，那么需要引入以下js：
    <link rel=”stylesheet” href=”/css/ecology8/request/leftNumMenu_wev8.css” type=”text/css” />
    <script type=”text/javascript” src=”/js/ecology8/request/leftNumMenu_wev8.js”></script>
    <link rel=”stylesheet” href=”/wui/common/jquery/plugin/zTree/css/zTreeStyle/zTreeStyle_wev8.css” type=”text/css”>
    <script type=”text/javascript” src=”/wui/common/jquery/plugin/zTree/js/jquery.ztree.core_wev8.js”></script>
    在ecology系统中需要引入以下jsp文件：
    <%@ include file=”/systeminfo/leftMenuCommon.jsp” %>

    必须包含头部声明：
    <!DOCTYPE html>
    2、在页面上的任何一个地方增加如下div
    <div class=”ulDiv” ></div>
    3、准备菜单数据：
    首先需要定义JSON格式的菜单数据：
    //以待办为例
    var demoLeftMenus=[
    {
    name:”流程类别的名称”,
    //attr表示自定义属性，里面可以放跟业务相关的数据，例如在待办中可以放typeid表示流程类别的ID
    attr:{
    typeid:”abcdefg”
    },
    //submenus表示子菜单（子菜单可以嵌套，但是在本例中只写了两级菜单）
    submenus:[
    {
    name:”这里是二级菜单的名称”,

    //这里的workflowid和nodeids是根据流程路径的类型确定的
    //你可以放其他的属性，比如说如果这个菜单用于文档，那么这个地方可以放文档目录的ID
    attr:{
    workflowid:”12345678″,
    nodeids:”87654321″
    },

    //二级菜单的数字
    numbers:{

    //菜单标题后面显示的数字（可以有任意个，但是不要放太多，否则页面样式没法处理）
    //下面四个属性分别代表流程中的四种状态；可以根据你的实际需求在这里放入任意属性
    flowNew:”1″,
    flowResponse:”0″,
    flowOut:”0″,
    flowAll:”7″
    }
    }
    ],

    //一级菜单的数字
    numbers:{
    flowNew:”1″,
    flowResponse:”0″,
    flowOut:”0″,
    flowAll:”7″
    }
    }
    ,
    {
    name:”日常工作”,
    attr:{
    typeid:”2″
    },
    submenus:[
    {
    name:”留言000″,
    attr:{
    workflowid:”207″,
    nodeids:””
    },
    numbers:{
    flowNew:”0″,
    flowResponse:”0″,
    flowOut:”0″,
    flowAll:”3″
    }
    },
    {
    name:”内部留言”,
    attr:{
    workflowid:”767″,
    nodeids:””
    },
    numbers:{
    flowNew:”0″,
    flowResponse:”0″,
    flowOut:”0″,
    flowAll:”2″
    }
    },
    {
    name:”testckkcck”,
    attr:{
    workflowid:”937″,
    nodeids:””
    },
    numbers:{
    flowNew:”1″,
    flowResponse:”0″,
    flowOut:”0″,
    flowAll:”4″
    }
    }
    ],
    numbers:{
    flowNew:”5″,
    flowResponse:”0″,
    flowOut:”0″,
    flowAll:”17″
    }
    }
    ];

    4、调用如下方法进行树形初始化：
    在你的JS中调用leftNumMenu函数，函数有两个参数，第一个参数为你刚才定义的菜单数据，第二个参数为配置。
    $(“.ulDiv”).leftNumMenu(demoLeftMenus,{
    numberTypes:{
    //下面的四个属性需要跟你在数据中定义的属性名称相同，本例中为flowNew、flowResponse、flowOut、flowAll
    flowNew:{
    hoverColor:”#EDCEAF”,//鼠标悬停时显示的方块的颜色
    color:”#FFA302″,//普通文字的颜色
    title:”新的流程”//鼠标悬停时显示的方块的title
    },
    flowResponse:{hoverColor:”#C0D8B8″,color:”#486C3E”,title:”超时的流程”},
    flowOut:{hoverColor:”#DAC0E3″,color:”#C325FF”,title:”有反馈的流程”},
    flowAll:{hoverColor:”#A6A6A6″,color:”black”,title:”全部流程”}
    },
    //是否显示值为0的数字；不写的话默认为false
    showZero:false,

    //menuStyles：为每一级菜单添加的样式类（class）；这个可以不设
    //这里的写法的含义是：给第一级菜单添加类aaaa，给第二级菜单添加类xxxx;
    //如果你还有更多层级的菜单，可以依次添加下去
    menuStyles:[“aaaa”,”xxxx”],

    //菜单的点击事件
    //三个参数的含义：
    //attr:就是你在菜单中定义的自定义属性，attr.xxx可以取到属性的值；例如attr.workflowid
    //level：被点击的菜单的层级；注意是从1开始，不是从0开始的；
    //numberType：如果你是在鼠标悬停的方块上点击的，那么这个numberType的值为方块的类型。比如说flowNew
    clickFunction:function(attr,level,numberType){
    if(level==1){
    alert(attr.typeid);
    }else{
    alert(attr.workflowid);
    }
    alert(numberType);
    }
    });

    5.运行后的效果图如下:
    效果图如下：
    例子 例子：http://192.168.4.44:8080/workflow/request/RequestView.jsp
    组件初始化参数 是否必须 类型 描述
    demoLeftMenus 是 json 树形数据集合
    var demoLeftMenus=[
    {
    name:”流程类别的名称”,
    hasChildren:true,//表示该节点有下级节点
    isOpen:true,//表示该节点显示时处于打开状态
    //attr表示自定义属性，里面可以放跟业务相关的数据，例如在待办中可以放typeid表示流程类别的ID
    attr:{
    typeid:”abcdefg”
    },
    //submenus表示子菜单（子菜单可以嵌套，但是在本例中只写了两级菜单）
    submenus:[
    {
    name:”这里是二级菜单的名称”,

    //这里的workflowid和nodeids是根据流程路径的类型确定的
    //你可以放其他的属性，比如说如果这个菜单用于文档，那么这个地方可以放文档目录的ID
    attr:{
    workflowid:”12345678″,
    nodeids:”87654321″
    },

    //二级菜单的数字
    numbers:{

    //菜单标题后面显示的数字（可以有任意个，但是不要放太多，否则页面样式没法处理）
    //下面四个属性分别代表流程中的四种状态；可以根据你的实际需求在这里放入任意属性
    flowNew:”1″,
    flowResponse:”0″,
    flowOut:”0″,
    flowAll:”7″
    }
    }
    ],

    //一级菜单的数字
    numbers:{
    flowNew:”1″,
    flowResponse:”0″,
    flowOut:”0″,
    flowAll:”7″
    }
    }]
    options 是 json addDiyDom:true,      //是否需要显示数字
    numberTypes:{},
    expand:null,
    showZero:false,
    clickFunction:null,
    multiJson:false,
    rightKey:”hasRight”,   //权限字段，如果没有权限，则树的文
    字颜色会变为灰色，点击不会触发回调事件。
    deleteIfAllZero:false,  //刷新时如果该值为true，那么如果该
    项值为0，则隐藏该项。
    setting:{
    view: {
    expandSpeed: “” ,    //效果
    addDiyDom:addDiyDom   //挂在悬浮控件的回调方法，传递
    treeId和treeNode两个参数
    },
    callback: {
    onClick: _leftMenuClickFunction,   //节点点击事件
    beforeExpand:_checkIsAjaxLoad
    }
    }
    string update：表示回写数据。
    提供了以下功能函数
    方法1 返回类型 描述
    e8InitTreeSearch 无 用于树形结构顶部恢复初始状态
    方法参数 是否必须 类型 描述
    options 是 json ifrms:查找到查询条件所在页面的iframe层级，多个以,号分隔，如：#flowFrame,#tabcontentframe；
    _document:初始iframe所在的document对象，默认为树所在的document对象；
    conditions:需要清空的条件集合，多个以,号分隔；如：#maincategory,#subcategory,#seccategory
    formID:conditions所在的form的ID；如：#frmmain
    注：ifrms，conditions，formID都是以jquery selector的方式给定
    方法2 返回类型 描述
    __weaverTreeNamespace__._expandAll 无 展开所有的节点
    方法参数 是否必须 类型 描述
    方法3 返回类型 描述
    __weaverTreeNamespace__.getZTreeObj Object 返回ztree根对象
    方法参数 是否必须 类型 描述
    方法4 返回类型 描述
    __weaverTreeNamespace__.selectDefaultNode 无 选中指定的节点
    方法参数 是否必须 类型 描述
    key 是 string 用于查找节点的key值，如tId
    value 是 string 用于查找节点的value值，如sec_119
    方法4 返回类型 描述
    __weaverTreeNamespace__.cancelSelectedNode 无 取消选中的节点 如果没有传递参数，则取消第一个选中的节点
    方法参数 是否必须 类型 描述
    key 否 string 用于查找节点的key值，如tId
    value 否 string 用于查找节点的value值，如sec_119
    方法5 返回类型 描述
    __weaverTreeNamespace__.checkedDefaultNode 无 选中指定的节点（当开启了checkbox模式才生效）
    方法参数 是否必须 类型 描述
    key 是 string 用于查找节点的key值，如tId
    values 是 string 用于查找节点的value值集合，多个以,分隔，如sec_119,sec_231等

    转载请注明：赫非域 » ecology开发之weaverTree控件

    与本文相关的文章