「jqGridバインディングで一部styleバインディングを指定」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jqGridバインディングで一部styleバインディングを指定</title>
<link rel="stylesheet" type="text/css" href="ko_jqgrid_binding/examples/content/shCore.css" />
<link rel="stylesheet" type="text/css" href="ko_jqgrid_binding/examples/content/shThemeDefault.css" />
<link rel="stylesheet" type="text/css" href="ko_jqgrid_binding/examples/content/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" href="ko_jqgrid_binding/examples/content/ui.jqgrid.css" />
<script type="text/javascript" src="ko_jqgrid_binding/examples/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="ko_jqgrid_binding/examples/lib/knockout.js"></script>
<script type="text/javascript" src="ko_jqgrid_binding/examples/lib/grid.locale-en.js"></script>
<script type="text/javascript" src="ko_jqgrid_binding/examples/lib/jquery.jqGrid.js"></script>
<script type="text/javascript" src="ko_jqgrid_binding/src/ko.gridBinding.js"></script>
</head>
<body>
<h1>jqGridバインディングで一部styleバインディングを指定</h1>
<div id="pager"></div>
<table id="animals" data-bind="grid: { data: animals }" >
<caption>Amazing Animals</caption>
<thead>
<tr>
<th data-field="actions" data-sortable="false"></th>
<th data-field="name">Item Name</th>
<th data-field="sales">Sales Count</th>
<th data-field="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td data-field="actions"><a class="grid-edit" data-bind="attr:{ href: 'animals/' + id, title: name }, text: id"></a></td>
<td data-field="sales"><span data-bind="text: sales, style: {color: 'red'}"></span></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function () {
var dataService = {
GetAnimals: function(callback)
{
var initialData = [
{ id: 1, name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ id: 2, name: "Speedy Coyote", sales: 89, price: 190.00 },
{ id: 3, name: "Furious Lizard", sales: 152, price: 25.00 },
{ id: 4, name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ id: 5, name: "Brooding Dragon", sales: 0, price: 6350 },
{ id: 6, name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ id: 7, name: "Optimistic Snail", sales: 420, price: 1.50 },
{ id: 11, name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ id: 12, name: "Speedy Coyote", sales: 89, price: 190.00 },
{ id: 13, name: "Furious Lizard", sales: 152, price: 25.00 },
{ id: 14, name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ id: 15, name: "Brooding Dragon", sales: 0, price: 6350 },
{ id: 16, name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ id: 17, name: "Optimistic Snail", sales: 420, price: 1.50 },
{ id: 21, name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ id: 22, name: "Speedy Coyote", sales: 89, price: 190.00 },
{ id: 23, name: "Furious Lizard", sales: 152, price: 25.00 },
{ id: 24, name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ id: 25, name: "Brooding Dragon", sales: 0, price: 6350 },
{ id: 26, name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ id: 27, name: "Optimistic Snail", sales: 420, price: 1.50 },
];
callback(initialData);
}
};
var viewModel = {
animals: ko.observableArray([]),
};
dataService.GetAnimals(function (result)
{
viewModel.animals(result);
});
ko.applyBindings(viewModel);
});
</script>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>