jqgrid 余分なモノをなくした単純なタイプ

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>jqgrid 余分なモノをなくした単純なタイプ</title>
  6. <link rel="stylesheet" type="text/css" href="jqgrid/jquery-ui-1.8.19.custom.css" />
  7. <link rel="stylesheet" type="text/css" href="jqgrid/ui.jqgrid.css" />
  8. <script type="text/javascript" src="jqgrid/jquery-1.7.2.min.js"></script>
  9. <script type="text/javascript" src="jqgrid/jquery-ui-1.8.19.custom.min.js"></script>
  10. <script type="text/javascript" src="jqgrid/jquery.jqGrid.min.js" ></script>
  11. <script type="text/javascript">
  12.   jQuery(document).ready(function()
  13.   {
  14.     var mydata = [
  15.       {id: 1,  item: "ねぎ間",         price: 168},
  16.       {id: 2,  item: "ハツ",           price: 136},
  17.       {id: 3,  item: "レバー",         price: 136},
  18.       {id: 4,  item: "ぼんちり",       price: 136},
  19.       {id: 5,  item: "はらみ",         price: 136},
  20.       {id: 6,  item: "うずら玉子",     price: 136},
  21.       {id: 7,  item: "なんこつ",       price: 136},
  22.       {id: 8,  item: "手羽先",         price: 168},
  23.       {id: 9,  item: "せせり",         price: 136},
  24.       {id: 10, item: "白レバー",       price: 168},
  25.       {id: 11, item: "丸ごとシマウマ", price: 290}
  26.     ];
  27.     jQuery("#list").jqGrid(
  28.     {
  29.       data: mydata,
  30.       datatype: "local",
  31.       colNames:['番号', '品名', '金額'],
  32.       colModel:[
  33.         {
  34.           index    : 'id',
  35.           name     : 'id',
  36.           sorttype : 'int'
  37.         },
  38.         {
  39.           index    : 'item',
  40.           name     : 'item',
  41.           sorttype : 'str'
  42.         },
  43.         {
  44.           index    : 'price',
  45.           name     : 'price',
  46.           sorttype : 'int'
  47.         },
  48.       ],
  49.       height      : 'auto',
  50.       sortname    : 'id',
  51.       sortorder   : "ASC",
  52.       multiselect : false,
  53.       caption     : '焼き鳥一覧'
  54.     });  
  55.   });
  56. </script>
  57. </head>
  58. <body>
  59. <h1>jqgrid 余分なモノをなくした単純なタイプ</h1>
  60. <table id="list" class="scroll"></table>
  61. <hr />
  62. <a href="http://tips.recatnap.info/sample/jqgrid/jqgrid.zip" style="font-size:10pt;">使用しているCSSとライブラリと画像のzipファイル</a>
  63. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  64. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  65. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  66. </div>
  67. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  68. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  69. </div>
  70. </body>
  71. </html>