HTML 드래그 앤 드롭 정렬 가능한 테이블

Question

를 HTML 드래그 앤 드롭 정렬 가능한 테이블에는 수준이 모두 행과 열?나는 그것이 뭔가가 나를 위해 죽.의 많은 정렬을 나열 돌아가지만 찾기 정렬 가능한 테이블 보인다는 것은 불가능한 것을 찾을 수 있습니다.

나에서 얻을 수 있다는 사실을 알고 아주 가까이는 도구는 스크립트입니다.aculo.우리가 제공 하지만 내가 달렸으로 일부 크로스 브라우저 문제를 그들과 함께.

Answer 1

사 dhtmlxGrid 니다.다른 것들 사이에 그것을 지원하는 드래그-앤-드롭 행/열,클라이언트쪽 정렬(string,정수,날짜,사용자 정의)및 멀티브라우저 지원합니다.

응답을 논평:아니요,아무것도 발견하지 않았 더-이동에서는 프로젝트입니다.:-)

Answer 2

나는 사용 jQuery UI 의 정렬 가능한 플러그인으로 좋은 결과를 얻을 수 있습니다.태그와 비슷하다:

<table id="myTable">
<thead>
<tr><th>ID</th><th>Name</th><th>Details</th></tr>
</thead>
<tbody class="sort">
<tr id="1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="4"><td>4</td><td>Name1</td><td>Details4</td></tr>
</tbody>
</table>

다음에서 javascript

$('.sort').sortable({
    cursor: 'move',
    axis:   'y',
    update: function(e, ui) {
        href = '/myReorderFunctionURL/';
        $(this).sortable("refresh");
        sorted = $(this).sortable("serialize", 'id');
        $.ajax({
            type:   'POST',
            url:    href,
            data:   sorted,
            success: function(msg) {
                //do something with the sorted data
            }
        });
    }
});

이 게시물을 직렬화된 버전의 항목'Id URL 주어집니다.이 함수는(PHP 내 경우에는)그 후 업데이트 항목의 주문에 데이터베이스입니다.

Answer 3

내가 추천 Sortables 에 jQuery.당신은 그것을 사용할 수 있는 목록 항목에서는 거의 아무것도 포함하여 테이블이 있습니다.

jQuery 은 매우 크로스 브라우저 친절하고 좋습니다.

Answer 4

데이비드 Heggie 의 대답이었다 가장 유용하다.그것은 약간 더 간결하고:

var sort = function(event, ui) {
  var url = "/myReorderFunctionURL/" + $(this).sortable('serialize');
  $.post(url, null,null,"script");  // sortable("refresh") is automatic
}

$(".sort").sortable({
  cursor: 'move',
  axis: 'y',
  stop: sort
});

이를위한 완벽한 응용 프로그램과 동일한 마크업이 있습니다.

Answer 5

대부분의 프레임워크(Yui,mootools 의,jQuery,프로토타입/Scriptaculous,etc.) 가 목록을 정렬 기능이 있습니다.력 각각 하나를 선택하는 귀하의 요구에 맞니다.

Answer 6

지 않는 경우에 마음 Java,거기에 아주 편리한 라이브러리 GWT 라 GWT-DND 을 확인 온라인 데모를 보는 방법을 강력한다.

Answer 7

는 방법에 대 sorttable?는 것을 요구 사항에 적합니다.

그것은 오히려 사용하기 쉬운로드 sorttable 자바 스크립트 파일,다음,각각에 대해 테이블을 만들고 싶어 정렬,적 class="정렬은" <table> 태그입니다.

그것은 바로 이해하는 방법을 정렬의 대부분의 유형 데이터,하지만 무언가가있는 경우에 그것은,당신을 추가할 수 있는 사용자 정의 종류 열쇠는 방법을 알려줍니다.이 문서는 모든 설명합니다.

Answer 8

당신이 찾을 수 있습니다.직렬화()는 null 을 반환에 다윗 Heggie 의 솔루션을 설정한 다음에 대한 id 값 TRs 로'id_1'대신에의 단순히'1'

예제:

<tr id="id_1"><td>1</td><td>Name1</td><td>Details1</td></tr>
<tr id="id_2"><td>2</td><td>Name1</td><td>Details2</td></tr>
<tr id="id_3"><td>3</td><td>Name1</td><td>Details3</td></tr>
<tr id="id_4"><td>4</td><td>Name1</td><td>Details4</td></tr>

위 직렬화로"id[]=1&id[]=2&id[]=3"

당신이 사용할 수 있는'=','-'또는'_'대신에'_'.와 다른 단어 외"id".

Answer 9

내가 사용하 JQuery 정렬이 그렇게 하지만 경우에,당신은 당신을 사용하는 Vue.js 나처럼 여기를 생성하는 솔루션 사용자 지정 Vue 지시어를 캡슐화 정렬 기능을 내가 알고 있 Vue 드래그 하지만 그것은 종류 표 열에 의한 문제 기 이 방법이 작동되는지 확인하기 위해, 이

JS 코드

Vue.directive("draggable", {
  //adapted from https://codepen.io/kminek/pen/pEdmoo
  inserted: function(el, binding, a) {
    Sortable.create(el, {
      draggable: ".draggable",
      onEnd: function(e) {
        /* vnode.context is the context vue instance: "This is not documented as it's not encouraged to manipulate the vm from directives in Vue 2.0 - instead, directives should be used for low-level DOM manipulation, and higher-level stuff should be solved with components instead. But you can do this if some usecase needs this. */
        // fixme: can this be reworked to use a component?
        // https://github.com/vuejs/vue/issues/4065
        // https://forum.vuejs.org/t/how-can-i-access-the-vm-from-a-custom-directive-in-2-0/2548/3
        // https://github.com/vuejs/vue/issues/2873 "directive interface change"
        // `binding.expression` should be the name of your array from vm.data
        // set the expression like v-draggable="items"

        var clonedItems = a.context[binding.expression].filter(function(item) {
          return item;
        });
        clonedItems.splice(e.newIndex, 0, clonedItems.splice(e.oldIndex, 1)[0]);
        a.context[binding.expression] = [];
        Vue.nextTick(function() {
          a.context[binding.expression] = clonedItems;
        });

      }
    });
  }
});

const cols = [
  {name: "One", id: "one", canMove: false},
  {name: "Two", id: "two", canMove: true},
  {name: "Three", id: "three", canMove: true},
  {name: "Four", id: "four", canMove: true},
]

const rows = [
  {one: "Hi there", two: "I am so excited to test", three: "this column that actually drags and replaces", four: "another column in its place only if both can move"},
  {one: "Hi", two: "I", three: "am", four: "two"},
  {one: "Hi", two: "I", three: "am", four: "three"},
  {one: "Hi", two: "I", three: "am", four: "four"},
  {one: "Hi", two: "I", three: "am", four: "five"},
  {one: "Hi", two: "I", three: "am", four: "six"},
  {one: "Hi", two: "I", three: "am", four: "seven"}
]

Vue.component("datatable", {
  template: "#datatable",
  data() {
    return {
      cols: cols,
      rows: rows
    }
  }
})

new Vue({
  el: "#app"
})

CSS

.draggable {
  cursor: move;
}

table.table tbody td {
  white-space: nowrap;
}

퍼 템플릿 HTML

#app
  datatable

script(type="text/x-template" id="datatable")
  table.table
    thead(v-draggable="cols")
      template(v-for="c in cols")
        th(:class="{draggable: c.canMove}")
          b-dropdown#ddown1.m-md-2(:text='c.name')
            b-dropdown-item First Action
            b-dropdown-item Second Action
            b-dropdown-item Third Action
            b-dropdown-divider
            b-dropdown-item Something else here...
            b-dropdown-item(disabled='') Disabled action

    tbody
      template(v-for="row in rows")
        tr
          template(v-for="(col, index) in cols")
            td {{row[col.id]}}