asp.net-mvc - 在 MVC 中使用 WebGrid 对列进行分组（子标题）

Question

WebGrid在 MVC 中使用时是否可以对列进行分组？我只能找到一个使用子网格的示例，但它会为每个单元格重复子标题，例如Razor Nested WebGrid：

@{
    var data = Enumerable.Range(0, 10).Select(i => new { Index = i, SubItems = new object[] { new { A = "A" + i, B = "B" + (i * i) } } }).ToArray();
    WebGrid topGrid = new WebGrid(data);
}

@topGrid.GetHtml(columns:
    topGrid.Columns(
        topGrid.Column("Index"),
        topGrid.Column("SubItems", format: (item) =>
        {
            WebGrid subGrid = subGrid = new WebGrid(item.SubItems);
            return subGrid.GetHtml(
                    columns: subGrid.Columns(
                        subGrid.Column("A"),
                        subGrid.Column("B")
                    )
                );
        })
    )
)

这将导致这样的事情

____________________
| index |  sub item|
|_______|__________|
|    0  |  A    B  |
|       |  1    2  |
|_______|__________|
|    1  |  A    B  |
|       |  1    2  |
|_______|__________|
|    2  |  A    B  |
|       |  1    2  |
|_______|__________|

但我正在寻找的是：

____________________
| index |  sub item|
|_______|__________|
|       |  A |  B  |
|_______|____|_____|
|   0   |  1 |  2  |
|   1   |  1 |  2  |
|   2   |  1 |  2  |
|_______|____|_____|

Answer 1

我不知道我的解决方案有多优雅，但它有效....

您将需要在您的项目中使用 HTMLAgilityPack（从这里获取：http: //htmlagilitypack.codeplex.com/）

然后创建一个 web 网格并将 Html 字符串存储在一个变量中，例如。请务必设置displayHeader:false，因为我们将创建自己的自定义标头：

@{
        WebGrid additionalTrainingGrid = new WebGrid(source: AdditionalMasterPlanOptimizationStatistics);
         var additionalTrainingGridHTML = additionalTrainingGrid.GetHtml(displayHeader:false,
            columns: additionalTrainingGrid.Columns(
                additionalTrainingGrid.Column("MasterPlanName", "MasterPlanName", style: "P1MasterPlanName"),
                additionalTrainingGrid.Column("P1ScheduledRequests", "P1 Scheduled Requests", style: "P1ScheduledRequests"),
                additionalTrainingGrid.Column("P1UnscheduledRequests", "P1 Unscheduled Requests", style: "P1UnscheduledRequests"),

                additionalTrainingGrid.Column("P2ScheduledRequests", "P2 Scheduled Requests", style: "P2ScheduledRequests"),
                additionalTrainingGrid.Column("P2UnscheduledRequests", "P2 Unscheduled Requests", style: "P2UnscheduledRequests"),

                additionalTrainingGrid.Column("P3ScheduledRequests", "P3 Scheduled Requests", style: "P3ScheduledRequests"),
                additionalTrainingGrid.Column("P3UnscheduledRequests", "P3 Unscheduled Requests", style: "P3UnscheduledRequests")
            )
        );
    }

使用纯 HTML 创建所需的标头并使用 HtmlAgilityPack 从 WebGrid 中提取所有元素：

<table>
    <thead>
        <tr>
            <th colspan="1" rowspan="2" class="MasterPlanName">Master Plan Name</th>
            <th colspan="2">Plan 1</th>
            <th colspan="2">Plan 2</th>
            <th colspan="2">Plan 3</th>
        </tr>
        <tr class="sub-header">
            <th class="ScheduledRequests plan1">Scheduled Requests</th>
            <th class="UnscheduledRequests plan1">Unscheduled Requests</th>

            <th class="ScheduledRequests plan2">Scheduled Requests</th>
            <th class="UnscheduledRequests plan2">Unscheduled Requests</th>

            <th class="ScheduledRequests plan3">Scheduled Requests</th>
            <th class="UnscheduledRequests plan3">Unscheduled Requests</th>
        </tr>
    </thead>
    <tbody>
        @{ 
            HtmlDocument additionalTrainingGridDOC = new HtmlDocument();
            additionalTrainingGridDOC.LoadHtml(additionalTrainingGridHTML.ToString());

            var AdditioanlTrs = additionalTrainingGridDOC.DocumentNode.SelectNodes("//tr");
            if (AdditioanlTrs != null)
            {   
                foreach (var item in AdditioanlTrs)
                {
                @Html.Raw(item.OuterHtml);
                }
            }
        }

    </tbody>
</table>​