@服务集成 @表单定义 @自定义选择器 @弹出选择器

O2OA允许用户对表单进行自由的功能定制,可以增加自定义的组件和插件。本文介绍如果在表单界面上自定义弹出选择器的功能。


2020-06-19_18-58-27.png

2020-06-19_19-04-57.png

MWF.xDesktop.requireApp("Template", "Selector.Custom", null, false); //加载资源
//第一个参数是选择器的父DOM对象
var selector = new MWF.xApplication.Template.Selector.Custom(this.form.getApp().content, {
    "style": "blue_flat", //选择框样式
    "count": 0, //允许选择个数
    "title": "选择列表", //选择框标题
    "hasLetter" : false, //是否点击字母搜索
    "hasTop" : true, //可选、已选的标题
    "level1Indent" : 0, //第一层的缩进
    "indent" : 36, //第二层及以上的缩进
    "selectAllEnable" : true, //是否允许多选,如果分类可以被选中,blue_flat样式下失效
     "width" : "500px", //选中框宽度
    "height" :"400px", //选中框高度
    "values": [], //默认选中的项目
    "category": true, //按分类选择
    "expand": true, //默认是否展开
    "hasShuttle" : false, //是否穿梭按钮,blue_flat下才有效
    "noSelectedContainer" : true, //是否隐藏右侧已选区域
    "categorySelectable" : true, //分类是否可以被选择,如果可以被选择那么执行的是item的事件
    "expandEmptyCategory" : true, //允许展开空分类
    "expandSubEnable" : true, //是否允许展开子分类
    "uniqueFlag" : "id", //项目匹配(是否选中)关键字
    "defaultExpandLevel" : 1, //默认展开项目,0表示折叠所有分类
    "onComplete" : function( selectedItemList ){
        //selectedItemList为选中的item对象,下面的selectedItemList为选中的数据
        var selectedDataList = selectedItemList.map( function(item){
          return item.data;
        })
    },
    "onQueryLoad" : function(selector) {
        //加载前事件, selector 为选择器, this为选择器
    },
    "onLoad" : function(selector) {
        //加载后事件, selector 为选择器, this为选择器
    },
    "onQueryLoadCategory" : function(category) {
        //加载分类前事件, category 为 分类对象, this为选择器
    },
    "onPostLoadCategory" : function(category) {
        //加载分类后事件, category 为 分类对象, this为选择器
    },
    "onSelectCategory" : function(category){
        //选择分类, category 为 分类对象, this为选择器
    },
    "onUnselectCategory": function(category){
        //取消选择分类, category 为 分类对象, this为选择器
    },
    "onQueryLoadItem" : function(item){
        //加载项目前事件, item 为 项目对象, this为选择器
    },
    "onPostLoadItem" : function(item){
        //加载项目后事件, item 为 项目对象, this为选择器
    },
    "onSelectItem" : function(item){
        //选择项目事件, item 为 项目对象, this为选择器
         //如果可以被选择那么执行的是item的事件
        var category = item;
        if( category.data.id === "category1.1" ){ //点击时重新设置子树
            category.data.subItemList = [
                {
                    "id": "item1.1new",
                    "name": "项目1.1new"
                },
                {
                    "id": "item1.2new",
                    "name": "项目1.2new"
                }
            ];
            category.data.subCategoryList = [
                {
                    "id": "category1.1.1",
                    "name": "分类1.1.1"
                }
            ];
            category.reloadSub();
        }
    },
    "onUnselectItem" : function(item){
        //取消选择项目事件, item 为 项目对象, this为选择器
    },
    "onExpand" : function( obj ){
        //展开分类, obj 为分类/项目, this为选择器
        if( obj.data.id === "category2" && !obj.loadData ){ //为category2动态添加子分类和子项目
            obj.data.subItemList = [
                {
                    "id": "item2.1",
                    "name": "项目2.1"
                },
                {
                    "id": "item2.2",
                    "name": "项目2.2"
                }
            ]
            obj.data.subCategoryList = [
                {
                    "name": "分类2.1",
                    "id": "category2.1",
                    "subItemList" : [
                        {
                            "id": "item2.1.1",
                            "name": "项目2.1.1"
                        }
                    ]
                }
            ]
        }
        obj.loadData = true;
    },
    "onCollapse" : function(obj){
        //折叠分类,obj 为分类/项目, this为选择器
    },
    "selectableItems": [ //可选项树
        {
            "name": "项目1",
            "id": "item1",
            "isItem" : true //第一层的item需要isItem = true
        },
        {
            "name": "项目2",
            "id": "item2",
            "isItem" : true //第一层的item需要isItem = true
        },
        {
            "name": "分类1",
            "id": "category1",
            "subItemList": [
                {
                    "id": "item1.1",
                    "name": "项目1.1"
                },
                {
                    "id": "item1.2",
                    "name": "项目1.2"
                }
            ],
            "subCategoryList" : [
                {
                    "name": "分类1.1",
                    "id": "category1.1",
                    "subItemList" : [
                        {
                            "id": "item1.1.1",
                            "name": "项目1.1.1"
                        }
                    ]
                }
            ]
        },
        {
            "name" : "分类2",
            "id" : "category2"
        }
    ]
})
selector.load();

推荐文章:

服务集成-通过接口从第三方应用系统启动流程
2021-07-06
@服务集成@系统集成@流程启动@通过服务启动流程@服务包装O2OA允许用户自行修改源码或者增加源码来扩展系统服务,也可以包装功能更强的业务服务。本文主要介绍如何
系统配置-数据库驱动JAR包更改
2021-02-25
O2OA信息化系统开发平台默认自带Mysql8或者其他数据库某固定版本的jdbc驱动包,当用户使用的数据库系统版本与O2OA默认驱动不兼容时可能会导到某些数据库
数据中心-简介
2021-10-22
概述数据中心是O2OA系统的五大平台之一,是对数据的列式、统计、分组展现、查询搜索、导入导出的工具。数据中心可以有多个应用,以对应不同的业务模块。每个数据中心应
移动办公-钉钉扫码登录办公系统配置
2021-02-25
O2OA平台可以使用符合OAuth2标准的第三方认证进行平台的登录认证。本篇主要介绍如何将在O2OA中集成微信扫码登录功能。
神经网络
2021-02-19
O2OA支持配置神经网络模型,协助完成办公系统中的信息推荐,意见选择等功能。它是一种模仿动物神经网络行为特征,进行分布式并行信息处理的算法数学模型,通过创建神经
开发知识-React篇:在O2OA平台框架中使用React
2021-02-07
  本章我们介绍使用React的CreateReactApp工具,在O2平台中创建React应用。在本例中,我们将列示当前用户的前20条待办,点击标题打开待办;
组织人员同步-自定义同步接口代码
2021-03-03
O2OA允许用户自定义接口和代码逻辑来完成系统与第三方业务系统的数据同步,人员和组织的同步。本文主要介绍如何在O2OA中开发接口与外部系统进行组织和人员的同步,
开发知识-Vue篇:使用Vue-CLI开发O2应用
2021-04-29
  Vue-CLI是Vue官方提供的CLI工具,用于为应用快速搭建繁杂的脚手架。本章我们介绍使用Vue-CLI工具在Node,js环境下,Vue和O2集成应用开
通用版企业信息化协同平台演示环境
2021-09-22
概述通用版信息化协同平台适用于各企事业单位等。用户可以一目了然的看到工作中的待办事宜、通知公告等信息,也可以按用户的需要设置各类功能,包括:信息发布、文件管理、
企业办公首页使用说明
2021-02-19
O2OA企业办公首页的导航栏中,有直观清爽的界面、功能丰富的应用。根据企业办公需求随心使用,包含流程管理、会议管理、组织管理、日程管理等等。

results matching ""

    No results matching ""