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

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

您应该从您的视图中控制此实例中页面的布局，请原谅我的语法，因为我这些天主要使用 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>