- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
对于 Alfresco 共享中的表单,我想要一个下拉框,其中填充了自定义选项,具体取决于表单中早期字段的值。
我的表单至少有两个字段。第一个是文本框,必须在其中输入唯一代码。完成后,第二个,一个选择框,必须使用输入的代码加载它的选项。
支持此要求的数据存储在数据列表中。我还通过网络脚本(沿着 /getOptions/{uniqueCode
的行,返回有效选项的 JSON 数组)使其可用。
现在,我对如何构建将监视代码文本字段上的状态更改并重新加载下拉框的表单部分感到困惑。我可以想到一些 javascript,但我什至不知道从哪里开始更改/添加文件。
我已经浏览了 FDK
,在那里我找到了 selectone ftl。不幸的是,这仅支持固定选项。
我的实现基于我选择的答案
这与我已经在做的非常相似,我曾希望能够在服务器端做到这一点,而不包括额外的往返。到目前为止,这是我拥有的最好的。
share-config-custom.xml
我在此处定义表单,并将我想成为我的选择的属性指向我自己的自定义字段模板。我传递了一个参数 ds
给它,dataSource
,它保存了我的网页脚本的路径。
<config evaluator="node-type" condition="my:contentType">
<forms>
<form>
<field-visibility>
<show id="my:code" />
<show id="my:description" />
</field-visibility>
<appearance>
<set id="general" appearance="bordered-panel" label="General" />
<field id="my:description" set="general">
<control template="/org/alfresco/components/form/controls/customSelectone.ftl">
<control-param name="ds">/alfresco/service/mark/cache/options</control-param>
</control>
</field>
</appearance>
</form>
</forms>
<select>
box 作为一个字段,最后,它执行对我的 webscript 的调用以获取可能的选项。
<#if field.control.params.ds?exists><#assign ds=field.control.params.ds><#else><#assign ds=''></#if>
<style type="text/css">
#${fieldHtmlId}-AutoComplete {
width:${width}; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<div class="form-field">
<#-- view form -->
<#if form.mode == "view">
<div class="viewmode-field">
<#if field.mandatory && !(field.value?is_number) && field.value == "">
<span class="incomplete-warning"><img src="${url.context}/components/form/images/warning-16.png" title="${msg("form.field.incomplete")}" /><span>
</#if>
<span class="viewmode-label">${field.label?html}:</span>
<span class="viewmode-value">${field.value?html}</span>
</div>
<#else>
<#-- alternative: if form.mode == "edit" -->
<#-- Create/edit form -->
<label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
<div id="${fieldHtmlId}-AutoComplete">
<#-- Label to hold error messages from the javascript -->
<p style="color:red" id="${fieldHtmlId}-scriptError"></p>
<select id="${fieldHtmlId}" name="${field.name}"
<#if field.control.params.styleClass?exists>class="${field.control.params.styleClass}"</#if>
<#if field.description?exists>title="${field.description}"</#if>
<#if field.control.params.size?exists>size="${field.control.params.size}"</#if>
<#if field.disabled>disabled="true"</#if> >
<#-- Add the field's current value if it has one as an option -->
<option>${field.value}</option>
</select>
<div id="${fieldHtmlId}-Container"></div>
</div>
</div>
<script type="text/javascript">//<![CDATA[
(function()
{
<#-- This references the code field from the form model. For this, the -->
<#-- share config must be set to show the field for this form. -->
<#if form.fields.prop_my_code??>
var code = "${form.fields.prop_my_code.value}";
<#else>
var code = 0;
</#if>
// get code
if(code === null || code === "") {
document.getElementById('${fieldHtmlId}-scriptError').innerHTML = 'No description available.';
return;
}
// Create webscript connection using yui connection manager
// Note that a much more elegant way to call webscripts using Alfresco.util is
// available in the answers here.
var AjaxConnectionManager = {
handleSuccess:function(o) {
console.log('response: '+o.responseText);
this.processResult(o);
},
handleFailure:function(o) {
var selectBox = document.getElementById('${fieldHtmlId}');
var i;
document.getElementById('${fieldHtmlId}-scriptError').innerHTML = 'Descriptions not available.';
},
startRequest:function() {
console.log('webscript call to ${ds} with params code='+code);
YAHOO.util.Connect.asyncRequest('GET', "${ds}?typecode="+code, callback, null);
},
processResult:function(o) {
var selectBox = document.getElementById('${fieldHtmlId}');
var jso = JSON.parse(o.responseText);
var types = jso.types;
console.log('adding '+types.length+' types to selectbox '+selectBox);
var i;
for(i=0;i<types.length;i++) {
// If the current field's value is equal to this value, don't add it.
if(types[i] === null || types[i] === '${field.value}') {
continue;
}
selectBox.add(new Option(types[i], types[i]));
}
}
}
// Define callback methods
var callback = {
success:AjaxConnectionManager.handleSuccess,
failure:AjaxConnectionManager.handleFailure,
scope: AjaxConnectionManager
};
// Call webscript
AjaxConnectionManager.startRequest();
})();
//]]></script>
<#-- This closes the form.mode != "create" condition, so the js is only executed when in edit/create mode. -->
</#if>
最佳答案
我以前有过类似的任务。
首先你需要在你的配置xml中定义一个自定义模板
<config evaluator="node-type" condition="my:type">
<forms>
<form>
<field-visibility>
<show id="cm:name" />
<show id="my:options" />
<show id="cm:created" />
<show id="cm:creator" />
<show id="cm:modified" />
<show id="cm:modifier" />
</field-visibility>
<appearance>
<field id="my:options">
<control template="/org/alfresco/components/form/controls/custom/custom-options.ftl" />
</field>
</appearance>
</form>
</forms>
</config>
custom-options.ftl
渲染
my:options
类型
my:type
.
custom-options.ftl
将包含显示您的数据所需的 html,当然还有对 javascript 类的调用,该类将从您的 web 脚本加载您的列表。
<#assign controlId = fieldHtmlId + "-cntrl">
<script type="text/javascript">//<![CDATA[
// Here you could call your webscript and load your list
</script>
<div id="${controlId}" class="form-field">
<label for="${fieldHtmlId}">${msg("form.control.my-options.label")}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
<select id="${fieldHtmlId}" name="${field.name}" tabindex="0"
<#if field.description??>title="${field.description}"</#if>
<#if field.control.params.size??>size="${field.control.params.size}"</#if>
<#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
<#if field.control.params.style??>style="${field.control.params.style}"</#if>>
</select>
<@formLib.renderFieldHelp field=field />
</div>
关于drop-down-menu - 露天分享中的动态选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17150808/
我正在使用 gfx-hal,这需要我创建需要使用特定于其类型的函数显式销毁的资源。我想将这些类型的实例存储在结构中,并且我还想将清理它们与拥有结构的生命周期相关联,而不是手动管理它们的生命周期并可能在
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 7 年前。 Improve
我知道这一定是非常明显的事情,但我不明白。我有两个 div,一个可拖动,另一个带有 on:drop,当我将可拖动的 div 放到它上面时,它似乎没有被调用。我错过了什么? 回复:https://sve
在下面的应用程序中,从未调用 drop 方法。放置目标 ( div2 ) 由 dragEnter 和 dragOver 事件中的取消事件指示,但不触发放置。 HTML 和 .dart 如下:
我已经使用 ng2 文件上传实现了文件删除。我面临的问题是,当文件被拖放到拖放区域之外时,浏览器会打开它。有什么办法可以防止这种事件发生吗? Angular 2/4 最佳答案 是的,终于成功了。我希望
我是使用rust 的新手。我的简单代码 struct Foo{ data : & 'a String, } fn test_foo(){ let s1:String = String::
我希望 image.src 显示 id,而不是每个 的值。 drop.id 存在吗?这可以做到吗?或者id被锁定在中?当用户点击提交时,我需要传递表单中的值。 function swapImage
我正在使用一个数据框,我必须将两列(定量和销售)添加然后删除它们,然后将列名称的第一个字母大写。问题是当我使用 drop 时,它会将其保存到另一个数据帧。从文档来看,问题来自 inplace=fals
我想让 Drop left 而不是在 bootstrap 下拉按钮中下拉。我正在努力实现这一点,但我无法做到这一点,有人可以指导我这样做吗? 这是我的代码 Small button
我在使用 Blazor 时遇到了一个奇怪的问题... 我有一个使用拖放功能的应用程序,它使用 .Net Core 3.1 运行良好。然而,无论我做什么,drop 事件现在都不会被解雇,我不知道为什么。
我希望能够移动(在灰色背景上,通过拖放)Bootstrap 2 提供的模态表单。谁能告诉我实现此目的的最佳实践是什么? 最佳答案 默认情况下, Bootstrap 不附带任何拖放功能,但您可以添加一些
我试图在拖放过程中更改节点上的光标,但图像没有改变。我打电话 setCursor()在 DragDetectedEventHandler我的节点。我也试过调用 getParent().setCurso
我刚刚注意到您可以在 PostgreSQL 中编写两者。有什么区别还是只是“简化”的语法。据我所知,这两者的作用完全相同。 ALTER TABLE table DROP my_column; 对比 A
我将屏幕分为两个 DIV。在左侧的 DIV 中,我有一些 50x50 像素的 DIV,在右侧的 DIV 中,我有一个由 80x80 LI 组成的空网格 。左侧的 DIV 是可拖动的,一旦放到 LI 上
我正在使用这个库 Drop ,但是记录很差,我不明白如何使用它。首先我安装了: npm install tether-drop 我已经下载了 Drop.js,然后用 Tether 导入它(导入所有内容
我想使用 jQuery 处理拖放 HTML 5 功能。直到没有触发 drop 事件为止都可以。看看我的代码: A B C $('#columns .column').on({
我需要使用 mysqldump 和 replace 而不是 insert 并且在恢复时不删除数据库和表。但我需要删除并重新创建触发器和存储过程 为此,我将 mysqldump 与 --replace
在 CD 管道中,我使用下载构建工件任务将工件下载到目标目录。我的发布工件目录结构如下 drop --> 来源 --> abc.zip 现在的问题是,每当我下载工件时,它都会下载整个放置文件夹并将相同
您好,我正在开发拖放应用程序。我有一个可以沿着文档拖动的 DIV,并且文档中还有其他一些 div,我可以将一个 div 拖到其他 div,这会使页面变得困惑它在空的地方并禁用另一个 div 中的放置,
我有以下代码: $(".dropzone").on("dragover", function(ev) { ev.preventDefault();
我是一名优秀的程序员,十分优秀!