0

私はテーブルを持っています（グリッドの動作をシミュレートしています）：

<table class="searchResult" border="1" width="100%">
<thead>
    <tr>
        <th></th>
        <th>Last Name</th>
        <th>Middle Name</th>
        <th>First Name"</th>
    </tr>
</thead>
<tbody>@foreach (var per in @Model) {
    <tr class="parent">
        <td>+</td>
        <td>@per.LastName</td>
        <td>@per.MiddleName</td>
        <td>@per.FirstName</td>
    </tr>
    <tr class="child">
        <td colspan="11">
            <table width="100%">
                <tr>
                    <td>
                        Home Address: @per.HomeAddress
                    </td>
                    <td>
                         Race : @per.Race
                    </td>
                </tr>
            </table>
        </td>`
    </tr>}
</tbody>

class="parent" の行の "+" は、class="child" の行を展開します (展開/折りたたみ)

展開と折りたたみのための jquery:

$(document).ready(function () {
    $('table.searchResult').each(function () {
        var $table = $(this);
        $table.find('tr.child').hide();
        $table.find('.parent').click(function () {
            var sign = $.trim($(this).find('td:first').text());
            $(this).nextUntil('.parent').toggle();
            if (sign == '+')
                $(this).find('td:first').text('-');
            else
                $(this).find('td:first').text('+');
        });
    });
});

私の質問は

  1. class="parent" の行に代替行スタイルを適用するにはどうすればよいですか?
  2. まったく同じ名前、ミドル ネーム、および姓を持つ複数のレコードがある場合、行は緑色で強調表示されます (モデルは、LastName ThenBy MiddleName、FirstName の順に並べられます)。

私はjqueryとmvcが初めてで、正確には10です。私は本当にあなたの助けに感謝します.

4

2 に答える 2

1

最初のリクエスト CSSでは、クラスを含む行が正確に表示されないnth-child(even)か、表示される順序ではないため、正確に機能しない可能性がありますが、これらは jQuery セレクターを使用して簡単にターゲットにすることができます。nth-child(odd)parentevensodd

$(".parent:even").each(function()
{
    $(this).css("background-color","#CCC");
});

2 番目のリクエストでは、これを試してください。

var cats = [];
$('.child').each(function() {
    var text = $(this).text();
    if ($.inArray(text, cats) === -1) {
        cats.push(text);
    } else {
        $(this).css("background-color","green");
    }
});

これは、行のコンテンツ全体がすでに存在していることを前提としています。希望どおりに機能しない可能性があるため、ニーズに合わせて少し調整する必要がある場合があります。

jsFiddle : http://jsfiddle.net/atngN/

于 2013-03-29T20:57:39.543 に答える
0

パート1）

$(function() {
    var index = 1;
    $("tr.parent").each(function() {
        $(this).siblings().each(function() {
           if ($(this).hasClass("parent")) {
             return false; // stop execution
          }
          else if ((++index % 4) == 1) {
              $(this).toggleClass("highlighted");
          }
       });
    });
});

パート2）

@{
    var namesWithIndex = Model.Select(pers => pers.FirstName + pers.MiddleName + pers.LastName);
    var duplicateRows = Model.Where(pers => namesWithIndex.Count(name => pers .FirstName + pers .MiddleName + pers.LastName == name) > 1);
}

次に、現在の人物がその duplicateRows リストに含まれているかどうかを確認し、背景色を緑色で強調表示する別の css クラスを与えます。

 <tbody>@foreach (var per in @Model) {
 <tr class="parent @(duplicateRows.Contains(per)?"highlightGreen":string.Empty)  " >
于 2013-03-29T20:44:55.560 に答える