LoginSignup
19

More than 5 years have passed since last update.

jqGrid インストールから表示まで

Last updated at Posted at 2015-04-24

jqGridの使い方

環境はEclipse。


1.ダウンロード

次の2つをダウンロードする
・jQueryUI ( http://jqueryui.com/download/ )
    - ページ最後尾にある「Theme」のセクションから “Redmond” を選び、ダウンロード
・jqGrid ( http://www.trirand.com/blog/?page_id=6 )
    - そのままダウンロード


2.コーディング

jqGrid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <link type="text/css" media="screen" href="jqGrid/jquery-ui.min.css" rel="stylesheet" />
    <link type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
    <script type="text/javascript" src="jqGrid/js/jquery-1.11.0.min.js" ></script>
    <script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js" ></script>
    <script type="text/javascript" src="jqGrid/js/i18n/grid.locale-ja.js" ></script>

    <script type="text/javascript">
    jQuery(document).ready(function()
    {
        var mydata = [
            {comp_code:"CD1", comp_name:"株式会社シー", comp_kana:"カブシキカイシャシー"},
            {comp_code:"CD2", comp_name:"ビー株式会社", comp_kana:"ビーカブシキカイシャ"},
            {comp_code:"CD3", comp_name:"有限会社エー", comp_kana:"ユウゲンガイシャエー"},
        ];

        jQuery("#list").jqGrid({
                        data: mydata,
            datatype: "local",
            colNames:['コード', '会社名', 'カナ'],
            colModel:[
                {name:'comp_code'},
                {name:'comp_name'},
                {name:'comp_kana'},
            ],
            multiselect: false,
            caption: '会社一覧'
        });
    });
    </script>
</head>
<body>
  <table id="list">
  </table>
</body>
</html>



↓整理したものの、とりあえずダウンロードした2つのフォルダの中身を全部ほりこんどけばOK!
 jQueryの「images」フォルダはライブラリが読み込むので必要!

キャプチャ.JPG


3.表示

キャプチャ.JPG



とりあえず簡単ではあるがこれでjQgridを使った画面を作ることができる!!



参照
http://samples.northwind.mydns.jp/home/webdev/jqgridsample1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19