7

質問: 親行を並べ替えているときに、子行を親と一緒に移動したいです。この js を使用して、テーブル データを並べ替えています。私のhtmlは

<table>
    <tr class="parent">
        <th id="apple">Apple</th>
        <th id="orange">Orange</th>
        <th>Banana</th>
    </tr>
    <tr class="parent">
        <td>Apple</td>
        <td>Orange</td>
        <td>Banana</td>
    </tr>
    <tr class="child">
        <td>Apple 1</td>
        <td>Orange 1</td>
        <td>Banana 1</td>
    </tr>
    <tr class="child">
        <td>Apple 2</td>
        <td>Orange 2</td>
        <td>Banana 2</td>
    </tr>
    <tr class="parent">
        <td>Table</td>
        <td>cHAIR</td>
        <td>Mouse</td>
    </tr>
    <tr class="child">
        <td>Table 1</td>
        <td>cHAIR 1</td>
        <td>Mouse 1</td>
    </tr>
    <tr class="child">
        <td>Table 2</td>
        <td>cHAIR 2</td>
        <td>Mouse 2</td>
    </tr>
</table>  

js は次のようになります。

jQuery.fn.sortElements = (function(){

        var sort = [].sort;

        return function(comparator, getSortable) {

            getSortable = getSortable || function(){return this;};

            var placements = this.map(function(){

                var sortElement = getSortable.call(this),
                    parentNode = sortElement.parentNode,

                    // Since the element itself will change position, we have
                    // to have some way of storing its original position in
                    // the DOM. The easiest way is to have a 'flag' node:
                    nextSibling = parentNode.insertBefore(
                        document.createTextNode(''),
                        sortElement.nextSibling
                    );

                return function() {

                    if (parentNode === this) {
                        throw new Error(
                            "You can't sort elements if any one is a descendant of another."
                        );
                    }

                    // Insert before flag:
                    parentNode.insertBefore(this, nextSibling);
                    // Remove flag:
                    parentNode.removeChild(nextSibling);

                };

            });

            return sort.call(this, comparator).each(function(i){
                placements[i].call(getSortable.call(this));
            });

        };

    })();

別の JS を追加する:

$('#apple, #orange')
      .each(function(){
          var th = $(this),
              thIndex = th.index(),
              inverse = false;

          th.click(function() {

              // sorting classes don't work here b/c this function gets called repeatedly - moved to afterRequest: function

              table.find('tr.parent td').filter(function(){

                  return $(this).index() === thIndex;

              }).sortElements(function(a, b){
                      return $.text([a]) > $.text([b]) ?
                          inverse ? -1 : 1
                          : inverse ? 1 : -1;

                  }, function(){
                      // parentNode is the element we want to move

                      return this.parentNode;

                    //  this.parentNode
                  });
              inverse = !inverse;


          });

      });
4

3 に答える 3

3

すでに jQuery を構築しているので、 DataTables jQuery プラグインを調べることをお勧めします。これらのプラグインは、この種の作業の多くを既に行っているからです。構成を行うだけです。

于 2013-09-23T07:53:48.963 に答える
3

あなたの質問を正しく理解しているかどうかわかりません。

これを使用して、子である次の行をすべて選択できます。

$(".parent").nextUntil($("tr").not(".child"))

.addBack() を追加して、セレクターに親を含めることもできます。

$(".parent").nextUntil($("tr").not(".child")).addBack()
于 2013-09-20T13:25:03.137 に答える