2014-11-14 106 views
0

我是新来的jQuery,但我想我在这里。我必须通过一些左外连接来显示来自SQL View的数据。因此,我想将第一个表行的类设置为具有特定的PK_DemographicsID作为.master,其余的行具有与.detail相同的PK_DemographicsID。显然,我试图隐藏第一行下每个PK_DemographicsID的额外行。从jQuery数组向表行添加类

我被困在if-else的地方,我试图设置类。任何帮助,将不胜感激。谢谢。

{ ............... 
<tbody id="SearchTableBody"> 
    @foreach (var item in Model.DemographicsAllList) 
    { 
    <tr data-id={"pkid":"@item.PK_DemographicsID"}>.....</tr> 
    } 
</tbody> 
} 
<script type="text/javascript"> 
    $(function() { 
     var rows_array = []; 
     $('#SearchTableBody tr').each(function (i) { 
      rows_array[i] = $(this); 
     }); 
     var cpkid = 0; 
     var opkid = 0; 
     if (rows_array != undefined || rows_array != null) { 
      var rowslen = rows_array.length; 
      for (var i = -1, n = rowslen; ++i < n;) { 
       var row = rows_array[i]; 
       cpkid = $(row).data('id').pkid; 
       if (cpkid != opkid) { 
        // set table row class to .master 
       } 
       else { 
        // set table row class to .detail 
       } 
       opkid = cpkid; 
      }; 
     }; 
    }); 
    $('.detail').hide(); 
    $("#SearchTableBody tr.master").click(function() { 
     $(this).next("tr").toggle(); 
     $(this).find('span').text(function (_, value) { 
      return value == '-' ? '+' : '-' 
     }); 
    }); 
</script> 
+0

那么,你应该提供例如渲染HTML(什么浏览器“看到”),而不是服务器端代码。没有HTML,很难说什么。但是'data-id'可能是String(它应该是什么),并且你试图把它当作一些Object来对待。 – Regent 2014-11-14 20:04:35

回答

0

可能是你可以试试这个

row.addClass("master"); 
row.addClass("detail"); 

希望这是一些帮助 快乐学习:)

+1

这取决于什么是真正需要的:_add class_或_set class_。也许lv2rftak会友善地启发我们。 – Regent 2014-11-14 20:16:30

+0

表格呈现时,我不使用类属性。然而,我确实包含了一个数据属性。所以,要么应该没问题。 – lv2rftak 2014-11-14 20:31:37

+0

顺便说一句,这没有奏效。 – lv2rftak 2014-11-14 20:33:01

0

好了,这里就是我终于发现。我需要用一个类“种子”表格行。在这种情况下,我只是使用class =“t”。它做我需要做的事情,这是用重复的主键隐藏行。数据来自Lucene索引,该索引使用带有多个左外连接的SQL View创建。因此,冗余数据是不可避免的,但现在它隐藏在组中的第一行。

这里的视图代码:

{ ............... 
<tbody id="SearchTableBody"> 
    @foreach (var item in Model.DemographicsAllList) 
    { 
    <tr class="t" data-id={"pkid":"@item.PK_DemographicsID"}>.....</tr> 
    } 
</tbody> 
} 


    <script type="text/javascript"> 
     $(function() { 
      var rows_array = []; 
      $('#SearchTableBody tr').each(function (i) { 
       rows_array[i] = $(this); 

      }); 
      var cpkid = 0; 
      var opkid = 0; 
      if (rows_array != undefined || rows_array != null) { 
       var rowslen = rows_array.length; 
       for (var i = -1, n = rowslen; ++i < n;) { 
        var row = rows_array[i]; 
        cpkid = $(row).data('id').pkid; 
        if (cpkid != opkid) { 
         row.removeClass('t'); 
         row.addClass('master'); 
         var pkCount = count(rows_array, cpkid); 
         if (pkCount > 1) { 
          row.find('span').text(function (_, value) { 
           return value == '+' ? '+' : '-' 
          }); 
         } 
         else { 
          row.find('span').text(function (_, value) { 
           return value == '+' ? '-' : '+' 
          }); 
         }; 
        } 
        else { 
         row.removeClass('t'); 
         row.addClass('detail').find('span').text(function (_, value) { 
          return value == '-' ? '+' : '-' 
         }); 
        } 
        opkid = cpkid; 
        //alert(cpkid + ' | ' + opkid); 
       }; 
      }; 
      function count(array, value) { 
       var counter = 0; 
       for (var i = 0; i < array.length; i++) { 
        if (array[i].data('id').pkid === value) counter++; 
       } 
       return counter; 
      }; 

      $('.detail').hide(); 
      $('#SearchTableBody tr.master').click(function() { 
       $(this).nextUntil('tr.master').toggle(); 
      }); 
     }); 
</script>