1

Excel マクロを jquery コードに変換する必要があります。関数は、プラス記号をクリックして展開し、サブ行を表示して、column2 に値を入力する場合は column2 を変更する必要があることです。他の列はできます。変更することはできません。親行に属する多くのサブ行があるため、親行を展開するまで列 2 の値を直接変更することはできません。Name、Model、Code の値は既存のものであり、マスター データであるため、入力または変更する必要はありません。

スナップショットをご覧ください:

ここに画像の説明を入力

ここに画像の説明を入力

サブ行の値を変更するだけでなく、変更されたサブ行とそれらの行の値を知る必要があります。最初は、編集可能な列は空白です。マイナス記号をクリックすると、サブ行を再度折りたたむことができますが、変更された値は失われず、再度展開してもそこに残ります。最後の要件は、クロス デバイスであることです。コードは、PC、携帯電話、パッドで適切に実行される必要があります。それは可能ですか？

どうもありがとう。

4

1 に答える 1

0

これを行うのにプラグインは必要ありません。これは通常、数行の単純なコードを使用して行われます。

デモ: http://jsfiddle.net/FHWaw/2/

このデモンストレーションでは、行とセルに「セクション」(開いたり閉じたりできるもの) を識別する属性を指定します。

<table>
<tr><td section-opener=mysection1 section-state=open> SOME HEADER </td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr section-content=mysection1><td>some AAA</td><td>some zaaother text</td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr><td section-opener=anothersection section-state=close> Hu ? </td></tr>
<tr section-content=anothersection><td>some text</td><td>some other text</td></tr>
<tr section-content=anothersection><td>some text</td><td>some other text</td></tr>
</table>
​

(このサンプルでは、​​最初に最初のセクションが開いていて、2 番目のセクションが開いています)

次に、クリックすると、行のクラスを変更して、表示するかどうかを決定するこれがあります。

$('body').on('click', 'td[section-opener]', function() {
    changeState($(this).attr('section-opener'));
});

changeState = function(sectionId, newstate) {
    var $opener = $('td[section-opener="'+sectionId+'"]');
    var oldstate = $opener.attr('section-state');
    if (oldstate==newstate) return newstate;
    newstate = oldstate=='open' ? 'close' : 'open'; // sanitization
    $opener.attr('section-state', newstate);
    $('tr[section-content="'+sectionId+'"]').attr('section-state', newstate);
    return newstate;
};​

そして、私は主に閉じたセクションを非表示にするCSSを持っています（そしてオープナーを明確に識別できるようにします）：

td[section-opener] {
    font-weight: bold;
    cursor: pointer;
}
td[section-opener][section-state="close"]:before {
    color: #ccc;
    content: " \25B6  ";
}
td[section-opener][section-state="close"]:hover:before{
    color: #aaa;
    content: " \25B6  ";
}
td[section-opener][section-state="open"]:before {
    content: "\25BC  ";
}
tr[section-content][section-state="close"] {
    display: none;
}
tr[section-content][section-state="open"] {
    display: table-row;
}

何も削除されないため、閉じてから再度開いても、編集した入力が失われることはありません。

于 2012-09-03T15:12:37.260 に答える