jquery UI 테이블과 trwidth로 정렬 가능

jquery UI 테이블과 trwidth로 정렬 가능

저는 jQuery UI sortable을 사용하여 테이블 그리드를 sortable로 만들고 있습니다.잘하는 것 입니다에 하지 않기 입니다.td,tr내용을 축소시킵니다.

예를 들어 드래그를 시작할 때 테이블 행이 500px이면 300px가 됩니다.그리드에 너비가 정의되어 있지 않기 때문에 그런 일이 일어나는 것 같습니다.를 위해 두 tds)fix그리고.liquid).

fix클래스가 만들어 냅니다.td및음과 .liquid더etd폭 100% 너비를 할당할 필요 없이 그리드 테이블에 대한 접근 방식입니다에 너비를 할 필요 에 대한 tds.

내 접근법으로 분류 가능한 작업을 만드는 방법을 알고 있습니까?

여기서 답을 찾았습니다.

원본에 너비를 추가하는 대신 행을 복제하기 위해 약간 수정했습니다.

  helper: function(e, tr)
  {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },

도움이 될 것 같습니다.

.ui-sortable-helper {
    display: table;
}

여기서 선택한 답은 정말 좋은 해결책이지만, 원래 JS fiddle(http://jsfiddle.net/bgrins/tzYbU/) 에서 볼 수 있는 심각한 버그가 하나 있습니다. 가장 긴 행을 끌어보세요(God Bless You, Mr. Rosewater). 그러면 나머지 셀 폭이 줄어듭니다.

즉, 드래그된 셀의 셀 너비를 고정하는 것만으로는 충분하지 않습니다. 테이블의 너비도 고정해야 합니다.

$(function () {
    $('td, th', '#sortFixed').each(function () {
        var cell = $(this);
        cell.width(cell.width());
    });

    $('#sortFixed tbody').sortable().disableSelection();
});

JS Fiddle: http://jsfiddle.net/rp4fV/3/

이렇게 하면 첫 번째 열을 끌면 테이블이 무너지는 문제가 해결되지만, 테이블의 내용을 변경하면 이제 셀 크기가 고정됩니다.

콘텐츠를 추가하거나 변경할 때 이 문제를 해결하려면 너비 설정을 지워야 합니다.

$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.css('width','');
});

그런 다음 내용을 추가한 다음 다시 너비를 수정합니다.

(특히 테이블의 경우) 드롭 플레이스홀더가 필요하기 때문에 이는 여전히 완전한 해결책이 아닙니다.이를 위해서는 플레이스홀더를 구축하는 기능을 시작 시 추가해야 합니다.

$('#sortFixed tbody').sortable({
    items: '> tr',
    forcePlaceholderSize: true,
    placeholder:'must-have-class',
    start: function (event, ui) {
        // Build a placeholder cell that spans all the cells in the row
        var cellCount = 0;
        $('td, th', ui.helper).each(function () {
            // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
            var colspan = 1;
            var colspanAttr = $(this).attr('colspan');
            if (colspanAttr > 1) {
                colspan = colspanAttr;
            }
            cellCount += colspan;
        });

        // Add the placeholder UI - note that this is the item's content, so TD rather than TR
        ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
    }
}).disableSelection();

JS Fiddle: http://jsfiddle.net/rp4fV/4/

행을 복제하는 것은 IE8에서는 잘 작동하지 않는 것처럼 보이지만 원래의 솔루션은 잘 작동합니다.

jsFiddle로 테스트했습니다.

테이블을 정렬할 준비가 되면 다음 코드를 호출하십시오. 이렇게 하면 td 요소가 테이블 구조를 깨지 않고 고정되어 있는지 확인할 수 있습니다.

 $(".tableToSort td").each(function () {
            $(this).css("width", $(this).width());
        });  

jsFiddle

여러 가지 시도 끝에 가장 큰 행을 끌면서 테이블이 줄어드는 것을 방지하기 위해 데이브 제임스 밀러의 솔루션을 완성하는 간단한 솔루션을 시도했습니다.도움이 되었으면 좋겠습니다 :)

// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
    let $originals = ui.helper.children();
    ui.placeholder.children().each(function (index) {
        $(this).width($originals.eq(index).width());
    });
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
    let $helper = tr.clone();
    let $originals = tr.children();
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).outerWidth(true));
    });
    return $helper;
};

.sortable({
    helper: function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    }
});

해결책도 찾아봤는데 드디어 나왔습니다.

당신의 스타일을 더해야 합니다.

.ui-sortable-helper {
  display: table;
}

그리고 분류 가능한 것을 선언할 때.

$('#sortable').sortable({
  helper: function (e, tr){
      var myHelper = [];
      myHelper.push(<tr style="width:' + $('#sortable').first('tr').width() + '">);
      myHelper.push($(tr).html());
      myHelper.push('</tr>');
      return myHelper.join('');
    }
});

따라서 td와 함께 문제없이 퍼센티지를 설정할 수 있습니다!

Keith의 해결책은 괜찮지만, Firefox에서 약간의 혼란을 일으켰고, colspan을 합산하지는 않았지만 그들을 누그러뜨렸습니다. (오래된 js string type의 무릎 통증)

이 줄을 바꿉니다.

 cellCount += colspan;

다음 항목 포함:

 cellCount += colspan-0;

문제를 해결합니다.(js가 변수를 문자열이 아닌 숫자로 처리하도록 강요받음)

Dave James Miller의 답변은 제게 효과가 있었지만, 제 페이지의 컨테이너 디브의 레이아웃 때문에 마우스 커서로 드래그하는 도우미가 제 마우스 위치에서 오프셋됩니다.이를 해결하기 위해 헬퍼 콜백에 다음을 추가했습니다.

$(document.body).append($helper);

다음은 위 행이 추가된 전체 콜백입니다.

helper: function (e, tr) {
  var $originals = tr.children();
  var $helper = tr.clone();
  $helper.children().each(function (index) {
    // Set helper cell sizes to match the original sizes
    $(this).width($originals.eq(index).width());
  });

  // append it to the body to avoid offset dragging
  $(document.body).append($helper);

  return $helper;
}

데이브의 답변에 댓글로 덧붙였을 텐데, 이 계정에 대한 담당자가 부족했습니다.

뭔가.disableSelection()- 방법이 나쁘고 요즘은 더 이상 사용되지 않습니다.정렬 가능한 행 안에서 텍스트 입력을 더 이상 사용할 수 없습니다.Mozilla Firefox 35.0. 더 이상 초점을 맞출 수가 없습니다.

$(function() {
    $( "#sort tbody" ).sortable({
        update: function () {
                                var order = $(this).sortable("toArray").join();
                                $.cookie("sortableOrder", order);
                        }
    });
    if($.cookie("sortableOrder")){
        var order = $.cookie("sortableOrder").split(",");
        reorder(order, $("#sort tbody"));
    }
    function reorder(aryOrder, element){
      $.each(aryOrder, function(key, val){
              element.append($("#"+val));
      });
    }
  });

jquery-ui의 API에 설명된 대로 테이블의 tbody 요소에 sortable을 적용하고 도우미를 'clone'으로 설정하기만 하면 됩니다.

$("$my-table-tbody").sortable({
    helper: "clone"
});

언급URL : https://stackoverflow.com/questions/1307705/jquery-ui-sortable-with-table-and-tr-width