![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
HTML KnockoutJS jqGrid (AMD非対応ライブラリ) と組み合わせる |
Search ボタンを押すと、jqGrid にデータが表示される
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockdown.js with jqgrid</title>
<link rel="stylesheet" type="text/css" media="screen" href="js/lib/jquery-ui-1.11.3/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="js/lib/jquery-grid-4.7.1/ui.jqgrid.css" />
<script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutEx3_init.js"></script>
</head>
<body>
<p>First name: <input id="firstName" data-bind="value: firstName" title="個人名を入力してください"/></p>
<p>Last name : <input id="lastName" data-bind="value: lastName" title="姓を入力してください"/></p>
<p>Full name : <strong data-bind="text: fullName"></strong></p>
<p><button data-bind='click: registerClick, disable: isEnableRegister'>Search</button></p>
<table id="myTbl"></table>
<div id="myPager"></div><br>
</body>
</html>/*
* アプリケーションのイニシャライザ.
*/
require.config({
// Javascript の Base Url
baseUrl: 'js/lib',
// ライブラリのパスの別名を定義する
paths: {
'app': '../',
'knockout' : 'knockout-3.2.0',
// jQuery 1.7〜, Query UI 1.11〜 は AMD に対応
'jquery' : 'jquery-ui-1.11.3/external/jquery/jquery',
'jqueryui' : 'jquery-ui-1.11.3/jquery-ui.min',
'jqgrid' : 'jquery-grid-4.7.1/jquery.jqGrid.min',
'jqgrid-locale' : 'jquery-grid-4.7.1/i18n/grid.locale-ja'
},
// AMDに対応してないモジュールを読み込む
shim: {
'jqgrid' : ['jquery','jqueryui'],
'jqgrid-locale' : ['jqgrid']
}
});
require(['knockout'
, 'app/knockoutEx3_vmodel'
, 'app/knockoutEx3_model'
, 'jquery', 'jqueryui', 'jqgrid', 'jqgrid-locale', 'domReady!'],
function(ko, vmdl, mdl, $) {
// knockout.js
ko.applyBindings(new vmdl(new mdl()));
// jQuery UI の tooltip
$('input').tooltip({
items: '[title]',
content: function() {
var message = $(this).attr('title');
return '<strong>' + message + '</strong><br/>よろしくお願いします';
}
});
var tbl = $("#myTbl");
tbl.jqGrid({
data: [],
datatype: "local",
colNames: ['顧客番号','名','姓','住所','出生日','年齢','顧客区分'],
colModel: [
{ name: 'id' , index: 'id' , width: 40 , align: 'center', classes: 'tbl_id_class'},
{ name: 'firstName' , index: 'firstName' , width: 50 , align: 'center', classes: 'tbl_txt_class'},
{ name: 'lastName' , index: 'lastName' , width: 50 , align: 'center', classes: 'tbl_txt_class'},
{ name: 'address' , index: 'address' , width: 100 , align: 'center', classes: 'tbl_txt_class'},
{ name: 'born' , index: 'born' , width: 50 , align: 'center', classes: 'tbl_txt_class',
formatter: function (cellValue, option) {
if (!cellValue) {
return "-";
}
var date = new Date(cellValue);
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
}
},
{ name: 'age' , index: 'age' , width: 40, align: 'right' , classes: 'tbl_num_class'},
{ name: 'class' , index: 'class' , width: 40, align: 'right' , classes: 'tbl_txt_class'},
],
rowNum: 10, // デフォルトの 行/ページ
rowList: [10, 20, 50], // 行/ページ セレクトボックスの候補
caption: "Orders", // 表タイトル
height: 250,
width: 700,
shrinkToFit: true, // 画面サイズに合わせて表の大きさを変える
pager: 'myPager', // Pager の id
viewrecords: true, // 行数を pager の右下に表示する。
multiselect: true, // 左側にチェックボックスを作成
});
}
);/*
* アプリケーションの View Model.
*/
define(['knockout', 'jquery'], function(ko, $) {
return function appViewModel(mdl) {
this.firstName = ko.observable(mdl.firstName);
this.lastName = ko.observable(mdl.lastName);
/**
* フルネーム.
*/
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName().toUpperCase();
}, this);
/**
* 検索ボタンクリック時の処理.
*/
this.registerClick = function() {
// View Model を Model に書き戻す
mdl.firstName = this.firstName();
mdl.lastName = this.lastName();
// 検索処理 (本当はサーバーアクセス)
var data = pseudoAjax(mdl);
var tbl = $("#myTbl");
tbl
.jqGrid('clearGridData')
.jqGrid('setGridParam', { data: data })
.trigger('reloadGrid', [{ page: 1}]);
};
/**
* 登録ボタンの有効化フラグ.
*/
this.isEnableRegister = ko.computed(function() {
return '' === this.firstName() || '' === this.lastName();
}, this);
};
});
var STATES = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado"
,"Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois"
,"Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland"
,"Massachusetts","Michigan","Minnesota","Mississippi","Missouri"
,"Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico"
,"New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon"
,"Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee"
,"Texas","Utah","Vermont","Virginia","Washington","West Virginia"
,"Wisconsin","Wyoming"];
var CUSTOMER_CLASS = ["お得意様","優良","普通","要注意","不良"];
function pseudoAjax(mdl) {
var resArray = new Array();
var bornStart = new Date(1970,0,1).getTime();
var now = new Date().getTime();
var bornEnd = now;
var size = 20 + Math.floor(Math.random() * 100);
for (cnt = 0; cnt < size; cnt++) {
var entry = new Object();
entry.id = Math.floor(Math.random() * 10000);
entry.firstName = mdl.firstName;
entry.lastName = mdl.lastName;
entry.address = STATES[Math.floor(Math.random() * STATES.length)];
entry.born = bornStart + Math.floor(Math.random() * (bornEnd - bornStart));
entry.age = Math.floor((now - entry.born) / (365*24*60*60*1000));
entry.class = CUSTOMER_CLASS[Math.floor(Math.random() * CUSTOMER_CLASS.length)];
resArray.push(entry);
}
return resArray;
}/*
* アプリケーションの Model.
*/
define(function() {
return function appModel() {
this.firstName = 'Bert';
this.lastName = 'Simpson';
};
});
