如何在露天创建级联下拉菜单

Question

我有一个要求，我必须创建一个级联下拉菜单，这意味着第二个下拉菜单的值将取决于第一个下拉菜单。该列表将被硬编码。

例如国家/地区的第一个下拉列表和基于此值的第二个下拉列表是与该国家/地区对应的州；我会有每个国家对应的州列表。

现在我知道如何使用列表在字段上应用约束，但是可以将其扩展到两级吗？？

我也搜索过数据列表，但我真的不希望这样做，因为该列表将成为泛客户，但数据列表将使它成为特定于客户的，并且不希望客户自己创建列表。

非常感谢任何帮助。

谢谢

Answer 1

Alfresco 没有开箱即用的级联下拉列表。尽管如此，开发一个并不困难。

因为您的列表是硬编码的，所以有一个简单的解决方案。为两个下拉列表生成控件。它们甚至可以只是一个隐藏字段或一个空的下拉列表。如果您不熟悉 Alfresco 表单引擎，使用隐藏字段可能会更容易，如下例（share-config-custom.xml 中的配置片段）：

<field id="dropdown1">
  <control template="/org/alfresco/components/form/controls/hidden.ftl">
     <control-param name="contextProperty">dropdown1</control-param>
  </control>
</field>
<field id="dropdown2">
  <control template="/org/alfresco/components/form/controls/hidden.ftl">
     <control-param name="contextProperty">dropdown2</control-param>
  </control>
</field>

在share-config-custom.xml中也可以添加新的自定义javascript和css:

<!-- Document Library client-side dependencies -->
<config evaluator="string-compare" condition="DocLibCustom">
  <dependencies>
     <js src="/js/cascading-dropdown.js" />
     <css src="/css/cascading-dropdown.css" />
  </dependencies>
</config>

自定义 javascript 和 css 可以使用 YUI 找到这两个控件并生成必要的下拉列表和事件侦听器。更新下拉列表时，事件侦听器将更新级联下拉列表，还将更新隐藏字段。隐藏字段的值将在表单关闭时发布。

更好的解决方案是使用自定义 javascript 仅定义一个 javascript 库。然后，您可以在自定义免费标记模板中使用此 javascript 库来代替“/org/alfresco/components/form/controls/hidden.ftl”

您可以在以下位置找到 hidden.ftl：

/webapps/share/WEB-INF/类/alfresco/site-webscripts/org/alfresco/components/form/controls/hidden.ftl

在扩展路径中复制此 ftl 并修改它以使用您的自定义 javascript。

如果列表不是硬编码的，只需使用网络脚本生成列表并使用 ajax 调用从浏览器调用它。

Answer 2

一些有用的信息：https://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/cascading-dropdown-alfresco-share-03102011

将其用作我自己的级联选择的基础。基于与 Marco Altieri

描述的相同概念

Answer 3

当您使用 alfresco 社区版本 5.0.d 时，您 can/should 正在使用 aikau for that sort of things, you can start learning and using aikau based on this tutorial for standalone aikau clients or this tutorial 新的自定义共享页面。

设置好页面（desc.xml、js 和 ftl）后，您应该拥有如下内容：

custom-page.get.desc.xml

<webscript>
  <shortname>Test page 1</shortname>
  <family>testing</family>
  <url>/custom-uri</url>
</webscript>

custom-page.get.ftl

<@processJsonModel group="share"/>

和custom-page.get.js

model.jsonModel = {
    services : [ "alfresco/services/NavigationService",
            "alfresco/services/LogoutService",
            // Add more services here !!!
            ],
    widgets : [ 
        // Add more widgets here
    ]
};

您现在需要向小部件数组添加两个 select：

{
    name : "alfresco/forms/Form",
    config : {
        scopeFormControls : false, // to avoid complex handling of
        // pubSubScope

        widgets : [ {
            name : "alfresco/forms/controls/Select",
            config : {
                fieldId : "LEVEL_1",
                label : "Level 1",
                description : "Select an item from the list",
                name : "level_1",
                value : "1",
                requirementConfig : {
                    initialValue : true
                },
                optionsConfig : {
                    fixed : [ {
                        label : "Item 1",
                        value : "1"
                    }, {
                        label : "Item 2",
                        value : "2"
                    }, {
                        label : "Item 3",
                        value : "3"
                    } ]
                }
            }
        }, {
            name : "alfresco/forms/controls/Select",
            id : "LEVEL_2",
            config : {
                fieldId : "LEVEL_2",
                label : "Level 2",
                description : "Select an item from the list",
                name : "level_2",
                requirementConfig : {
                    initialValue : true
                },
                optionsConfig : {
                    fixed : [ {
                        label : "Item 1.1",
                        value : "1"
                    }, {
                        label : "Item 1.2",
                        value : "2"
                    }, {
                        label : "Item 1.3",
                        value : "3"
                    } ]
                }
            }
        } ]
    }
}

下一步是检测第一个 select 中的更改事件，然后用新项目刷新第二个 select 的列表。为此，您需要定义一个新服务或为您的第二个 select 扩展 select 小部件。我会选择选项 1： CustomServiceForNestedSelects.js

define(
        [ "dojo/_base/declare", "alfresco/core/Core", "dojo/_base/lang",
                "alfresco/core/CoreXhr", "service/constants/Default" ],
        function(declare, Core, lang, CoreXhr, AlfConstants) {

            return declare(
                    [ Core, CoreXhr ],
                    {
                        pubSubScope : "",
                        levelOneFieldId : "LEVEL_1",
                        levelTwoFieldId : "LEVEL_2",
                        levelTwoItems : [ [ {
                            label : "Item 1.1",
                            value : "1"
                        }, {
                            label : "Item 1.2",
                            value : "2"
                        }, {
                            label : "Item 1.3",
                            value : "3"
                        } ], [ {
                            label : "Item 2.1",
                            value : "1"
                        }, {
                            label : "Item 2.2",
                            value : "2"
                        }, {
                            label : "Item 2.3",
                            value : "3"
                        } ], [ {
                            label : "Item 3.1",
                            value : "1"
                        }, {
                            label : "Item 3.2",
                            value : "2"
                        }, {
                            label : "Item 3.3",
                            value : "3"
                        } ] ],
                        constructor : function yreg_CustomServiceForNestedSelects__constructor(
                                args) {
                            lang.mixin(this, args);

                            this.alfSubscribe(this.pubSubScope
                                    + "_valueChangeOf_" + this.levelOneFieldId,
                                    lang.hitch(this, this.levelOneChanged));
                        },
                        levelOneChanged : function yreg_CustomServiceForNestedSelects__levelOneChanged(
                                payload) {
                            var value = payload.value;
                            var levelTwo = dijit.byId(this.levelTwoFieldId);
                            if (levelTwo)
                                levelTwo
                                        .setOptions(this.levelTwoItems[value - 1]);
                        },

                    });
        });

现在，剩下的就是将您的服务包含在您的页面模型中

"<custom-package>/CustomServiceForNestedSelects"

注：

您需要注册一个自定义包并将您的服务放在那里，要了解如何操作，请查看 this tutorial。
要测试您页面的内容，请检查 http://127.0.0.1:8090/aikau-sample/page/na/ws/custom-uri in case you are trying this code in a stand alone aikau app, or http://127.0.0.1:8080/share/page/dp/ws/custom-uri, http://127.0.0.1:8080/share/page/hdp/ws/custom-uri 共享自定义页面

Answer 4

Aikau 实际上提供级联菜单 out-of-the-box，请参阅 alfresco/menus/AlfCascadingMenu 小部件。 Alfresco 中已经有它的使用示例（例如，Share 中主 header 站点菜单下的收藏夹列表）。如果您已经知道级联内容，那么这些内容都可以在您的页面 WebScript 中定义。但是，如果您需要动态更改级联菜单的内容，那么您应该查看 alfresco/header/AlfSitesMenu 或 alfresco/documentlibrary/AlfCreateTemplateContentMenu 的实现（您可以在 Aikau GitHub project 中找到源代码）。

如何在露天创建级联下拉菜单

How to create cascading drop down in alfresco

alfresco

alfresco-share