0

EasyUI (Datagrid) と JQueryUI (Dialog Form) ライブラリの両方を使用する必要があるプロジェクトがあります。JQueryUI ライブラリをインポートすると、EasyUI Datagrid ヘッダーのサイズ変更機能で奇妙な動作が見られます。ヘッダーを手動でサイズ変更しようとすると、ヘッダー セルのみがサイズ変更されます (この列のデータ セルはサイズ変更されません)。

ヘッダー セルの分離をダブルクリックすると機能し、優先サイズで列のサイズが自動的に変更されることに注意してください。この問題は、クリックしてスライドしてサイズを変更しようとすると発生します (列のサイズを手動で定義します)。

JQueryUI ライブラリをインポートしない場合、データグリッドの列のサイズ変更機能が正常に機能していることを確認します。したがって、両方のライブラリ間に一種の競合があるに違いないと推測していますが、この問題をどのように解決できるかわかりません。

再現するのは簡単です。さまざまなライブラリを含めてデータグリッドを作成するだけです。

<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/ を参照してください。

ヘッダー セル サイズの変更がデータ セルに適用されていないことがわかります。どうすればこれを修正できるか知っていますか？

ありがとう

4

1 に答える 1

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/に示されています

于 2013-05-29T03:26:43.970 に答える