リストアイテムを見やすくしたい(2)
SharePointにおいておそらく誰もが不便だと感じるのが、リストのビューにおいて、横幅を指定、あるいは表示文字数を制限する機能が無い、ということです。
「Table width=100%、TD width 指定なし」という状態ですので、当然ながら表示する列や情報量が多かったり、逆に少ないとと、もうぐだぐだになります。
しかも悪いことに、各列に固有の class が付与されていません。(例外あり)
このため、CSS による表示制御にも限界があります。
全ての改行を禁止したり、特定列の幅を(無理矢理)広くしたりする程度です。
まあ「無いよりマシ」というレベルでしょうか。
そこで、今回は Javascriptで列幅と表示形式を設定する方法をご紹介します。
まず例によって、ビューにコンテンツエディタを挿入します。
ビューを開いて[サイトの操作]→[ページの編集]です。
レイアウト設定で[非表示]にして下さい。
次に、このソースに、以下のスクリプトを仕込みます。
[code]<script type="text/javascript">
_spBodyOnLoadFunctionNames.push( "ModColWidth" );
//ビュー全体の TABLE タグの ID 値。書式:(リストのGUID)-(ビューのGUID)
viewID = "{DA89FEE1-E185-4924-AAAB-37C9C3F8345D}-{29A93CED-A165-4B69-B707-5AB4B6453D6C}";
//「タイトル (編集メニュー付きのアイテムにリンク) 」列の位置。ない場合は 0
TitlePosition = 2;
function ModColWidth()
{
var TitlePos = TitlePosition - 1;
var viewFld = document.getElementById(viewID).childNodes(0);
var viewTBD = viewFld.childNodes;
for (var t=0 ; t < viewTBD.length ; t++){
if (t == 0){
var THRows = viewTBD(t).getElementsByTagName("TH");
for (th = 0 ; th < THRows.length ; th++){
THRows(th).width = "1%";
}
var LastTH = THRows.length -1;
var LastSpace = 99 - THRows.length;
THRows(LastTH).width = LastSpace + "%" ;
}
else{
var RowCols = viewTBD(t).childNodes;
for (var r=0; r < RowCols.length; r++){
if (r == TitlePos){
var TitleCol = RowCols(r).childNodes(0);
var TitleTD = TitleCol.getElementsByTagName("TD");
var Titlevalue = TitleTD(0).innerHTML;
n = r + 1;
TitleTD(0).innerHTML = ‘<‘ + ‘div class="col_’ + n + ‘">’ + Titlevalue + ‘<‘ + ‘/div>';
}
else{
var colvalue = RowCols(r).innerHTML;
n = r + 1;
RowCols(r).innerHTML = ‘<‘ + ‘div class="col_’ + n + ‘">’ + colvalue + ‘<‘ + ‘/div>';
}
}
}
}
}
</script>[/code]
変数 viewID とTitlePosition は、環境にあわせて変更する必要があります。
いつも通り、素人の書いたスクリプトですので、不備があったり非効率だったりすると思います。
そのあたりは適宜ご修正下さい。
(ついでにフィードバックを頂けると凄く嬉しいです)
処理を簡単にご説明しますと、ページが開かれた際にこのスクリプトが動き、ビュー内の TH と TD タグの中を強制的に修正します。
TH には width 値をn%で挿入し、TD については、内部に列固有のクラスを持った div タグ <div class=”col_n”></div>を設定します。
あとは、CSSでこのクラスの表示を指定するだけです。
同じように、コンテンツエディタ(同じパーツ内で構いません)に記述します。
以下はそのサンプルです。
[code]<style>
.ms-vb-user TD{white-space:nowrap;} //必須(ユーザ列)
.ms-vh-icon{width:1%;} //必須(添付アイコン列)
.col_1{}
.col_2{color:#FF0000;width:100px;overflow:hidden;white-space:nowrap;}
.col_3{color:#FF0000;width:70px;overflow:hidden;white-space:nowrap;}
.col_4{color:#FF0000;width:70px;overflow:hidden;white-space:nowrap;}
.col_5{color:#FF0000;width:70px;overflow:hidden;white-space:nowrap;}
.col_6{color:#FF0000;width:70px;overflow:hidden;white-space:nowrap;}
.col_7{color:#FF0000;width:70px;overflow:hidden;white-space:nowrap;}
.col_8{}
.col_9{}
</style>[/code]
.col_n で列単位にスタイルを指定します。
n はそのビューにおいて列を左から数えた値です。
上記スタイルを適用した結果。
ここでは、改行なしで指定幅を越えると後ろは表示しないようにしています。
ドロップダウンメニューなど、通常機能にはなんら影響はありません。
なお、逆に画面が広すぎる場合には、左詰で表示されます。
難点は、Javascriptで行単位に処理していますので、表示行数が多いと端末の
スペック次第ですが、表示がかなり重くなるかもしれません。
とりあえず、100アイテムくらいなら大きな問題にはならないようです。
自分の備忘録として設計上の留意点を書いておくと、「ソースに表示されているタグ構造と、DOM 経由で取得されるノード構造は必ずしも同一ではない」ことです。
例えば、HTMLソース上は TABLE の子ノードは TR です。
しかし、JavaScript でこれを取得すると、存在しない筈の TBODY が返ります。
これが「そういうもの」なのか、あるいはSharePointの固有仕様なのかは私には判らないのですが、Scriptでノードを辿る際は、「実際に(内部的に)何が取得されているのか」を逐一、目視で確認しておくことをお勧めします。
これでかなりハマりました…。
ビューを改行させない 改行禁止 Web パーツ
ビューで列幅を指定するちょいテク
リストアイテムを見やすくしたい(1)
リストアイテムを見やすくしたい(2)
login