EasyUI和JQuery-UI库在调整大小时发生冲突

Question

我有一个需要同时使用EasyUI（Datagrid）和JQueryUI（Dialog Form）库的项目。导入JQueryUI库时，我在EasyUI Datagrid标头调整大小功能上看到奇怪的行为。如果我尝试手动调整标题的大小，则仅调整标题单元格的大小（此列的数据单元格不会调整大小）。

请注意，双击标题单元格分隔将起作用，并且将自动根据所需大小调整列的大小。当您尝试通过单击和滑动来调整大小（手动定义列的大小）时，会出现问题。

如果不导入JQueryUI库，那么我确认datagrid的resize列功能正常运行。因此，我猜两个库之间肯定存在某种冲突，但是我不确定如何解决此问题。

要复制，很容易，您只需要包括不同的库并创建一个数据网格。

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">  
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">  
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">  

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>  
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px">  

...

我创建了一个小jsfiddle项目来说明问题，请参见http://jsfiddle.net/melane/vmDP8/

您可以自己看到，标题单元格大小更改未应用于数据单元格。你知道我该怎么解决吗？

谢谢

Answer 1

实际上，我从EasyUI框架的开发人员那里得到了答案，根本不可能修复两个框架之间的这种不兼容性。因此，我改用EasyUI中的对话框，摆脱了JQuery-UI框架的依赖：

<div id="dialog" class="easyui-dialog" title="Action" style="width:317px;height:260px" data-options="
    modal:true,
    closed:true,
    buttons:[{
      text:'Cancel',
      iconCls:'icon-cancel',
      handler:function(){
          $('#dialog').dialog('close');
      }
    }]
">

对此感兴趣的人在http://jsfiddle.net/vmDP8/11/上进行了说明

Answer 2

如果两个不同的框架使用相同的快捷方式，则其中一个可能会停止工作。为了避免它们之间的冲突，可以使用$ .noConflict（）函数。有关更多详细信息，请检查此链接JQuery noConflict