显示/隐藏App Maker表中的列?

bbx*_*bbx 3 google-app-maker

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

非常感谢您的协助。谢谢。

Mor*_*smo 5

在AppMaker中,没有列,只有行。在行内组织窗口小部件的方式就是使您的列像显示一样。但是要回答您的问题... ,可以允许用户动态隐藏和显示表小部件中的列,并且非常非常容易实现。

考虑以下示例作为演示:

假设您有一个包含三个字段的数据源;名称,电子邮件和作业。在app maker中的新页面中,将表格小部件放到画布的中心,然后选择它作为其数据源。然后在表格小部件的顶部添加三个按钮小部件,并将它们水平对齐。将左按钮的文本小部件更改为“隐藏名称”。然后将中间按钮的文本更改为“隐藏电子邮件”,然后将右键按钮的文本更改为“隐藏分配”。它应该类似于以下内容:

在此处输入图片说明

现在,单击表行内(而不是表标题内)的左侧标签小部件,然后将其name属性更改为“ name”。对中间标签小部件执行类似操作,并将其name属性更改为“ email”,同时对右侧标签小部件将其name属性更改为“ assign”。看下面的例子:

在此处输入图片说明

接下来,我们需要向按钮的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;
}
Run Code Online (Sandbox Code Playgroud)

我们还需要向“隐藏电子邮件”按钮添加类似的代码。单击该按钮,并将以下代码添加到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;
}
Run Code Online (Sandbox Code Playgroud)

最后,我们使用“隐藏分配”按钮执行相同的操作。单击它,并将以下代码添加到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;
}
Run Code Online (Sandbox Code Playgroud)

那应该是全部。现在是时候预览应用程序了。请这样做,结果应该是这样的:

在此处输入图片说明

希望对您有所帮助!