عرض على GitHub

Bootstrap Table Reorder Rows

امتداد Reorder Rows للجدول في Bootstrap Table.

في هذه الصفحة

الاعتماد: tablednd v0.9

إذا كنت تريد، يمكنك تضمين ملف bootstrap-table-reorder-rows.css لاستخدام dragClass الافتراضي.

الاستخدام

<link rel="stylesheet" href="extensions/reorder-rows/bootstrap-table-reorder-rows.css">
<script src=".../jquery.tablednd.js"></script>
<script src="extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

المثال

Reorder Rows

الخيارات

reorderableRows

  • attribute: data-reorderable-rows

  • type: Boolean

  • Detail:

    قم بتعيين true للسماح بميزة إعادة الترتيب.

  • Default: false

onAllowDrop

  • attribute: data-on-allow-drop

  • type: function

  • Detail:

    أمر بتمرير دالة ستنادى إليها عند مرور صف فوق صف آخر. إذا كانت الدالة ترجع true، فتحقق من السماح بإسقاطه على ذلك الصف، وإلا فلا. تأخذ الدالة 4 معاملات:

    • بيانات الصف الذي تم سحبه
    • بيانات الصف الموجود تحت المؤشر
    • الصف الذي تم سحبه
    • الصف الموجود تحت المؤشر

    ترجع قيمة منطقية: true تسمح بالإسقاط، false لا تسمح به.

  • Default: null

onDragStop

  • attribute: data-on-drag-stop

  • type: function

  • Detail:

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

  • Default: null

onDragStyle

  • attribute: data-on-drag-style

  • type: String

  • Detail:

    هذا هو النمط الذي يتم تعيينه للصف أثناء السحب. هناك قيود على الأنماط التي يمكن ربطها بصف (مثل أنه لا يمكنك تعيين حدود جيدة يمكنك، لكنها لن تظهر).

  • Default: null

onDragClass

  • attribute: data-on-drag-class

  • type: String

  • Detail:

    تُضاف هذه الفئة لمدة السحب ثم تُزيل عند إسقاط الصف. إنها أكثر مرونة من استخدام onDragStyle لأنها يمكن أن تتوارث من قبل خلايا الصف والمحتوى الآخر.

  • Default: reorder-rows-on-drag-class

onDropStyle

  • attribute: data-on-drop-style

  • type: String

  • Detail:

    هذا هو النمط الذي يتم تعيينه للصف عند إسقاطه. كما هو الحال مع onDragStyle، هناك قيود على ما يمكنك القيام به. همچنین، هذا يحل محل النمط الأصلي، لذلك فكر مرة أخرى في استخدام onDragClass الذي يتم ببساطة إضافته ثم إزالته عند الإسقاط.

  • Default: null

onReorderRowsDrag

  • attribute: data-on-reorder-rows-drag

  • type: Function

  • Detail:

    أمر بتمرير دالة ستنادى إليها عندما يبدأ المستخدم في السحب. تأخذ الدالة 1 معامل: الصف الذي بدأ المستخدم في سحبه.

  • Default: empty function

onReorderRowsDrop

  • attribute: data-on-reorder-rows-drop

  • type: Function

  • Detail:

    أمر بتمرير دالة ستنادى إليها عند إسقاط الصف. تأخذ الدالة 1 معامل: الصف الذي تم إسقاطه.

  • Default: empty function

dragHandle

  • attribute: data-drag-handle

  • type: String

  • Detail:

    هذا هو عنصر المؤشر.

    ملاحظة: يتم استخدام هذا الخيار بشكل رئيسي للتكيف مع إضافة TableDnD. في حالة عدم وجود ظروف خاصة، يرجى عدم تعديل القيمة الافتراضية.

  • Default: >tbody>tr>td:not(.bs-checkbox)

useRowAttrFunc

  • attribute: data-use-row-attr-func

  • type: Boolean

  • Detail:

    يجب استخدام هذه الدالة إذا كان عناصر tr الخاصة بك لا تملك خاصية id. إذا لم تكن عناصر tr الخاصة بك تحمل خاصية id، فلن يُطلق هذا الإضافي حدث onDrop.

  • Default: false

Events

onReorderRow(reorder-row.bs.table)

يُطلق عند إسقاط الصف، ويستقبل ثلاث معاملات:

  • بيانات الجدول الجديدة
  • الصف الذي تم إسقاطه
  • الصف للموقع القديم