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="width: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不触发拖拽