Расширение jQuery EasyUI -Перетаскивание строк DataGrid (Перетаскивание строк в DataGrid)

jQuery EasyUI 扩展Расширение jQuery EasyUI

Использование

Подключите файл 'datagrid-dnd.js'

<script type="text/javascript" src="datagrid-dnd.js.html"></script>

Включите перетаскивание

    <table class="easyui-datagrid" title="DataGrid" style="width:700px;height:250px" data-options="
                singleSelect:true,
                data:data,
                onLoadSuccess:function(){
                    $(this).datagrid('enableDnd');
                }
            ">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:100">Product</th>
                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:250">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>

Events

Эти события расширяют datagrid. Ниже перечислены события, добавленные для datagrid.

Name Parameters Описание
onBeforeDrag row Срабатывает перед началом перетаскивания строки; верните false, чтобы отменить перетаскивание.
onStartDrag row Срабатывает при начале перетаскивания строки.
onStopDrag row Срабатывает после остановки перетаскивания строки.
onDragEnter targetRow, sourceRow Срабатывает, когда перетаскиваемая строка входит в допустимую целевую строку; верните false, чтобы отменить сброс.
onDragOver targetRow, sourceRow Срабатывает, когда перетаскиваемая строка находится над допустимой целевой строкой; верните false, чтобы отменить сброс.
onDragLeave targetRow, sourceRow Срабатывает, когда перетаскиваемая строка покидает допустимую целевую строку.
onBeforeDrop targetRow,sourceRow,point Срабатывает перед сбросом строки; верните false, чтобы отменить сброс.
targetRow: целевая строка для сброса.
sourceRow: исходная строка, которую перетаскивают.
point: указывает позицию сброса. Возможные значения: 'top' или 'bottom'.
onDrop targetRow,sourceRow,point Срабатывает при сбросе строки.
targetRow: целевая строка для сброса.
sourceRow: исходная строка, которую перетаскивают.
point: указывает позицию сброса. Возможные значения: 'top' или 'bottom'.

Методы

Этот метод наследуется от datagrid.

Name Parameters Описание
enableDnd index Включить перетаскивание строк.
Параметр 'index' указывает строку для перетаскивания и сброса.
Если этот параметр не указан, перетаскивание применяется ко всем строкам.

Пример кода:

$('#dg').datagrid('enableDnd', 1);    // enable dragging on second row
$('#dg').datagrid('enableDnd');    // enable dragging all rows

Скачать примеры jQuery EasyUI

jquery-easyui-datagrid-dnd.zip

jQuery EasyUI 扩展Расширение jQuery EasyUI Другие расширения