EasyUi之Datagrid行拖放冲突处理

Quenstion:

项目中某功能界面使用easyui的datagrid,grid有多个可编辑的元素:combogrid,textbox,numberbox等等(要多个,测试的时候发现一两个可编辑元素好像不会触发)

前期能够正常使用,后面客户提出需求希望datagrid的行能够拖拽排序操作。

datagrid行实现拖拽

1.使用easyui的扩展 ,引入js文件

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

2.开启拖拽

$('#dg').datagrid('enableDnd', 1);    // enable dragging on second row,第二个参数为索引
$('#dg').datagrid('enableDnd');    // enable dragging all rows

一段时间后发现,以下两个问题

1.combogrid下拉选中值后,没有填充到单元格,第二次选中后才会填充

2.combogrid选中值填充单元格后,光标不点击其他地方的条件下再次点击单元格发现不能编辑;

Answer:

可能是由于这个扩展和所写的方法产生了冲突

手动添加switchbutton,需要拖拽的时候开启,填写数据的时候停用拖拽

<input class="easyui-switchbutton" data-options="100,onText:'启用行拖拽',offText:'停用行拖拽'" id="isDrag" />
 $("#isDragRow").switchbutton({
                    onChange: function (checked) {
                        if (checked) {
                            $("#DialogCheckDetail").datagrid('enableDnd').datagrid({
                                onBeforeDrag: function (row) {
                                    return true;
} }) } else { $("#DialogCheckDetail").datagrid({
onBeforeDrag: function (row){ return false; //拖拽开始前触发,返回 false 则取消拖拽。 } }) } } })

  

//返回false不触发拖拽
原文地址:https://www.cnblogs.com/berlinman/p/14475727.html