为EasyUI的edatagrid添加编辑器后出现Uncaught TypeError错误

我用EasyUI结合.Net API实现表格CRUD功能，跟着《Build CRUD DataGrid with jQuery EasyUI》教程编写脚本，原本表格能正常加载API返回的数据，但给字段添加editor支持编辑后，双击行进入编辑状态再切换到其他行，控制台就会报错，且每次切换行都会触发该错误。

我的代码： #

$('#dgv').edatagrid({
    url: '/Villa/GetVillas',
    //saveUrl: '/Villa/CreateVilla',
    //updateUrl: '/Villa/UpdateVilla',
    //destroyUrl: '/Villa/DeleteVilla',
    toolbar: [{
        iconCls: 'icon-add',
        text: 'Add',
        handler: function () {
            //$('#dgv').edatagrid('addRow');
        }
    }, '-', {
        iconCls: 'icon-save',
        text: 'Save',
        handler: function () {
            //$('#dgv').edatagrid('saveRow');
        }
    }, '-', {
        iconCls: 'icon-remove',
        text: 'Delete',
        handler: function () {
            //$('#dgv').edatagrid('destroyRow');
        }
    }, '-', {
        iconCls: 'icon-cancel', // Custom "Cancel" button icon
        text: 'Cancel', // Custom "Cancel" button text
        handler: function () {
            //('#dgv').edatagrid('cancelRow');
        }
        }],
    columns: [[
        { field: 'name', title: 'Name', width: 200, editor:'text' },
        { field: 'occupancy', title: 'Occupancy', width: 100, editor:'numberbox' },
        { field: 'sqft', title: 'Sqft', width: 100, editor:'numberbox' }
    ]],
    idField: "id",
    rownumbers: true,
    fitColumns: true,
    singleSelect: true,
    pagination: true
});

报错信息： #

tooltip.js:729  Uncaught TypeError: No method named "destroy"
at HTMLInputElement.<anonymous> (tooltip.js:729:17)
at Function.each (jquery-3.7.1.min.js:2:3129)
at ce.fn.init.each (jquery-3.7.1.min.js:2:1594)
at ce.fn.init.jQueryInterface [as tooltip] (tooltip.js:724:17)
at _586 (jquery.easyui.min.js:7606:9)
at HTMLInputElement.<anonymous> (jquery.easyui.min.js:7820:1)
at Function.each (jquery-3.7.1.min.js:2:3129)
at ce.fn.init.each (jquery-3.7.1.min.js:2:1594)
at Object.destroy (jquery.easyui.min.js:7819:11)
at $.fn.validatebox (jquery.easyui.min.js:7798:38)

解决方法 #

这个错误的核心原因是EasyUI组件与jQuery UI的tooltip插件存在方法命名冲突：EasyUI在销毁validatebox等编辑组件时，会调用destroy方法，但jQuery UI的tooltip插件没有实现兼容该逻辑的destroy方法，导致报错。

方案1：移除不必要的jQuery UI tooltip引用

如果你的项目不需要jQuery UI的tooltip功能，直接删除页面中tooltip.js的引入即可——EasyUI自身带有表单验证提示组件，完全可以满足需求。

方案2：添加兼容代码（需保留jQuery UI时）

如果必须保留jQuery UI，在引入EasyUI之后添加以下代码，给jQuery UI的tooltip补充兼容的destroy方法：

// 解决jQuery UI tooltip与EasyUI的destroy方法冲突
if ($.fn.tooltip && !$.fn.tooltip.destroy) {
    $.fn.tooltip.destroy = function() {
        this.tooltip('disable');
        this.removeData('ui-tooltip');
        return this;
    };
}

方案3：检查版本兼容性

你当前使用的是jQuery 3.7.1，确保对应的EasyUI版本支持该jQuery版本（如EasyUI 1.9.x及以上版本通常兼容jQuery 3.x）。如果版本不匹配，升级EasyUI到对应兼容版本。

另外注意：你代码中Cancel按钮的handler有个小语法错误（多了注释符号），建议修正为：

handler: function () {
    $('#dgv').edatagrid('cancelRow');
}

内容的提问来源于stack exchange，提问作者Dũng Nguyễn Văn