HTML سحب وإسقاط الجداول القابلة للفرز

Question

هل أردت يومًا أن يكون لديك جدول قابل للفرز بالسحب والإفلات بتنسيق HTML يمكنك من خلاله فرز الصفوف والأعمدة؟أعلم أنه شيء سأموت من أجله.هناك الكثير من القوائم القابلة للفرز ولكن يبدو من المستحيل العثور على جدول قابل للفرز.

أعلم أنه يمكنك الاقتراب كثيرًا من الأدوات التي يوفرها script.aculo.us ولكني واجهت بعض المشكلات عبر المتصفحات معهم.

Answer 1

لقد استخدمت dhtmlxGrid في الماضي.من بين أمور أخرى، فهو يدعم سحب وإسقاط الصفوف/الأعمدة، والفرز من جانب العميل (السلسلة، والعدد الصحيح، والتاريخ، والمخصص) ودعم المتصفحات المتعددة.

الرد على التعليق:لا، لم أجد أي شيء أفضل - لقد انتقلت للتو من هذا المشروع.:-)

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>

ثم في جافا سكريبت

$('.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
            }
        });
    }
});

يؤدي هذا إلى نشر نسخة متسلسلة من معرفات العناصر إلى عنوان URL المحدد.تقوم هذه الوظيفة (PHP في حالتي) بتحديث ترتيب العناصر في قاعدة البيانات.

Answer 3

أوصي قابلة للفرز في مسج.يمكنك استخدامه على عناصر القائمة أو أي شيء تقريبًا، بما في ذلك الجداول.

jQuery سهل الاستخدام للغاية عبر المتصفحات وأنا أوصي به طوال الوقت.

Answer 4

كانت إجابة ديفيد هيجي هي الأكثر فائدة بالنسبة لي.يمكن أن يكون أكثر إيجازا قليلا:

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، وPrototype/Scriptaculous، وما إلى ذلك) بوظيفة قائمة قابلة للفرز.قم بإجراء القليل من البحث في كل منها واختر ما يناسب احتياجاتك أكثر.

Answer 6

إذا كنت لا تمانع في استخدام Java، فهناك مكتبة مفيدة جدًا لـ GWT تسمى GWT-DND تحقق من العرض التوضيحي عبر الإنترنت لمعرفة مدى قوته.

Answer 7

ماذا عن قابل للفرز؟يبدو أن هذا يناسب متطلباتك بشكل جيد.

إنه سهل الاستخدام إلى حد ما - قم بتحميل ملف Javascript القابل للفرز، ثم لكل جدول تريد جعله قابلاً للفرز، قم بتطبيق class = "sortable" على علامة <table>.

سوف يفهم على الفور كيفية فرز معظم أنواع البيانات، ولكن إذا كان هناك شيء غير موجود، فيمكنك إضافة مفتاح فرز مخصص لإخباره بكيفية الفرز.الوثائق تشرح كل شيء بشكل جيد.

Answer 8

إذا وجدت .serialize() يُرجع قيمة فارغة في حل David Heggie، فقم بتعيين قيم المعرفات لـ 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"

يمكنك استخدام '=' أو '-' أو '_' بدلاً من '_'.وأي كلمة أخرى غير "الهوية".

Answer 9

أنا أستخدم JQuery Sortable للقيام بذلك ولكن في حالة أنك تستخدم Vue.js مثلي، فإليك الحل الذي ينشئ توجيه Vue مخصصًا لتغليف الوظيفة القابلة للفرز، وأنا على علم بـ Vue القابل للسحب ولكنه لا يقوم بفرز أعمدة الجدول كما هو موضح في الصورة. لكل هذه القضية هنا لرؤية هذا في العمل، افحص هذا

كود شبيبة

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]}}