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

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

alfresco

Alfresco 如何在露天创建级联下拉菜单,alfresco,alfresco-share,Alfresco,Alfresco Share,我需要创建一个级联下拉列表，这意味着第二个下拉列表的值将取决于第一个下拉列表。名单将被硬编码例如，国家的第一个下拉列表，根据该值，第二个下拉列表为该国家对应的状态；我会有每个国家对应的州列表现在我知道如何使用列表在字段上应用约束，但这可以扩展到两个级别吗我也搜索了datalist，但我真的不想这样，因为该列表将是泛客户的，但datalist将使其特定于客户，并且不希望客户自己创建该列表我们将非常感谢您的帮助谢谢，Alfresco没有现成的级联下拉列表。然而，开发一个并不困难因为您的

我需要创建一个级联下拉列表，这意味着第二个下拉列表的值将取决于第一个下拉列表。名单将被硬编码

例如，国家的第一个下拉列表，根据该值，第二个下拉列表为该国家对应的状态；我会有每个国家对应的州列表

现在我知道如何使用列表在字段上应用约束，但这可以扩展到两个级别吗

我也搜索了datalist，但我真的不想这样，因为该列表将是泛客户的，但datalist将使其特定于客户，并且不希望客户自己创建该列表

我们将非常感谢您的帮助

谢谢，Alfresco没有现成的级联下拉列表。然而，开发一个并不困难

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


下拉列表1
下拉列表2

在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/classes/alfresco/site webscripts/org/alfresco/components/form/controls/hidden.ftl

在扩展路径中复制此ftl，并将其修改为使用自定义javascript

如果列表不是硬编码的，只需使用webscript生成列表，并使用ajax调用从浏览器中调用它

Alfresco没有现成的级联下拉列表。然而，开发一个并不困难


下拉列表1
下拉列表2

在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>

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

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

在扩展路径中复制此ftl，并将其修改为使用自定义javascript

如果列表不是硬编码的，只需使用webscript生成列表，并使用ajax调用从浏览器中调用它

一些有用的信息：

将其作为我自己的级联选择的基础。基于Marco Altieri描述的相同概念，提供了一些有用的信息：

将其作为我自己的级联选择的基础。基于Marco Altieri所述的相同概念，正如您使用alfresco community edition 5.0.d一样，您可以/应该使用aikau来实现这类功能，您可以开始学习并使用独立的aikau客户端或新的自定义共享页面

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

自定义页面.get.desc.xml

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

<@processJsonModel group="share"/>

现在，您需要向widgets数组添加两个选项：

{
    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小部件。我将选择第1个选项： CustomServiceForNestedSelects.js

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

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"

“/CustomServiceForNestedSelects”

注意：

您需要注册一个定制包并将您的服务放在那里，为了了解如何注册，请检查
若要在独立的aikau应用程序中尝试此代码，请检查页面内容；若要在共享自定义页面中尝试此代码，请执行以下操作：

当您使用alfresco community edition 5.0.d时，您可以/应该使用这类工具，您可以开始学习并使用基于的aikau，用于独立的aikau客户端或新的自定义共享页面

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

自定义页面.get.desc.xml

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

<@processJsonModel group="share"/>

现在，您需要向widgets数组添加两个选项：

{
    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"
                    } ]
                }
            }
        } ]
    }
}

下一步是在第一次选择中检测更改事件，然后刷新lis