Question

我有一个MVC网络应用，我在其中展示了一张桌子。我的某些行可能具有相似的ID，我需要在其中仅为所有这些行显示一个checkbox，为不具有匹配ID的行显示单个checkboxes。如下所示：

row1和row2具有相同的ID，因此checkbox位于它们之间（由红色checkbox表示）。 row3，row4有不同的ID，因此他们需要拥有自己的checkboxes（用绿色表示）。

我知道我需要在rowspan属性上玩，但我无法想象如何使用它。

Below is the sample code:

[Route("Search")]
[HttpGet]
public async Task<IActionResult> Search()
{
 //Some API call
 return View("Search", model);
}

查看代码：

<table id="tblsearch">
 @if (Model.HasRecords)
 {
 var counter = 0;
 <tbody>
  @foreach (var item in Model.SearchResults)
   {
   <tr>                           
      <td>
          <input type="checkbox" id="Dummy_@counter" name="chkSearch" data-id="@item.Id"/>
            <label for="Dummy_@counter"></label>
       </td>
       <td>@item.FullAddress</td>
       <td>@item.Price</td>
        <td>@item.OfficeName</td>
     }
      else
      {
       <tr><td>Data Not Found</td></tr>
       }
     </table>

我想首先隐藏所有checkboxes，然后尝试匹配每个row中的ID，然后如果2行的ID相同，我试图将rowspan增加2。

js code:

function pageLoad()
    {
        var rowCount = $('#tblSearch >tbody >tr').length;
        for(var i=0;i<rowCount-1;i++)
        {
            $('#Dummy_' + i).hide();
        }
        var searchArray= [];
        for (var i = 0; i < rowCount - 1; i++) {
            searchArray[i]= $('#tblSearch >tbody >tr')[i].attr('data-id');
        }        
    }

请指导如何继续。

Answer 1

您应该从View中控制此实例中页面的布局，请原谅我的语法，因为这些天我主要使用vbhtml。

重要的事情是订购搜索结果（如果他们还没有）记住并更新上次处理的ID。

<table id="tblsearch">
@if (Model.HasRecords)
{
var counter = 0;
var lastId = -1;
    <tbody>
    @foreach (var item in Model.SearchResults.OrderBy(x=>x.Id))
    {
        <tr>                   
            @if(lastId!= item.Id){
            <td rowspan="@(Model.SearchResults.Count(x=>x.Id == item.Id) > 0 ? Model.SearchResults.Count(x=>x.Id == item.Id) : 1 )">
              <input type="checkbox" id="Dummy_@counter" name="chkSearch" data-id="@item.Id"/>
                <label for="Dummy_@counter"></label>
            </td>
            }
            <td>@item.FullAddress</td>
            <td>@item.Price</td>
            <td>@item.OfficeName</td>
            @lastId = item.Id;
            //I assume there was code snipped here...
}
else
{
<tr><td>Data Not Found</td></tr>
}
 </table>

Answer 2

不需要任何javascript。您只需按Id属性对项目进行分组，并有条理地使用rowspan属性呈现复选框列，如果它是组中的第一项。

<tbody>
    @foreach (var group in Model.SearchResults.GroupBy(x => x.Id))
    {
        bool isFirstRow = true;
        foreach (var item in group)
        {
            <tr>
                @if (isFirstRow)
                {
                    <td rowspan="@group.Count()">
                        @Html.CheckBox("chkSearch")
                    </td>
                    isFirstRow = false;
                }
                <td>@item.FullAddress</td>
                <td>@item.Price</td>
                <td>@item.OfficeName</td> 
            </tr>
        }
    }
</tbody>

在两行jquery MVC之间放置一个复选框

2 个答案: