代码之家 › 专栏 › 技术社区 › goku_da_master

使用Web用户控件在多个表中水平对齐行

web-user-controls asp.net c#

goku_da_master · 技术社区 · 15 年前

我需要在水平布局的不同表中对齐行。我更喜欢将HTML代码放在一个Web用户控件中,这样我就可以创建该控件的任意多个实例,并将它们水平放置。问题是,行中的文本需要换行。因此,有些行可以垂直展开,而有些行可能不垂直展开(请参见下面的示例)。发生这种情况时,其他表中的行不会水平对齐。我知道我可以通过使用一个表来完成所有这些工作,但这意味着我必须复制名称、地址和电话HTML代码,而不是动态地创建我的用户控件的新实例(实际上,有更多的字段,但我保持简单)。有什么方法可以做到这一点,不管是使用DIV、表格还是其他什么方法?

问题是:MaryJane的地址字段扩展了2行,导致她的电话字段与John和Bob的地址字段不匹配。

Name:  John Doe           Name: Mary Jane                   Name: Bob Smith

Address: 123 broadway     Address: Some really long address Address: Short address

Phone: 123-456            that takes up multiple lines      Phone: 111-2222

                          Phone: 456-789

我不会以任何方式限制如何这样做(除了使用ASP.NET),但我更喜欢使用一个在设计时实例化X次的Web控件(在本例中,它是3次)。我使用的是VS2008和.NET 3.5

2 回复 | 直到 15 年前

Ted 15 年前

呈现数据,然后使用javascript(jquery please)客户端查找所有td.address(例如)单元格,查找高度最大的单元格,并将所有其他单元格的高度设置为该高度。你提到了其他领域,所以逻辑可能会更复杂一些,但原则是成立的。

一些快速代码:

<script type="text/javascript">
  $(function() {
    var cells = $('td.address');
    var height;

    // some code to foreach on all relevant cells to find max size

     cells.each(function(index) {
       $(this).height(height));
    });
  });
</script>

goku_da_master 15 年前

大家都知道,这是可能的。我使用jquery完成了这个解决方案,它工作得很好。我为每个表分配了一个特定的CSS类,并使用它来标识哪些表需要调整大小(不想使用ID,因为每个表都必须是唯一的)。它适用于4种主要浏览器。对于IE7,请确保在空单元格中添加一个空间以使其正常工作。这是javascript:

function ResizeTableRows() {
    // select tables by css class name using jquery
    var tables = $('.myCssClassName');

    // all tables should have the save number of rows, so just use the first one
    var totalRows = tables[0].rows.length;

    for (var rowNumber = 0; rowNumber < totalRows; rowNumber++) {
        var maxRowHeight = GetMaxRowHeight(tables, rowNumber);

        for (var i = 0; i < tables.length; i++) {
            if (maxRowHeight > 0) {
                tables[i].rows[rowNumber].height = maxRowHeight;
                SetCellHeight(tables[i].rows[rowNumber].cells, maxRowHeight);
            }
        }
    }
}

function GetMaxRowHeight(tables, rowNumber) {
    var maxRowHeight = 0;

    for (var i = 0; i < tables.length; i++) {
        var row1 = tables[i].rows[rowNumber];
        var cell1 = row1.cells[0];
        var rowHeight = row1.clientHeight;

        if (rowHeight <= 0) {
            rowHeight = row1.height;
        }        
        if (rowHeight <= 0) {
            rowHeight = cell1.clientHeight;
        }        

        if (rowHeight > maxRowHeight) {
            maxRowHeight = rowHeight;
        }
    }
    return maxRowHeight;
}

function SetCellHeight(cells, maxRowHeight) {
    for (var i = 0; i < cells.length; i++) {
        cells[i].height = maxRowHeight;
    }
}

这是启动过程的代码。将其添加到主页而不是Web控件(如果使用.NET)

<script type="text/javascript">
    // runs automatically after this page has been loaded and rendered
    $(document).ready(function() {
        ResizeTableRows();
    });
</script>