Quickbase 甘特图 Jquery 变化
Quickbase gantt chart Jquery change
我们目前正在使用 Quickbase 中的甘特图功能来突出当前开发人员的工作量。我们正在创建有假期的任务,以便将假期放在同一任务级别。有一个突出的要求是将蓝色条变为紫色,以便您可以区分两者。目前我们已经创建了一个添加了 HTML 的计算字段,但无法完全使 jquery 正常工作。这就是我们目前所拥有的。
If([Task Name]="Vacation","<script type=\"text/javascript\">$(document).ready(function() { $('#timeline img').attr('src',('https://images.quickbase.com/si/16/821-check_purple.png')); });</script>","")
这应该用脚本中的图像替换当前行 div 中的图像。任何帮助都会很棒
感谢
似乎有几个问题导致您的代码无法运行。首先,让我区分一下 Quickbase 中的 "Calculated Fields" 和 "Formula Fields"。计算字段在报表视图中定义(意味着它们只能在该报表中查看,而不能在其他报表中查看)并且不允许 HTML。另一方面,公式字段的创建方式与传统字段类似,允许您 select 一个允许某些 HTML 的复选框。您需要使用公式字段来获取表单或报告中 运行 的代码。您还需要确保该字段在报告中可见,否则代码将不会执行。
一旦问题解决,您的脚本可能不会 运行 因为 Quickbase 限制允许的 HTML 标签。您不会更改图像,只会看到字段中显示的脚本文本。您可以通过将脚本放在 IMG
元素的 onload
标记中来解决这个问题。这将具有不再需要 document.ready(function(){});
才能正确执行的额外效果。
最后,最后一个问题是selector。即使您使用的是附加到特定记录的公式字段,脚本本身也会对整个页面执行。为了仅 select 任务名称为 "Vacation" 的记录的 img
元素,您需要一种区分行的方法。幸运的是,时间线报告将每一行包装在 div
中,为其提供一个 ID "rid" + 记录 ID。
因此,如果您将所有内容放在一起,您最终应该会得到一个选中 "Allow some HTML tags to be inserted in the field" 的公式文本字段,这就是公式:
If([Task Name]="Vacation", "<img qbu=\"module\" src=\"/i/clear2x2.gif\" onload=\"javascript:$('#rid" & [Record ID#] & " > td:has(div.timeline) > div.timeline > img').attr('src',('https://images.quickbase.com/si/16/821-check_purple.png'));\">", "")
我在自己的时间线报告中测试了上述公式,它按预期工作。
编辑:
要排除 Quickbase 在编辑源代码时自动放置的 clear2x2.gif 图片:
If([Task Name]="Vacation", "<img qbu=\"module\" src=\"/i/clear2x2.gif\" onload=\"javascript:$('#rid" & [Record ID#] & " > td:has(div.timeline) > div.timeline > img:not([src^="/i/clear2x2.gif"])').attr('src',('https://images.quickbase.com/si/16/821-check_purple.png'));\">", "")
我们目前正在使用 Quickbase 中的甘特图功能来突出当前开发人员的工作量。我们正在创建有假期的任务,以便将假期放在同一任务级别。有一个突出的要求是将蓝色条变为紫色,以便您可以区分两者。目前我们已经创建了一个添加了 HTML 的计算字段,但无法完全使 jquery 正常工作。这就是我们目前所拥有的。
If([Task Name]="Vacation","<script type=\"text/javascript\">$(document).ready(function() { $('#timeline img').attr('src',('https://images.quickbase.com/si/16/821-check_purple.png')); });</script>","")
这应该用脚本中的图像替换当前行 div 中的图像。任何帮助都会很棒
感谢
似乎有几个问题导致您的代码无法运行。首先,让我区分一下 Quickbase 中的 "Calculated Fields" 和 "Formula Fields"。计算字段在报表视图中定义(意味着它们只能在该报表中查看,而不能在其他报表中查看)并且不允许 HTML。另一方面,公式字段的创建方式与传统字段类似,允许您 select 一个允许某些 HTML 的复选框。您需要使用公式字段来获取表单或报告中 运行 的代码。您还需要确保该字段在报告中可见,否则代码将不会执行。
一旦问题解决,您的脚本可能不会 运行 因为 Quickbase 限制允许的 HTML 标签。您不会更改图像,只会看到字段中显示的脚本文本。您可以通过将脚本放在 IMG
元素的 onload
标记中来解决这个问题。这将具有不再需要 document.ready(function(){});
才能正确执行的额外效果。
最后,最后一个问题是selector。即使您使用的是附加到特定记录的公式字段,脚本本身也会对整个页面执行。为了仅 select 任务名称为 "Vacation" 的记录的 img
元素,您需要一种区分行的方法。幸运的是,时间线报告将每一行包装在 div
中,为其提供一个 ID "rid" + 记录 ID。
因此,如果您将所有内容放在一起,您最终应该会得到一个选中 "Allow some HTML tags to be inserted in the field" 的公式文本字段,这就是公式:
If([Task Name]="Vacation", "<img qbu=\"module\" src=\"/i/clear2x2.gif\" onload=\"javascript:$('#rid" & [Record ID#] & " > td:has(div.timeline) > div.timeline > img').attr('src',('https://images.quickbase.com/si/16/821-check_purple.png'));\">", "")
我在自己的时间线报告中测试了上述公式,它按预期工作。
编辑:
要排除 Quickbase 在编辑源代码时自动放置的 clear2x2.gif 图片:
If([Task Name]="Vacation", "<img qbu=\"module\" src=\"/i/clear2x2.gif\" onload=\"javascript:$('#rid" & [Record ID#] & " > td:has(div.timeline) > div.timeline > img:not([src^="/i/clear2x2.gif"])').attr('src',('https://images.quickbase.com/si/16/821-check_purple.png'));\">", "")