小兔网

jQuery EasyUI 扩展 jQuery EasyUI 扩展2021071307085719913381

用法

包含 'images/2021/07/13/07/2021071307085719915282.js' 文件

<script type="text/javascript" src="/images/2021/07/13/07/2021071307085719915282.js"></script>

启用拖拽与放置

    <table title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px"            data-options="                data: data,                rownumbers: true,                idField: 'id',                treeField: 'name',                onLoadSuccess: function(row){                    $(this).treegrid('enableDnd', row?row.id:null);                }            ">        <thead>            <tr>                <th data-options="field:'name'" width="220">Name</th>                <th data-options="field:'size'" width="150" align="right">Size</th>                <th data-options="field:'date'" width="200">Modified Date</th>            </tr>        </thead>    </table>

事件

该事件扩展自树形网格(treegrid),下面是为树形网格(treegrid)添加的事件。

名称参数描述
onBeforeDragrow当一行的拖拽开始前触发,返回 false 则取消拖拽。
onStartDragrow当开始拖拽一行时触发。
onStopDragrow当停止拖拽一行后触发。
onDragEntertargetRow, sourceRow当拖拽一行进入某允许放置的目标行时触发,返回 false 则取消放置。
onDragOvertargetRow, sourceRow当拖拽一行在某允许放置的目标行上时触发,返回 false 则取消放置。
onDragLeavetargetRow, sourceRow当拖拽一行离开某允许放置的目标行时触发。
onBeforeDroptargetRow,sourceRow,point当一行被放置前触发,返回 false 则取消放置。
targetRow:放置的目标行。
sourceRow:拖拽的源行。
point:指示放置的位置,可能的值:'append'、'top' 或 'bottom'。
onDroptargetRow,sourceRow,point当一行被放置时触发。
targetRow:放置的目标行。
sourceRow:拖拽的源行。
point:指示放置的位置,可能的值:'append'、'top' 或 'bottom'。

方法

该方法扩展自树形网格(treegrid)。

名称参数描述
enableDndid启用行的拖拽与放置。
'id' 参数指示要被拖拽与放置的行。
如果该参数未指定,则拖拽与放置所有行。

下载 jQuery EasyUI 实例

jquery-easyui-treegrid-dnd.zip

jQuery EasyUI 扩展 jQuery EasyUI 扩展