3

私はhtmlテーブルを持っています。収まる列がたくさんあり、多くの列にはデータを表す画像が表示されています。私は jeditable を使用して、ユーザーが画像をクリックしてドロップダウンから選択するか、テキストボックスにテキストを入力してそのフィールドを更新できるようにしています (これにより、返されたコンテンツで適切な画像がレンダリングされます)。

1 つの問題は、一部の列幅が非常に小さいため、画像をクリックするとテキスト ボックスが表示されますが、(テーブル レイアウトによって制約されるため) 小さくなります。テキストボックスに十分なスペースがありません (幅が約 1/8 インチしかありません)。テーブルの上にテキストボックスをポップアップさせたいので (おそらく小さなダイアログか何かで)、誰かができるように幅を広げます。より長いテキストを入力します。

助言がありますか？

4

3 に答える 3

2

jeditable の cssclass または style 設定は、あなたが望むことをするかもしれません - jeditable が作成するフォームに絶対位置がある場合、テーブルは展開されません。

css で得られるものが十分でない場合は、任意の jquery プラグインの独自のカスタム バージョンを作成するのはかなり簡単です。フォームを作成する部分を見つけるだけです。

var form = $('<form />');

必要なhtmlを生成するように設定します。サイズと位置の調整は比較的簡単ですが、ダイアログ プラグインを統合するなどして構造を大幅に変更する場合は、おそらくコードの他の部分を変更する必要があります。

于 2010-02-02T02:22:58.057 に答える
0

jEditable には幅設定があり、'auto' (デフォルト)、'none'、またはピクセル数に設定できます。したがって、次のようなことをすると:

  $(".click").editable(url, {
      indicator : "<img src='img/indicator.gif'>",
      tooltip   : "Click to edit...",
      width     : 400,
      style  : "inherit"
  });

ニーズに合わせて編集幅を調整できます。もちろん、これによりテーブルが拡張されますが、これは問題ではありません。これは、ダイアログ ポップアップを表示するよりも好ましいと思います。

于 2010-02-01T08:39:14.880 に答える
0

実際の編集可能な DIV を列の上の絶対位置に非表示にして、編集可能なものを起動するタイトルを作成することができます

このようなもの（アイデアを説明するためだけに投稿された非動作コード）

<div class="jeditable" id="firstcol">jEditable field</div>
<th><span class="jeditable-activate">Edit me</span></td>

そしてjQueryでは：

$('.jeditable-activate').click(function() {
    $(this).prev().show().click();
});
于 2010-01-15T18:54:41.097 に答える