function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ruparuparuparupa 

VisualForceのテーブルの列幅をマウスドラッグで調整できるようにしたい

いつもお世話になっております。

VisualForceのテーブルの列幅をマウスドラッグで調整できるように実装したいのですが、可能でしょうか？
jQueryなど使用する必要があるのでしょうか。

ご存知の方がいらっしゃいましたらどうぞご教授宜しくお願い致します。
Best Answer chosen by ruparupa
Taiki YoshikawaTaiki Yoshikawa
『jquery-resizable-columns』というので実装できそうです。試してみたところ、apex:pageBlockTableの方ではうまく動作させることができませんでした。通常のtableタグを利用した方が良さそうかと思います。

 jquery-resizable-columns
https://github.com/dobtco/jquery-resizable-columns

サンプルです。
https://github.com/tyoshikawa1106/apex-jquery-resizable-columns-demo

All Answers

Taiki YoshikawaTaiki Yoshikawa
apex:pageBlockTableの列幅をドラッグで調整したいということでしたら、JavaScriptやjQueryでの実装が必要になると思います。apexタグにはSalesforce独自のスタイルが適用されているので、もしかすると通常のTableタグの方を使ったほうがいいかもしれません。
Taiki YoshikawaTaiki Yoshikawa
『jquery-resizable-columns』というので実装できそうです。試してみたところ、apex:pageBlockTableの方ではうまく動作させることができませんでした。通常のtableタグを利用した方が良さそうかと思います。

 jquery-resizable-columns
https://github.com/dobtco/jquery-resizable-columns

サンプルです。
https://github.com/tyoshikawa1106/apex-jquery-resizable-columns-demo
This was selected as the best answer
ruparuparuparupa
Taiki Yoshikawa さん

サンプルまで誠にありがとうございます！！
私の開発環境で試したところ、全く同じコードでapex:pageBlockTableの方も動きました！！
ブラウザの問題とかでしょうか？私はChromeで動作しました。
ruparuparuparupa
すみません、やっぱり動作不安定っぽいですね。。
Taiki YoshikawaTaiki Yoshikawa
自分もChromeで確認していました。こちらでも最初は動いていたのですが、しばらくすると動作しなくなったため、ちょっと相性が悪いのかなと感じています。

未確認な部分ですが、サンプルコードの下記の内容で変更後の列幅を保存する処理を行っています。もしかするとこれによりうまくうごかなくなっているのかもしれません。(他のテーブル用の処理に干渉してしまっているとかかも...) 
<apex:includeScript value="{!URLFOR($Resource.jquery_resizable, 'dist/store.min.js')}" />
$(".resizableTable").resizableColumns({
  store: window.store // このstoreオプションが原因？
});

あとはapex:pageBlockTableだから発生するのではなく複数のテーブルで利用することで発生している可能性とかあるかもしれません。(これはさすがに大丈夫だと思っているのですが...)

ブラウザの問題のところで気づいたのですが、IE環境では確認していませんでした。もしIEで動作する必要がある場合は、問題無いか確認してみてください。
ruparuparuparupa
>最初は動いていたのですが、しばらくすると動作しなくなった
Chromeはそのような感じですね。
しかし何度も挑戦すると動いたりもすることがあるので面白い現象ですね。
１回目はうまくいって、２回目以降うまくいかないことが多いようなので、
おっしゃる通り列幅保存の処理の影響の可能性がありそうですね。

現時点で確認できるブラウザの確認してみましたので共有いたします。
Chrome　△（２回目以降動かないことがある）
FireFox　△
Safari　△
XP IE7　×
XP IE8　×
Win7 IE9　△
Win7 IE10 △
Win8 IE10 △

通常のTableタグを仕様するのがベターですね。
ありがとうございました。
Taiki YoshikawaTaiki Yoshikawa
IE8はダメでしたか...(^_^;)
ブラウザの検証結果ありがとうございます。勉強になりました。