シーポイント システム事業部のスタッフブログ

1. jqGrid Stable Release のダウンロード
ダウンロードページより、jqGrid Stable Release をダウンロードします。
現在の安定版は、3.4.4 となっています。

2. ダウンロードしましたファイルを展開し、利用するサイトへアップロードします。

3. jquery.jqGrid.js ファイルを開き、以下の箇所を修正します。

function jqGridInclude()

{

    var pathtojsfiles = "js/jqGrid/js/"; // need to be ajusted

    // set include to false if you do not want some modules to be included

    var combineIntoOne = false; 

    var combinedInclude = new Array();

    var combinedIncludeURL = "combine.php?type=javascript&files=";

    var minver = false;

    var modules = [

        { include: true, incfile:'grid.locale-jp.js',minfile: 'min/grid.locale-jp-min.js'}, // jqGrid translation

        { include: true, incfile:'grid.base.js',minfile: 'min/grid.base-min.js'}, // jqGrid base

        { include: true, incfile:'grid.common.js',minfile: 'min/grid.common-min.js' }, // jqGrid common for editing

        { include: true, incfile:'grid.formedit.js',minfile: 'min/grid.formedit-min.js' }, // jqGrid Form editing

        { include: true, incfile:'grid.inlinedit.js',minfile: 'min/grid.inlinedit-min.js' }, // jqGrid inline editing

        { include: true, incfile:'grid.celledit.js',minfile: 'min/grid.celledit-min.js' }, // jqGrid cell editing

        { include: true, incfile:'grid.subgrid.js',minfile: 'min/grid.subgrid-min.js'}, //jqGrid subgrid

        { include: true, incfile:'grid.treegrid.js',minfile: 'min/grid.treegrid-min.js'}, //jqGrid treegrid

        { include: true, incfile:'grid.custom.js',minfile: 'min/grid.custom-min.js'}, //jqGrid custom 

        { include: true, incfile:'grid.postext.js',minfile: 'min/grid.postext-min.js'}, //jqGrid postext

        { include: true, incfile:'grid.tbltogrid.js',minfile: 'min/grid.tbltogrid-min.js'}, //jqGrid table to grid 

        { include: true, incfile:'grid.setcolumns.js',minfile: 'min/grid.setcolumns-min.js'}, //jqGrid setcolumns

        { include: true, incfile:'grid.import.js',minfile: 'min/grid.import-min.js'}, //jqGrid import

        { include: true, incfile:'jquery.fmatter.js',minfile: 'min/jquery.fmatter-min.js'}, //jqGrid formater

        { include: true, incfile:'json2.js',minfile: 'min/json2-min.js'}, //json utils

        { include: true, incfile:'JsonXml.js',minfile: 'min/JsonXml-min.js'} //xmljson utils

pathtojsfiles : jqGrid を展開した際の 'js' パスを指定するよう変更します。
modules : 1行目にロケール情報を定義しているファイルをインクルードする設定となっています。
そのままですと英語表記となりますので、'grid.locale-jp.js', 'min/grid.locale-jp-min.js' にそれぞれ変更します。

modules には、jqGrid で提供されている各種モジュールが定義されています。
利用しない機能がある場合は、include: true を include: false にすることでインクルードされなくなります。

4. その他 plug-in モジュールの設定
jqGrid を利用するため、以下の javascript ファイルも設定する必要があります。

・jqModal.js, jqModal.css, jqDnR.js (http://dev.iceburg.net/jquery/jqModal/)

こちらのファイルがないと、編集時にエラーとなってしまいます。

導入については以上となります。
次回は、表の設定方法について説明します。