リストアイテムを見やすくしたい(2)

SharePointにおいておそらく誰もが不便だと感じるのが、リストのビューにおいて、横幅を指定、あるいは表示文字数を制限する機能が無い、ということです。

「Table width=100%、TD width 指定なし」という状態ですので、当然ながら表示する列や情報量が多かったり、逆に少ないとと、もうぐだぐだになります。

しかも悪いことに、各列に固有の class が付与されていません。(例外あり)
このため、CSS による表示制御にも限界があります。
全ての改行を禁止したり、特定列の幅を(無理矢理)広くしたりする程度です。
まあ「無いよりマシ」というレベルでしょうか。

そこで、今回は Javascriptで列幅と表示形式を設定する方法をご紹介します。

まず例によって、ビューにコンテンツエディタを挿入します。
ビューを開いて[サイトの操作]→[ページの編集]です。
レイアウト設定で[非表示]にして下さい。

次に、このソースに、以下のスクリプトを仕込みます。
[code]<script type="text/javascript">
_spBodyOnLoadFunctionNames.push( "ModColWidth" );

//ビュー全体の TABLE タグの ID 値。書式:(リストのGUID)&#45;(ビューのGUID)
viewID = "{DA89FEE1&#45;E185&#45;4924&#45;AAAB&#45;37C9C3F8345D}&#45;{29A93CED&#45;A165&#45;4B69&#45;B707&#45;5AB4B6453D6C}";
//「タイトル (編集メニュー付きのアイテムにリンク) 」列の位置。ない場合は 0
TitlePosition = 2;

function ModColWidth()
{
var TitlePos = TitlePosition &#45; 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 &#45;1;
var LastSpace = 99 &#45; 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&#45;vb&#45;user TD{white&#45;space:nowrap;} //必須(ユーザ列)
.ms&#45;vh&#45;icon{width:1%;} //必須(添付アイコン列)
.col_1{}
.col_2{color:#FF0000;width:100px;overflow:hidden;white&#45;space:nowrap;}
.col_3{color:#FF0000;width:70px;overflow:hidden;white&#45;space:nowrap;}
.col_4{color:#FF0000;width:70px;overflow:hidden;white&#45;space:nowrap;}
.col_5{color:#FF0000;width:70px;overflow:hidden;white&#45;space:nowrap;}
.col_6{color:#FF0000;width:70px;overflow:hidden;white&#45;space:nowrap;}
.col_7{color:#FF0000;width:70px;overflow:hidden;white&#45;space:nowrap;}
.col_8{}
.col_9{}
</style>[/code]
.col_n で列単位にスタイルを指定します。
n はそのビューにおいて列を左から数えた値です。

上記スタイルを適用した結果。
ここでは、改行なしで指定幅を越えると後ろは表示しないようにしています。
ドロップダウンメニューなど、通常機能にはなんら影響はありません。

なお、逆に画面が広すぎる場合には、左詰で表示されます。

難点は、Javascriptで行単位に処理していますので、表示行数が多いと端末の
スペック次第ですが、表示がかなり重くなるかもしれません。
とりあえず、100アイテムくらいなら大きな問題にはならないようです。

自分の備忘録として設計上の留意点を書いておくと、「ソースに表示されているタグ構造と、DOM 経由で取得されるノード構造は必ずしも同一ではない」ことです。
例えば、HTMLソース上は TABLE の子ノードは TR です。
しかし、JavaScript でこれを取得すると、存在しない筈の TBODY が返ります。
これが「そういうもの」なのか、あるいはSharePointの固有仕様なのかは私には判らないのですが、Scriptでノードを辿る際は、「実際に(内部的に)何が取得されているのか」を逐一、目視で確認しておくことをお勧めします。
これでかなりハマりました…。

ビューを改行させない 改行禁止 Web パーツ
ビューで列幅を指定するちょいテク
リストアイテムを見やすくしたい(1)
リストアイテムを見やすくしたい(2)

JavaScript DOM リファレンス


Author

中村 和彦(シンプレッソ・コンサルティング株式会社 代表)が「ユーザ視点の SharePoint 情報」を発信します。元大手製造業 SharePoint 運用担当。現SharePoint コンサルタント。お仕事のお問い合わせはこちらまでお願いします。当ブログにおける発信内容は個人に帰属し所属組織の公式発信/見解ではありません。
FB : 中村 和彦
blog: Be・Better!
MS MVP SharePoint 2009/10-2011/9
MS MVP Office 365 2012/10-2014/9