2014-11-14 73 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>