0

我需要在 HtmlTable 中动态显示行。我认为将 HtmlTableRow 的高度设置为 0 可以解决问题,但事实并非如此。以下是我在代码隐藏中创建行及其“片段”的方式:

// Row 3
foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";

var cellColIndex2 = new HtmlTableCell();
cellColIndex2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColIndex2);
var cellColFund2 = new HtmlTableCell();
cellColFund2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColFund2);
var cellColOrg2 = new HtmlTableCell();
cellColOrg2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColOrg2);
var cellColAccount2 = new HtmlTableCell();
cellColAccount2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColAccount2);
var cellColActivity2 = new HtmlTableCell();
cellColActivity2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColActivity2);
var cellColAmount2 = new HtmlTableCell();
cellColAmount2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColAmount2);

boxIndex2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);

boxFund2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxFund2foapalrow3"
};
cellColFund2.Controls.Add(boxFund2);

boxOrganization2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxOrg2foapalrow3"
};
cellColOrg2.Controls.Add(boxOrganization2);

boxAccount2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxAccount2foapalrow3"
};
cellColAccount2.Controls.Add(boxAccount2);

boxActivity2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxActivity2foapalrow3"
};
cellColActivity2.Controls.Add(boxActivity2);

boxAmount2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxAmount2foapalrow3"
};
cellColAmount2.Controls.Add(boxAmount2);
//cellColAmount2.ID = ""; <= Maybe the cells need IDs too, like: ?

foapalHTMLTable.Rows.Add(foapalrow3);
foapalrow3.Height = "0"; // <= does this need something appended, such as "em" or such? Normal height may be 15

...这是 jQuery 尝试有条件地增加高度以使行可见:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').height.not("15")) {
        console.log('reached the foapalrow3 not visible branch');
        $('[id$=foapalrow3]').height(15);
    }
});

不幸的是,从 git-go 可以看到该行;将高度设置为 0 并不会阻止它立即“尽其所能”显示。我是否还需要将 HtmlTableCells 和/或 TextBoxes 的高度设置为 0?或者还需要什么?

注意:我意识到 jQuery 可能无法工作(“height.not”现在只是一个猜测),但我需要先解决第一个问题(行高没有设置为 0,因此有效地使它是看不见的)。

更新

我在创建它们之后隐藏了这些行(在 C# 代码隐藏/服务器端代码中):

        foapalHTMLTable.Rows.Add(foapalrow3);
        foapalrow3.Visible = false;

...并在我的客户端 jQuery 中有这个:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').not(":visible")) {
        alert('reached the foapalrow3 not visible branch');
        $('[id$=foapalrow3]').toggle();
    }
    else if ($('[id$=foapalrow4]').not(":visible")) {
        alert('reached the foapalrow4 not visible branch');
        $('[id$=foapalrow4]').slideDown();
    }
});

...但是它不起作用-不可见的行永远不会可见(我确实看到了第一个警报-实际上是两次(我必须连续两次将其关闭))。

更新 2

我将行的设置注释为不可见(可见 = false)。我将此添加到就绪函数中:

$(document).ready(function () {
    alert('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
    $('[id$=foapalrow3]').toggle();
    $('[id$=foapalrow4]').toggle();
});

我确实看到了警报,但切换不会将它们从可见切换到-in。我也试过 .slideUp(),但也没有用。Ravi 建议“设置显示:无”;我愿意尝试,但如何,在哪里?

4

2 回答 2

1

您可以使用 JQuerytoggle()动态隐藏/显示。或者您可以使用display:nonecss 属性(如果您愿意,可以作为一个类)。两者都将在后台生成 html,但不会显示在可见页面上。

于 2015-06-23T03:01:54.420 回答
0

这(有点)有效,但很笨拙:

如果我设置的不是 HtmlTableRow 的高度,而是HtmlTableRow (TextBoxes/input = text) 中元素的高度为 0,单击按钮“添加”该行(它会增加元素的高度,从而增加父级 HtmlTableRow 及其父级 HtmlTable 的高度。

但是,由于只是“短”而不是隐藏,在点击“+​​”按钮之前,该休眠行看起来比垃圾箱更时髦:

在此处输入图像描述

我也许可以将其作为一项功能“出售”(“隐藏行的微小高度表明它可用,但尚不可用”)但我对此表示怀疑,真的。

所以我仍然愿意接受关于如何完善这种组合的建议。

我这样做是这样的:

C# 代码隐藏(服务器端):

boxIndex2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    Height = 0,
    ID = "boxIndex2foapalrow3"
};
. . . // similar code for the other elements (where their height is also set to 0) elided for brevity

注意: HtmlTableRow没有设置为不可见 - 如果我这样做,它根本不起作用(该行是不可见的,但即使在选择“+”按钮后它仍然保持这种状态)。

jQuery客户端:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    var textboxHeight = 15;
    if ($('[id$=foapalrow3]').not(":visible")) {
    //if (($('[id$=boxIndex2foapalrow3]').height() == 0) {
        alert('reached the foapalrow3 height zilch branch');
        $('[id$=boxIndex2foapalrow3').height(textboxHeight);
        $('[id$=boxFund2foapalrow3').height(textboxHeight);
        $('[id$=boxOrg2foapalrow3').height(textboxHeight);
        $('[id$=boxAccount2foapalrow3').height(textboxHeight);
        $('[id$=boxActivity2foapalrow3').height(textboxHeight);
        $('[id$=boxAmount2foapalrow3').height(textboxHeight);
    }
    . . .
});

注意:另一个难题是为什么 "if ($('[id$=foapalrow3]').not(":visible"))" 测试返回 true,因为该行不应该真的是不可见的......???注释掉的测试,它应该返回 true:

if (($('[id$=boxIndex2foapalrow3]').height() == 0) {

...没有(它返回 false)。

???

更新

我能够将 jQuery 改进为:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    var textboxHeight = 15;
    if ($('[id$=boxIndex2foapalrow3]').height() == 0) {
        $('[id$=boxIndex2foapalrow3').height(textboxHeight);
        $('[id$=boxFund2foapalrow3').height(textboxHeight);
        $('[id$=boxOrg2foapalrow3').height(textboxHeight);
        $('[id$=boxAccount2foapalrow3').height(textboxHeight);
        $('[id$=boxActivity2foapalrow3').height(textboxHeight);
        $('[id$=boxAmount2foapalrow3').height(textboxHeight);
    }
    else if ($('[id$=boxIndex3foapalrow4]').height() == 0) {
        $('[id$=boxIndex3foapalrow4').height(textboxHeight);
        $('[id$=boxFund3foapalrow4').height(textboxHeight);
        $('[id$=boxOrg3foapalrow4').height(textboxHeight);
        $('[id$=boxAccount3foapalrow4').height(textboxHeight);
        $('[id$=boxActivity3foapalrow4').height(textboxHeight);
        $('[id$=boxAmount3foapalrow4').height(textboxHeight);
    }
});

...但它仍然无法正常工作 - 当我单击按钮时,会同时添加行。我认为这是因为 jQuery 似乎运行了两次,但为什么要这样做呢?

HtmlTable 的预按钮单击状态现在是这样的:

在此处输入图像描述

更新 3

我终于弄明白了——我在页面上有两个相同 Web 部件的实例,这意味着来自两个实例的 jQuery 最终都出现在“查看源代码”中,因此它运行了两次。通过删除 Web 部件的一个实例,问题得到解决,并且上面的代码(在更新 2 中)工作正常。

现在唯一的“问题”是在捣碎“+”按钮之前行没有完全隐藏 - 它们的高度不是很大,但大于 0。

于 2015-06-24T18:45:57.253 回答