jqGridバインディングで一部styleバインディングを指定

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jqGridバインディングで一部styleバインディングを指定</title>
  6. <link rel="stylesheet" type="text/css" href="ko_jqgrid_binding/examples/content/shCore.css" />
  7. <link rel="stylesheet" type="text/css" href="ko_jqgrid_binding/examples/content/shThemeDefault.css" />
  8. <link rel="stylesheet" type="text/css" href="ko_jqgrid_binding/examples/content/jquery-ui-1.8.1.custom.css" />
  9. <link rel="stylesheet" type="text/css" href="ko_jqgrid_binding/examples/content/ui.jqgrid.css" />
  10. <script type="text/javascript" src="ko_jqgrid_binding/examples/lib/jquery-1.6.1.min.js"></script>
  11. <script type="text/javascript" src="ko_jqgrid_binding/examples/lib/knockout.js"></script>  
  12. <script type="text/javascript" src="ko_jqgrid_binding/examples/lib/grid.locale-en.js"></script>
  13. <script type="text/javascript" src="ko_jqgrid_binding/examples/lib/jquery.jqGrid.js"></script>
  14. <script type="text/javascript" src="ko_jqgrid_binding/src/ko.gridBinding.js"></script>
  15. </head>
  16. <body>
  17. <h1>jqGridバインディングで一部styleバインディングを指定</h1>
  18. <div id="pager"></div>
  19. <table id="animals" data-bind="grid: { data: animals }" >
  20.   <caption>Amazing Animals</caption>
  21.   <thead>
  22.     <tr>
  23.       <th data-field="actions" data-sortable="false"></th>
  24.       <th data-field="name">Item Name</th>
  25.       <th data-field="sales">Sales Count</th>
  26.       <th data-field="price">Price</th>
  27.     </tr>
  28.   </thead>
  29.   <tbody>
  30.     <tr>
  31.       <td data-field="actions"><a class="grid-edit" data-bind="attr:{ href: 'animals/' + id, title: name }, text: id"></a></td>
  32.       <td data-field="sales"><span data-bind="text: sales, style: {color: 'red'}"></span></td>
  33.     </tr>
  34.   </tbody>
  35. </table>
  36. <script type="text/javascript">
  37. $(function () {
  38.   var dataService = {
  39.     GetAnimals: function(callback)
  40.     {
  41.       var initialData = [
  42.         { id: 1,  name: "Well-Travelled Kitten", sales: 352,   price: 75.95  },
  43.         { id: 2,  name: "Speedy Coyote",         sales: 89,    price: 190.00 },
  44.         { id: 3,  name: "Furious Lizard",        sales: 152,   price: 25.00  },
  45.         { id: 4,  name: "Indifferent Monkey",    sales: 1,     price: 99.95  },
  46.         { id: 5,  name: "Brooding Dragon",       sales: 0,     price: 6350   },
  47.         { id: 6,  name: "Ingenious Tadpole",     sales: 39450, price: 0.35   },
  48.         { id: 7,  name: "Optimistic Snail",      sales: 420,   price: 1.50   },
  49.         { id: 11, name: "Well-Travelled Kitten", sales: 352,   price: 75.95  },
  50.         { id: 12, name: "Speedy Coyote",         sales: 89,    price: 190.00 },
  51.         { id: 13, name: "Furious Lizard",        sales: 152,   price: 25.00  },
  52.         { id: 14, name: "Indifferent Monkey",    sales: 1,     price: 99.95  },
  53.         { id: 15, name: "Brooding Dragon",       sales: 0,     price: 6350   },
  54.         { id: 16, name: "Ingenious Tadpole",     sales: 39450, price: 0.35   },
  55.         { id: 17, name: "Optimistic Snail",      sales: 420,   price: 1.50   },
  56.         { id: 21, name: "Well-Travelled Kitten", sales: 352,   price: 75.95  },
  57.         { id: 22, name: "Speedy Coyote",         sales: 89,    price: 190.00 },
  58.         { id: 23, name: "Furious Lizard",        sales: 152,   price: 25.00  },
  59.         { id: 24, name: "Indifferent Monkey",    sales: 1,     price: 99.95  },
  60.         { id: 25, name: "Brooding Dragon",       sales: 0,     price: 6350   },
  61.         { id: 26, name: "Ingenious Tadpole",     sales: 39450, price: 0.35   },
  62.         { id: 27, name: "Optimistic Snail",      sales: 420,   price: 1.50   },
  63.       ];
  64.       callback(initialData);
  65.     }
  66.   };
  67.   
  68.   var viewModel = {
  69.     animals: ko.observableArray([]),
  70.   };
  71.   dataService.GetAnimals(function (result)
  72.   {
  73.     viewModel.animals(result);
  74.   });
  75.   ko.applyBindings(viewModel);
  76. });
  77. </script>
  78. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  79. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  80. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  81. </div>
  82. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  83. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  84. </div>
  85. </body>
  86. </html>