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'; }; });