これは何?

サンプル・アプリケーション

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /KnockoutExam/knockoutEx3_Ko+jqGrid.html


Search ボタンを押すと、jqGrid にデータが表示される

View

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutEx3_Ko%2BjqGrid.html

<!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>

Init

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx3_init.js

/*
 * アプリケーションのイニシャライザ.
 */
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, // 左側にチェックボックスを作成
    });
  }
);

ViewModel?

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx3_vmodel.js

/*
 * アプリケーションの 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

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx3_model.js

/*
 * アプリケーションの Model.
 */
define(function() {
  return function appModel() {
    this.firstName = 'Bert';
    this.lastName = 'Simpson';
  };
});


HTML#Knockout


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-02-19 (木) 02:19:34 (653d)
ISBN10
ISBN13
9784061426061