import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@mescius/wijmo.grid';
import { getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
var grid = new wjGrid.FlexGrid('#theGrid', {
autoSearch: true,
isReadOnly: true,
selectionMode: 'ListBox',
autoGenerateColumns: false,
columns: [
{ binding: 'name', header: '国', width: '2*' },
{ binding: 'pop', header: '人口（100万）', format: 'n0,,', width: '*' },
{ binding: 'gdp', header: 'GDP (100万$/年)', format: 'n0', width: '*' },
{ binding: 'pci', header: 'GDP ($/年/人)', format: 'n0', width: '*' },
],
itemsSource: getData()
});
//
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo FlexGrid Searching</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div id="theGrid"></div>
</div>
</body>
</html>
export function getData() {
var countries = [
{ name: "アメリカ合衆国", pop: 320723000, gdp: 17348075 },
{ name: "中国", pop: 1357000000, gdp: 10356508 },
{ name: "日本", pop: 127300000, gdp: 4602367 },
{ name: "ドイツ", pop: 80620000, gdp: 3874437 },
{ name: "イギリス", pop: 64596800, gdp: 2950039 },
{ name: "フランス", pop: 65821885, gdp: 2833687 },
{ name: "ブラジル", pop: 200400000, gdp: 2346583 },
{ name: "イタリア", pop: 60705991, gdp: 2147744 },
{ name: "インド", pop: 1252000000, gdp: 2051228 },
{ name: "ロシア", pop: 143500000, gdp: 1860598 },
{ name: "カナダ", pop: 34482779, gdp: 1785387 },
{ name: "オーストラリア", pop: 24170869, gdp: 1442722 },
{ name: "韓国", pop: 48219000, gdp: 1410383 },
{ name: "スペイン", pop: 46162024, gdp: 1406538 },
{ name: "メキシコ", pop: 122300000, gdp: 1291062 },
{ name: "インドネシア", pop: 249900000, gdp: 888648 },
{ name: "オランダ", pop: 16715489, gdp: 880716 },
{ name: "トルコ", pop: 76667864, gdp: 798332 },
{ name: "サウジアラビア", pop: 27136977, gdp: 746248 },
{ name: "スイス", pop: 8039060, gdp: 703852 },
{ name: "ナイジェリア", pop: 173600000, gdp: 573999 },
{ name: "スウェーデン", pop: 9471174, gdp: 570591 },
{ name: "ポーランド", pop: 38092000, gdp: 547894 },
{ name: "アルゼンチン", pop: 40117096, gdp: 543061 },
{ name: "ベルギー", pop: 10839905, gdp: 534230 },
{ name: "ノルウェー", pop: 5316800, gdp: 499817 },
{ name: "オーストリア", pop: 8419776, gdp: 437582 },
{ name: "イラン", pop: 80117000, gdp: 416490 },
{ name: "タイ", pop: 69519000, gdp: 404824 },
{ name: "アラブ首長国連邦", pop: 8264070, gdp: 399451 },
{ name: "コロンビア", pop: 48389000, gdp: 377867 },
{ name: "南アフリカ", pop: 50586757, gdp: 350082 },
{ name: "デンマーク", pop: 5579204, gdp: 342362 },
{ name: "マレーシア", pop: 28334135, gdp: 338108 },
{ name: "シンガポール", pop: 5183700, gdp: 307872 },
{ name: "イスラエル", pop: 7798600, gdp: 305673 },
{ name: "香港", pop: 7108100, gdp: 290896 },
{ name: "エジプト", pop: 88094000, gdp: 286435 },
{ name: "フィリピン", pop: 98390000, gdp: 284618 },
{ name: "フィンランド", pop: 5394389, gdp: 272649 },
{ name: "チリ", pop: 17248450, gdp: 258017 },
{ name: "アイルランド", pop: 4581269, gdp: 250814 },
{ name: "パキスタン", pop: 191282000, gdp: 246849 },
{ name: "ギリシャ", pop: 10787690, gdp: 237970 },
{ name: "ポルトガル", pop: 10555853, gdp: 229948 },
{ name: "イラク", pop: 32105000, gdp: 223508 },
{ name: "カザフスタン", pop: 16615000, gdp: 216036 },
{ name: "アルジェリア", pop: 36300000, gdp: 213518 },
{ name: "カタール", pop: 1699435, gdp: 210109 },
{ name: "ベネズエラ", pop: 31220000, gdp: 206252 },
{ name: "チェコ", pop: 10542080, gdp: 205270 },
{ name: "ペルー", pop: 29797694, gdp: 202642 },
{ name: "ルーマニア", pop: 21436000, gdp: 199093 },
{ name: "ニュージーランド", pop: 4577100, gdp: 197502 },
{ name: "ベトナム", pop: 89700000, gdp: 185897 },
{ name: "バングラデシュ", pop: 156600000, gdp: 183824 },
{ name: "クウェート", pop: 2818000, gdp: 172608 },
{ name: "ハンガリー", pop: 9985722, gdp: 136989 },
{ name: "ウクライナ", pop: 45668028, gdp: 130660 },
{ name: "アンゴラ", pop: 19618000, gdp: 129326 },
{ name: "モロッコ", pop: 33803400, gdp: 110009 },
{ name: "エクアドル", pop: 14483499, gdp: 100543 },
{ name: "スロバキア", pop: 5437126, gdp: 99869 },
{ name: "オマーン", pop: 2773479, gdp: 77779 },
{ name: "シリア", pop: 23362000, gdp: 77460 },
{ name: "ベラルーシ", pop: 9468000, gdp: 76139 },
{ name: "スリランカ", pop: 20653000, gdp: 74924 },
{ name: "スーダン", pop: 30894000, gdp: 74766 },
{ name: "アゼルバイジャン", pop: 9111100, gdp: 74145 },
{ name: "ルクセンブルク", pop: 511840, gdp: 65683 },
{ name: "ドミニカ共和国", pop: 9378818, gdp: 64058 },
{ name: "ミャンマー", pop: 48337000, gdp: 63135 },
{ name: "ウズベキスタン", pop: 28000000, gdp: 62613 },
{ name: "ケニア", pop: 38610097, gdp: 60937 },
{ name: "グアテマラ", pop: 14713763, gdp: 58728 },
{ name: "ウルグアイ", pop: 3368595, gdp: 57471 },
{ name: "クロアチア", pop: 4290612, gdp: 57073 },
{ name: "ブルガリア", pop: 7364570, gdp: 55824 },
{ name: "エチオピア", pop: 94100000, gdp: 54809 },
{ name: "レバノン", pop: 4259000, gdp: 50028 },
{ name: "スロベニア", pop: 2081660, gdp: 49570 },
{ name: "コスタリカ", pop: 4563539, gdp: 49553 },
{ name: "チュニジア", pop: 10673800, gdp: 48633 },
{ name: "リトアニア", pop: 3207100, gdp: 48288 },
{ name: "タンザニア", pop: 43188000, gdp: 48089 },
{ name: "トルクメニスタン", pop: 5105000, gdp: 47932 },
{ name: "セルビア", pop: 7120666, gdp: 43866 },
{ name: "パナマ", pop: 3405813, gdp: 43777 },
{ name: "イエメン", pop: 23833000, gdp: 43229 },
{ name: "リビア", pop: 6423000, gdp: 41148 },
{ name: "ガーナ", pop: 24233431, gdp: 38616 },
{ name: "コンゴ民主共和国", pop: 67758000, gdp: 35918 },
{ name: "ヨルダン", pop: 6783300, gdp: 35878 },
{ name: "バーレーン", pop: 1234571, gdp: 33862 },
{ name: "コートジボワール", pop: 21395000, gdp: 33741 },
{ name: "ボリビア", pop: 10426154, gdp: 33237 },
{ name: "ラトビア", pop: 2209000, gdp: 31972 },
{ name: "カメルーン", pop: 19406100, gdp: 31777 },
{ name: "パラグアイ", pop: 6337127, gdp: 30220 },
{ name: "トリニダード・トバゴ", pop: 1317714, gdp: 28874 },
{ name: "ウガンダ", pop: 32939800, gdp: 27616 },
{ name: "ザンビア", pop: 13046508, gdp: 26611 },
{ name: "エストニア", pop: 1340194, gdp: 26506 },
{ name: "エルサルバドル", pop: 6227000, gdp: 25164 },
{ name: "キプロス", pop: 803200, gdp: 23263 },
{ name: "アフガニスタン", pop: 32358000, gdp: 20444 },
{ name: "ネパール", pop: 26620809, gdp: 19761 },
{ name: "ホンジュラス", pop: 8215313, gdp: 19511 },
{ name: "ガボン", pop: 1534000, gdp: 18209 },
{ name: "ボスニア・ヘルツェゴビナ", pop: 3843126, gdp: 18165 },
{ name: "ブルネイ", pop: 422700, gdp: 17104 },
{ name: "アイスランド", pop: 318452, gdp: 17036 },
{ name: "パプアニューギニア", pop: 7014000, gdp: 16809 },
{ name: "モザンビーク", pop: 23049621, gdp: 16684 },
{ name: "カンボジア", pop: 13395682, gdp: 16551 },
{ name: "ジョージア", pop: 4469200, gdp: 16536 },
{ name: "セネガル", pop: 12855153, gdp: 15683 },
{ name: "赤道ギニア", pop: 720000, gdp: 15530 },
{ name: "ボツワナ", pop: 2031000, gdp: 15217 },
{ name: "南スーダン", pop: 8260490, gdp: 14304 },
{ name: "チャド", pop: 10329208, gdp: 13945 },
{ name: "ジンバブエ", pop: 12754000, gdp: 13833 },
{ name: "ジャマイカ", pop: 2705800, gdp: 13709 },
{ name: "ナミビア", pop: 2324000, gdp: 13632 },
{ name: "コンゴ共和国", pop: 4140000, gdp: 13552 },
{ name: "アルバニア", pop: 3194972, gdp: 13276 },
{ name: "モーリシャス", pop: 1280924, gdp: 12588 },
{ name: "ブルキナファソ", pop: 15730977, gdp: 12503 },
{ name: "マリ", pop: 14517176, gdp: 12094 },
{ name: "モンゴル", pop: 2736800, gdp: 12037 },
{ name: "ニカラグア", pop: 5815524, gdp: 11806 },
{ name: "ラオス", pop: 6348800, gdp: 11681 },
{ name: "アルメニア", pop: 3266300, gdp: 11644 },
{ name: "マケドニア", pop: 2057284, gdp: 11342 },
{ name: "マダガスカル", pop: 18866000, gdp: 10674 },
{ name: "マルタ", pop: 417617, gdp: 10514 },
{ name: "タジキスタン", pop: 7616000, gdp: 9242 },
{ name: "ハイチ", pop: 10085214, gdp: 8711 },
{ name: "ベナン", pop: 9100000, gdp: 8685 },
{ name: "バハマ", pop: 353658, gdp: 8511 },
{ name: "ニジェール", pop: 15730754, gdp: 8024 },
{ name: "モルドバ", pop: 3560400, gdp: 7962 },
{ name: "ルワンダ", pop: 10412826, gdp: 7897 },
{ name: "キルギス", pop: 5477600, gdp: 7402 },
{ name: "コソボ", pop: 1870981, gdp: 7319 },
{ name: "ギニア", pop: 10217591, gdp: 6707 },
{ name: "マラウイ", pop: 13077160, gdp: 6055 },
{ name: "スリナム", pop: 529000, gdp: 5210 },
{ name: "モーリタニア", pop: 3340627, gdp: 5081 },
{ name: "東ティモール", pop: 1066409, gdp: 4970 },
{ name: "シエラレオネ", pop: 5997000, gdp: 4815 },
{ name: "トーゴ", pop: 5753324, gdp: 4594 },
{ name: "モンテネグロ", pop: 620029, gdp: 4551 },
{ name: "スワジランド", pop: 1203000, gdp: 4416 },
{ name: "バルバドス", pop: 276302, gdp: 4354 },
{ name: "フィジー", pop: 868000, gdp: 4289 },
{ name: "エリトリア", pop: 5415000, gdp: 3858 },
{ name: "ブルンジ", pop: 8575000, gdp: 3094 },
{ name: "ガイアナ", pop: 784894, gdp: 3059 },
{ name: "モルディブ", pop: 317280, gdp: 2885 },
{ name: "レソト", pop: 2194000, gdp: 2220 },
{ name: "リベリア", pop: 3476608, gdp: 2013 },
{ name: "ブータン", pop: 708265, gdp: 1983 },
{ name: "カーボベルデ", pop: 491575, gdp: 1858 },
{ name: "サンマリノ", pop: 32093, gdp: 1786 },
{ name: "中央アフリカ共和国", pop: 4487000, gdp: 1726 },
{ name: "ベリーズ", pop: 312698, gdp: 1699 },
{ name: "ジブチ", pop: 818159, gdp: 1589 },
{ name: "セーシェル", pop: 90945, gdp: 1423 },
{ name: "セントルシア", pop: 166526, gdp: 1404 },
{ name: "アンティグア・バーブーダ", pop: 89138, gdp: 1248 },
{ name: "ソロモン諸島", pop: 542287, gdp: 1155 },
{ name: "ギニアビサウ", pop: 1520830, gdp: 1111 },
{ name: "グレナダ", pop: 110821, gdp: 912 },
{ name: "セントクリストファー・ネイビス", pop: 51970, gdp: 852 },
{ name: "サモア", pop: 184032, gdp: 827 },
{ name: "ガンビア", pop: 1776000, gdp: 824 },
{ name: "バヌアツ", pop: 234023, gdp: 822 },
{ name: "セントビンセントおよびグレナディーン諸島", pop: 100892, gdp: 729 },
{ name: "コモロ", pop: 754000, gdp: 697 },
{ name: "ドミニカ国", pop: 71685, gdp: 524 },
{ name: "トンガ", pop: 105000, gdp: 438 },
{ name: "サントメ・プリンシペ", pop: 169000, gdp: 338 },
{ name: "ミクロネシア連邦", pop: 102624, gdp: 308 },
{ name: "パラオ", pop: 21000, gdp: 249 },
{ name: "マーシャル諸島", pop: 54305, gdp: 193 },
{ name: "キリバス", pop: 101000, gdp: 181 },
{ name: "ツバル", pop: 10000, gdp: 38 }
];
//
// calculate the per-capita income and add that to each data point
countries.forEach(function (country) {
country.pci = country.gdp / country.pop * 1e6; // US$/year/capita
});
//
return countries;
}
.wj-flexgrid {
max-height: 250px;
margin-bottom: 12px;
}
.header {
display: inline-block;
width: 150px;
text-align: right;
font-weight: normal;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'jszip': 'npm:jszip/dist/jszip.js',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js',
'@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js',
'@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js',
'@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js',
'@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js',
'@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js',
'@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js',
'@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js',
'@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js',
'@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js',
'@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js',
'@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js',
'@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js',
'@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js',
'@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js',
'@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js',
'@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js',
'@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js',
'@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js',
'@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js',
'@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js',
'@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js',
'@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js',
'@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js',
'@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js',
'@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js',
'@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js',
'@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js',
'@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js',
'@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js',
'@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js',
'@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js',
'@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js',
'@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js',
'@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js',
'@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js',
'@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js',
'@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js',
'@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
