JS グリッド コントロール実装のヒント
最終更新日: 2011年6月24日
適用対象: SharePoint Foundation 2010
この記事の内容
コントローラー
フィルター処理
永続性
グリッドの印刷
イベントへの添付
JsGrid.js および JsGrid.Gantt.js のデバッグ バージョン
コントローラー
JS グリッド コントロールのコントローラーは、コンテンツをレンダリングする方法 (つまり、どのペインまたは列を表示するか) をグリッドに指示します。データ ソースは、コントローラーによって有効化されます。また、コントローラーは、無関係な行の処理方法を把握しており、データがローカルになくても編集ができます。
コントローラーでスタイルを定義することもできます。次のコードでは、RegisterCellStyle でスタイル "TextRightAlign" が定義されています。このスタイルを使用すると列が右揃えになります。
<SharePoint:JSGrid ID="_grid" runat="server" />
<script type="text/javascript">
Type.registerNamespace("GridManager");
this.control;
GridManager = function () {
this.Init = function (jsGridControl, initialData, props) {
control = jsGridControl;
var dataSource = new SP.JsGrid.StaticDataSource(initialData);
var jsGridParams = dataSource.InitJsGridParams();
jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign: 'right' }));
jsGridControl.Init(jsGridParams);
}
};
</script>
詳細な例については、「[方法] 基本の JS グリッドを作成する」を参照してください。
フィルター処理
コンテンツのフィルターに役立つ設定の一覧を次に示します。
列の表示/非表示の状態
列の順序
列の幅
複雑なフィルター
グループ化
並べ替え
分割バーの位置
永続性
永続性という用語は、フィルター、グループ化、並べ替え、および表示の選択内容をユーザー セッションにわたって保持することを意味します。永続性は、各コントローラーが備えている機能です。
セッションにわたって保持するべきではない設定を次に示します。
オートフィルター: オートフィルター設定を保持すると、ユーザーが混乱する可能性があります。これは、ビューにデータが表示されていない理由をユーザーが知らないことがあるからです。手動で構成されている場合は、クライアント側のフィルターが保持されます。
階層: データセットは "オンザフライ" で作成されるので保持するのが困難です。ただし、"アウトライン レベルの表示" 設定は保持されます。この設定によって、ビューでは前述のデータセットが作成されます。
選択した行または列
注意
Microsoft Office Project Server 2007 では、ほとんどの設定がセッションにわたって保持されていました。Project Server 2010 でも、引き続きページごとに永続性を選択できます。セッション内でのみ設定を保持することがビジネスで強く求められない限り、既定ではユーザー設定内で設定を保持します。
グリッドの印刷
グリッド データを印刷するとき、データはコントローラーによって読み取り専用で読み込まれます。ページングされたデータセットでは、この処理の実行時間が長くなる場合があるので、ブラウザー ウィンドウは新しく開くことをお勧めします。印刷処理はブラウザーに委ねられます。ページがユーザーの要望を満たしていない場合、ユーザーは印刷ウィンドウを閉じて、列を追加または削除し、ズームを行い、再度 [印刷] をクリックすることができます。
イベントへの添付
この例は、カスタム コードを OnCellEditComplete イベントに添付する方法を示しています。
<script type="text/javascript">
Type.registerNamespace("GridManager");
GridManager = function () {
this.Init = function (jsGridControl, initialData, props) {
control = jsGridControl;
var dataSource = new SP.JsGrid.StaticDataSource(initialData);
var jsGridParams = dataSource.InitJsGridParams();
// This event is triggered after the standard grid error checking.
jsGridControl.AttachEvent(SP.JsGrid.EventType.OnCellEditCompleted, GotHere);
jsGridControl.Init(jsGridParams);
}
};
function GotHere(obj) {
alert('Got Here, ' + obj.fieldKey);
}
</script>
JsGrid.js および JsGrid.Gantt.js のデバッグ バージョン
JsGrid.js および JsGrid.Gantt.js のデバッグ バージョンが製品と共に、通常は %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS にインストールされます。これらのファイルには、JS グリッドに関する重要な情報が含まれています。