是否可以允许用户动态显示或隐藏表格小部件中的列?或者这需要创建自定义表?如果是自定义表,那么基本步骤是什么?
非常感谢任何帮助。谢谢。
答案 0 :(得分:3)
在AppMaker中,没有列,只有行。您在行中组织窗口小部件的方式是为您提供类似于显示的列。但是要回答你的问题... 是,可以允许用户动态隐藏和显示表格小部件中的列,这非常容易实现。
将以下示例作为演示考虑:
假设您有一个包含三个字段的数据源;姓名,电子邮件和作业。在app maker的新页面中,将一个表小部件放到画布的中心,然后选择它作为其数据源。然后在表格小部件的顶部添加三个按钮小部件并水平对齐它们。将左按钮的文本小部件更改为“隐藏名称”。然后将中间按钮的文本更改为“隐藏电子邮件”,然后将右键的文本更改为“隐藏分配”。它应该类似于这样:
现在,单击表格行中的左侧标签小部件(不在表格标题内),并将其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;
}
我们还需要在“隐藏电子邮件”按钮中添加类似的代码。单击该按钮并将以下代码添加到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;
}
应该是全部。是时候预览应用程序了。请这样做,结果应该是这样的:
我希望它有所帮助!
答案 1 :(得分:0)
solution提供的Morfinismo的另一种替代方法是渲染动态表格。我们的想法是使用Grid Widget呈现表的标题,并使用List Widget在每行内部使用Grid来呈现表的主体。可以使用Model's Metadata填充网格的数据源。更多详细信息和屏幕截图可以在this answer中的选项#4中找到。