Question

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

请注意，双击标题单元格分隔后，将自动调整首选大小的列。当您尝试通过单击和滑动（手动定义列的大小）来调整大小时会出现此问题。

如果我不导入JQueryUI库，那么我确认datagrid的resize columns功能正常工作。所以我猜两个库之间肯定存在一种冲突，但我不确定如何解决这个问题。

要重现，很容易，您只需要包含不同的库并创建数据网格。

<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/对有兴趣的人

进行了说明

EasyUI和JQuery-UI库在Resize上发生冲突

1 个答案: