EasyUI を使用してマスター/ディテール コントロールを実装しようとしています。現在、私は次のようなものを持っています:
<div class="easyui-layout" style="height: 600px;">
<div region="west" style="width: 250px;">
<table id="detailsTable">
<thead>
<tr>
<th field="ID" width="200">ID</th>
<th field="Name" width="200">Name</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
</div>
<div region="center" title="Main Title">
...
</div>
</div>
次のスクリプトは、上記を見栄えの良いマスター/ディテール コントロールに変換します。
$("div.easyui-layout").layout();
$("table#detailsTable").datagrid({
pagination: false,
singleSelect: true,
fitColumns: true
});
今必要なのは、グリッドの幅をコンテナー (ウェスタン パネル) の 100% にすることです。そのため、パネルと一緒にサイズを変更する必要があります。テーブルの設定width="100%"
または設定style="width: 100%;"
は役に立たず、パネルのサイズが変更されたときにレイアウトがイベントを発生させないようです(少なくともドキュメントには見つかりませんでした)。何か案は?