gpt4 book ai didi

google-app-maker - 显示/隐藏 App Maker 表中的列?

转载 作者:行者123 更新时间:2023-12-01 11:16:42 28 4
gpt4 key购买 nike

是否可以允许用户动态显示或隐藏表格小部件中的列?还是需要创建自定义表格?如果是自定义表格,其基本步骤是什么?

非常感谢任何帮助。谢谢。

最佳答案

在 AppMaker 中,没有列,只有行。您在行内组织小部件的方式就是为您提供类似显示的列。但要回答您的问题...,允许用户动态隐藏和显示表格小部件中的列是可能的,而且实现起来非常非常容易。

考虑以下示例作为演示:

假设您有一个包含三个字段的数据源;姓名、电子邮件和任务。在 App Maker 的新页面中,将表格小部件拖放到 Canvas 的中心,然后选择它作为其数据源。然后在表格小部件的顶部添加三个按钮小部件并将它们水平对齐。将左侧按钮的文本小部件更改为“隐藏名称”。然后将中间按钮的文本更改为“隐藏电子邮件”,然后将右侧按钮的文本更改为“隐藏分配”。它应该像这样:

enter image description here

现在,单击表格行内的左侧标签小部件(不在表格标题内),并将其名称属性更改为“名称”。对中间的标签小部件执行类似操作,将其名称属性更改为“电子邮件”,并将右侧标签小部件的名称属性更改为“分配”。看看下面的例子:

enter image description here

接下来,我们需要向按钮的 onClick 事件添加一些逻辑,以动态显示和隐藏列。单击“隐藏名称”按钮,然后将以下代码添加到 onClick 事件中:

var visibility;
if(widget.text === "Hide Name"){
widget.text = "Show Name";
visibility = false;
} else {
widget.text = "Hide Name";
visibility = true;
}
var table = widget.root.descendants.Table1.descendants;
table.Table1nameHeader.visible = visibility;
var tableRows = table.Table1Body.children._values;
for(var i=0; i<tableRows.length; i++){
var row = tableRows[i];
row.children.name.visible = visibility;
}

我们还需要在“隐藏电子邮件”按钮中添加类似的代码。单击该按钮并将以下代码添加到 onClick 事件:

var visibility;
if(widget.text === "Hide Email"){
widget.text = "Show Email";
visibility = false;
} else {
widget.text = "Hide Email";
visibility = true;
}
var table = widget.root.descendants.Table1.descendants;
table.Table1emailHeader.visible = visibility;
var tableRows = table.Table1Body.children._values;
for(var i=0; i<tableRows.length; i++){
var row = tableRows[i];
row.children.email.visible = visibility;
}

最后,我们对“隐藏分配”按钮执行相同的操作。单击它并在 onClick 事件中添加以下代码:

var visibility;
if(widget.text === "Hide Assigns"){
widget.text = "Show Assigns";
visibility = false;
} else {
widget.text = "Hide Assigns";
visibility = true;
}
var table = widget.root.descendants.Table1.descendants;
table.Table1assignmentsHeader.visible = visibility;
var tableRows = table.Table1Body.children._values;
for(var i=0; i<tableRows.length; i++){
var row = tableRows[i];
row.children.assign.visible = visibility;
}

应该就这些了。是时候预览应用程序了。请这样做,结果应该是这样的:

enter image description here

希望对您有所帮助!

关于google-app-maker - 显示/隐藏 App Maker 表中的列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49914445/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com