我有一个要求,我必须创建一个级联下拉列表,这意味着第二个下拉列表的值将取决于第一个。这份清单将被硬编码。
例如,国家的第一个下拉列表,基于该值,第二个下拉列表的状态与该国家相对应;我会有每个国家对应的州列表。
现在我知道了如何使用列表对字段应用约束,但这可以扩展到两个级别吗??
我也搜索过数据列表,但我真的不想这样,因为列表将是泛客户的,但数据列表会使其特定于客户,不希望客户自己创建列表。
如有任何帮助,我们将不胜感激。
感谢
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/controllers/hidden.ftl"
你可以在中找到hidden.ftl
/webapps/share/WEB-INF/classes/alfresco/site webscripts/org/alfresco/components/form/controls/hidden.ftl
在扩展路径中复制此ftl,并将其修改为使用自定义javascript。
如果列表不是硬编码的,只需使用webscript生成列表,并使用ajax调用从浏览器中调用它。
当您使用alfresco社区5.0.d版时,您可以/应该使用aikau进行这类操作,您可以开始学习并使用基于本教程的aikau,用于独立的aikau客户端,或基于本教程用于新的自定义共享页。
一旦你有了页面设置(desc.xml、js和ftl),你就应该有这样的东西:
自定义page.get.desc.xml
<webscript>
<shortname>Test page 1</shortname>
<family>testing</family>
<url>/custom-uri</url>
</webscript>
自定义页面.get.ftl
<@processJsonModel group="share"/>
和自定义page.get.js
model.jsonModel = {
services : [ "alfresco/services/NavigationService",
"alfresco/services/LogoutService",
// Add more services here !!!
],
widgets : [
// Add more widgets here
]
};
您现在需要将两个选择添加到您的小部件阵列中:
{
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"
} ]
}
}
} ]
}
}
下一步是检测第一次选择中的更改事件,然后用新项目刷新第二次选择的列表。为了做到这一点,您需要定义一个新的服务,或者为您的第二次选择扩展选择小部件。我将选择选项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"
注意:
- 您需要注册一个自定义包并将您的服务放置在那里,为了了解如何做到这一点,请查看本教程
- 测试页面的内容检查http://127.0.0.1:8090/aikau-sample/page/na/ws/custom-uri,以防您在独立的aikau应用程序中尝试此代码,或者http://127.0.0.1:8080/share/page/dp/ws/custom-uri,http://127.0.0.1:8080/share/page/hdp/ws/custom-共享自定义页面的uri
一些有用的信息:https://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/cascading-dropdown-alfresco-share-03102011
把它作为我自己级联选择的基础。建立在Marco Altieri 所描述的相同概念之上