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

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();

推荐文章:

云服务器-阿里云ECS服务器的端口启用
2021-02-07
O2OA成功启动后,有可能无法正常访问服务器,需要在ECS进行安全策略配置,开放端口:80、20020、20030在阿里云上完成O2OA平台部署,并且启动完成后
连接O2云体验APP移动手机办公
2021-02-25
O2OA拥有配套的移动办公APP,支持IOS和安卓端,用户可在连接O2云之后,使用APP使用移动办公。移动办公APP开放源代码,不会产生任何费用。本篇主要简单讲
报销申请使用手册
2021-02-19
O2OA报销申请是使用平台能力自定义开发的一个业务流程,它适用于企业内员工财务报销申请的电子审批。员工新建报销申请流程,确定报销申请信息,发起审批、财务处理、备
业务开发-组织架构-人员信息创建
2021-02-26
O2OA提供多级组织架构设置能力,用户可以在系统内设置集团、分公司、部门、小组等多级企业组织结构来满足办公需要。本文主要介绍如何在O2OA中添加人员信息。
服务集成-发送用户名使用SSO进行登录认证
2021-03-02
O2OA提供多种SSO单点认证方式,比如约定密钥,OAuth2,SMAP等等。本文主要演示如何通过登录用户名,和SSO相关的配置,使用单点认证的方式进行O2Se
常见问题-为什么127.0.0.1可以访问但其他IP无法访问
2021-02-07
备注:这里使用80、20020、20030端口为例。***部分一般添加到“-AINPUT-ptcp-mstate--stateNEW-mtcp--dport22
固定资产管理使用手册
2021-02-19
O2OA资产管理能保证资产定期维护、规范化资产管理等等,保证企业的固定资产信息不丢失、不错漏,进一步提高固定资产的使用效率,加强固定资产管理。
办公用品管理使用手册
2021-02-18
O2OA办公用品管理为企业提供办公用品的入库,领用,采购维护等功能,以便于轻松管理物资,减少铺张浪费,节约成本,提高办公效率。
门户开发-页面部件设计
2021-03-01
O2OA提供的门户管理平台可以让用户自由地为企业定制符合企业特色的门户系统,门户页面。可以让页面展现的内容真正满足企业自身的需求。本文主要介绍如何在O2OA中创
系统配置-开机自动启动O2Server
2021-02-19
O2OA开发平台允许将平台启动设置为跟随操作系统自动启动,这样避免服务器重启后,还需要手工启动O2Server的操作。本篇介绍如何在windows和Linux两

results matching ""

    No results matching ""