Apriso 实现下拉框多级联动

李英杰同学

发布于 2021-10-27 16:23:03

4.2K3

本文介绍在Apriso中通过配置方法实现DropDownList级联选择，引用现有的Javascript文件后，只需要对Form控件的Properties进行设置，就可以方便的实现级联。

安装JavaScript

<<aprisoDropDownListLinkage.js>> 文件内容如下：

$(document).ready(function () {

    var startWith = function (str, s) {
        if (s == null || s == "" || str.length == 0 || s.length > str.length)
            return false;
        if (str.substr(0, s.length) == s)
            return true;
        else
            return false;
        return true;
    }

    var clearChildDropdownList = function (parentName) {
        var child = $("select[data-apriso-ext-select-where = '" + parentName + "']");

        if (child.length > 0) {
            child.empty();
            child.append($('<option selected="selected" value="0">--</option>'));

            var childName = child.attr('data-apriso-ext-name');

            if (childName.length > 0) {
                clearChildDropdownList(childName);
            }
        }
    }

    $.fn.aprisoDropDownListLinkage = function () {
        return this.each(function () {
            var element = $(this);
            var name = element.attr('data-apriso-ext-name');
            var linkageInputName = element.attr('data-apriso-ext-select-where');
            var dictName = element.attr('data-apriso-ext-dict');

            $('.fc_' + linkageInputName + ' select').change(function () {
                var selectedValue = $(this).val();

                var mainScreenName = $('.MainOperation').attr('class').split(' ').filter(
                    function (item) {
                        return startWith(item, 'Screen_');
                    }
                )[0];

                var inputs = { DictionaryCode: dictName, InlineInputs: "{\"" + linkageInputName + "\": \"" + selectedValue + "\"}", Look4Value: "" };

                OperationContext.get(mainScreenName).callOperation('PortalLoadDynamicDictionary', inputs,
                    function (outputs) {
                        element.empty();
                        element.append($('<option selected="selected" value="0">--</option>'));

                        if (outputs.KeyList.length == 0) {
                            clearChildDropdownList(name);
                        }

                        for (var i = 0; i < outputs.KeyList.length; i++) {
                            element.append($('<option value="' + outputs.KeyList[i] + '">' + outputs.ValueList[i] + '</option>'));
                        }
                    },
                    function (message) {
                        alert(message);
                    });
            }
            );
        });
    };

    $(".Form [data-apriso-ext-select-where] select").aprisoDropDownListLinkage();
});

将DropDownListLinkage.js复制到Apriso Web 服务器的Portal\Scripts\script-ext\目录下

建立系统参数

Facility：

SELECT
Facility, TextID
FROM
FACILITY

WorkCenter：

SELECT
 WorkCenter
 ,TextID
FROM WORK_CENTER wc
WHERE wc.Facility = @Facility1

建立界面和视图

1、添加两个DropDownList，分别绑定以上两个系统参数：

其中Facility1和系统参数QueryWorkCenter中查询参数保持一致。

2、设置WorkCenter1元素的属性：

Properties：

{
 "data-apriso-ext-select-where":"Facility1",
 "data-apriso-ext-dict":"QueryWorkCenter" ,
 "data-apriso-ext-name":"WorkCenter1"
}

其中

data-apriso-ext-select-where：指定数据来源，表示Facility1元素变化后，将动态修改WorkCenter1的值

data-apriso-ext-dict：设置WorkCenter1的系统参数名称

data-apriso-ext-name：设置Form元素名称

3、Form 的Operation引入这个js 文件：

<scriptsrc="[AprisoScripts]/script-ext/aprisoDropDownListLinkage.js"></script>

运行测试

实际运行效果：WorkCenter1的可选项根据Facilit1的选择项进行动态变化，实现级联选择效果。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-10-19，如有侵权请联系 cloudcommunity@tencent.com 删除

java

javascript

Apriso 实现下拉框多级联动

Apriso 实现下拉框多级联动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐