「jqgrid 余分なモノをなくした単純なタイプ」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

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