VB.NET-TIPS などプログラミングについて

2020/04/09

JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録（save）

前回は w2ui.grid の外部データを指示するプロパティである url ついて説明をしました。

⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み（url）

今回は url の save プロパティにPHPプログラムを指定することでデータ登録ができる例を紹介したいと思います。
尚、最初の読込ファイルは以下の様に以前のものと同様です。

■JSON 形式のテストデータ(data-get.json)

{
  records: [
    { recid: 1, fname: "John"   , lname: "Doe"    , email: "jdoe@gmail.com", sdate: "2020/03/01" },
    { recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" },
    { recid: 3, fname: "Jin"    , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" },
    { recid: 4, fname: "Susan"  , lname: "Ottie"  , email: "sott@gmail.com", sdate: "2020/03/24" },
    { recid: 5, fname: "Kelly"  , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" },
    { recid: 6, fname: "Francis", lname: "Gatos"  , email: "fgat@gmail.com", sdate: "2020/03/26" },
    { recid: 7, fname: "Mark"   , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" },
    { recid: 8, fname: "Thomas" , lname: "Bahh"   , email: "tbah@gmail.com", sdate: "2020/03/28" }
  ]
}

それでは records 部分を url にて JSON ファイルを指定したソースを示します。

■url プロパティによる JSON ファイルを指定について

<!DOCTYPE html>
<html>
<head>
  <title>w2ui Grid-3</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
  <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
  <div id="grid" style="width: 500px; height: 200px;"></div>

<script>
$(function () {
  // id="grid" へのグリッド設定
  $('#grid').w2grid({ 
    name: 'grid', 
    method: 'GET', 
    columns: [
      { field: 'fname', caption: 'First Name', size: '30%' },
      { field: 'lname', caption: 'Last Name' , size: '30%' },
      { field: 'email', caption: 'Email'     , size: '40%' },
      { field: 'sdate', caption: 'Start Date', size: '100px' }
    ],
    url: {
      get:    'data-get.json',
      remove: 'save.php',
      save:   'save.php'
    }
  });  
});
</script>
</body>
</html>

■save.php プログラム

<?php
//  PHP 5.5.0 未満のため「array_column」宣言
if (!function_exists('array_column')) {
    //  「array_column」宣言
    function array_column($arr, $strKey) {
        $arrOut = array();
        for ($i = 0; $i <= count($arr); $i++) {
            if (isset($arr[$i][$strKey])) {
                $arrOut[] = $arr[$i][$strKey];
            }
        }
        return  $arrOut;
    }
}

//  リクエスト取得
$arrReq = json_decode($_GET['request'], true);
$strJsonFile = 'data-get.json';

//  動作による処理
switch ($arrReq['action']) {
    case 'save':
        //  変更データ存在チェック
        if (!isset($arrReq['changes'][0])){
            break;
        }
        //  データJSONファイル
        $strJson = file_get_contents($strJsonFile);
        $arrData = json_decode($strJson, true);

        //  recid列の配列(KEY:0からの連番)
        $arrRecid = array_column($arrData["records"], "recid");
        //  変更データ('changes')に従って処理
        for ($i = 0; $i <= count($arrReq['changes']) - 1; $i++) {
            $intRecid = -1;
            //  'changes'内の1個のデータ処理
            foreach ($arrReq['changes'][$i] as $key => $value) {
                if ($key == "recid") {
                    $intRecid = $value; //  "recid"の退避
                    continue;
                }
                if ($intRecid >= 0) {
                    //  "recid"の存在するIndex検索
                    $intIdx = array_search($intRecid, $arrRecid);
                    //  データ配列への書込
                    $arrData["records"][$intIdx][$key] = $value;
                }
            }
        }
        //  JSON文字列生成
        $strJson = json_encode($arrData, JSON_UNESCAPED_UNICODE);
        //  テキストファイル書込(data-get.json)
        file_put_contents($strJsonFile , $strJson);
        break;
}
?>

最初の HTML ファイルを実行し、以下の図の Save ボタンをクリックすると data-get.json が変更され、ページの再読込を行うと変更した値になるはずです。

上記は Save 処理のみのプログラムですが remove 処理も含めると以下の様になります。行を複数選択して Delete ボタンをクリックすると以下の様に "recid" が配列で複数渡されます。

Array
(
    [request] => {"action":"delete","recid":[3,4]}
)

これを加味してソースを修正します。

■save.php プログラム(削除処理も含む)

<?php
//  PHP 5.5.0 未満のため「array_column」宣言
if (!function_exists('array_column')) {
    //  「array_column」宣言
    function array_column($arr, $strKey) {
        $arrOut = array();
        for ($i = 0; $i <= count($arr); $i++) {
            if (isset($arr[$i][$strKey])) {
                $arrOut[] = $arr[$i][$strKey];
            }
        }
        return  $arrOut;
    }
}

//  リクエスト取得
$arrReq = json_decode($_GET['request'], true);
$strJsonFile = 'data-get.json';

//  データJSONファイル
$strJson = file_get_contents($strJsonFile);
$arrData = json_decode($strJson, true);

//  動作による処理
switch ($arrReq['action']) {
    case 'save':
        //  変更データ存在チェック
        if (!isset($arrReq['changes'][0])){
            break;
        }
        //  recid列の配列(KEY:0からの連番)
        $arrRecid = array_column($arrData["records"], "recid");
        //  変更データ('changes')に従って処理
        for ($i = 0; $i <= count($arrReq['changes']) - 1; $i++) {
            $intRecid = -1;
            //  'changes'内の1個のデータ処理
            foreach ($arrReq['changes'][$i] as $key => $value) {
                if ($key == "recid") {
                    $intRecid = $value; //  "recid"の退避
                    continue;
                }
                if ($intRecid >= 0) {
                    //  "recid"の存在するIndex検索
                    $intIdx = array_search($intRecid, $arrRecid);
                    //  データ配列への書込
                    $arrData["records"][$intIdx][$key] = $value;
                }
            }
        }
        //  JSON文字列生成
        $strJson = json_encode($arrData, JSON_UNESCAPED_UNICODE);
        //  テキストファイル書込(data-get.json)
        file_put_contents($strJsonFile , $strJson);
        break;

    case 'delete':  //    [request] => {"action":"delete","recid":[3,4]}
        //  recid列の配列(KEY:0からの連番)
        $arrRecid = array_column($arrData["records"], "recid");

        foreach ($arrReq['recid'] as $value) {

            //  "recid"の存在するIndex検索
            $intIdx = array_search($value, $arrRecid);
            //  データ配列削除
            unset($arrData["records"][$intIdx]);
        }
        $arrData["records"] = array_values($arrData["records"]);
        $arrData["total"]   = count($arrData["records"]);
        //  JSON文字列生成
        $strJson = json_encode($arrData, JSON_UNESCAPED_UNICODE);
        //  テキストファイル書込(data-get.json)
        file_put_contents($strJsonFile , $strJson);
        break;
}
?>

今回はテキストファイルに対する登録、削除処理でしたが、実際にはデータベースに対しての処理になると思います。

JavaScript
0CM

2020/04/03

JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データの取り込み（url）

今回は w2ui.grid の外部データを指示するプロパティである url ついて説明をします。
最初の紹介ページでのデータ宣言している部分を外部ファイルとして読込ませます。

⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介

ファイルは JSON 形式で記述します。上記のページの records プロパティの部分を JSON ファイルとして作成します。
ファイルの中身は以下の様になります。（records を { } で囲みます。尚、ファイルの文字コードは UTF-8 です。）

{
  records: [
    { recid: 1, fname: "John"   , lname: "Doe"    , email: "jdoe@gmail.com", sdate: "2020/03/01" },
    { recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" },
    { recid: 3, fname: "Jin"    , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" },
    { recid: 4, fname: "Susan"  , lname: "Ottie"  , email: "sott@gmail.com", sdate: "2020/03/24" },
    { recid: 5, fname: "Kelly"  , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" },
    { recid: 6, fname: "Francis", lname: "Gatos"  , email: "fgat@gmail.com", sdate: "2020/03/26" },
    { recid: 7, fname: "Mark"   , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" },
    { recid: 8, fname: "Thomas" , lname: "Bahh"   , email: "tbah@gmail.com", sdate: "2020/03/28" }
  ]
}

それでは records 部分を url にて JSON ファイルを指定したソースを示します。

■url プロパティによる JSON ファイルを指定について

<!DOCTYPE html>
<html>
<head>
  <title>w2ui Grid-1</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
  <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
  <div id="grid" style="width: 500px; height: 200px;"></div>

<script>
$(function () {
  // id="grid" へのグリッド設定
  $('#grid').w2grid({ 
    name: 'grid', 
    columns: [
      { field: 'fname', caption: 'First Name', size: '30%' },
      { field: 'lname', caption: 'Last Name' , size: '30%' },
      { field: 'email', caption: 'Email'     , size: '40%' },
      { field: 'sdate', caption: 'Start Date', size: '100px' }
    ],
    url: 'data.json'
  });  
});
</script>
</body>
</html>

これを実行させると以下の様な表示になります。（特に最初の紹介ページの表示と変わりはありません）

この url はグリッドが、リフレッシュ、検索、レコードのソートの各処理が行われた時にしていされた url で指定されたファイルからデータが取得されて表示されます。データを保存する場合があれば、同じく url で指定されたファイルに登録されます。

更に、レコードの取得、削除、登録において別のファイル名などを指定する場合は url の内部プロパティである get , remove , save を指定します。

■url プロパティによるレコードの取得、削除、登録を指定

<!DOCTYPE html>
<html>
<head>
  <title>w2ui Grid-1</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
  <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
  <div id="grid" style="width: 500px; height: 200px;"></div>

<script>
$(function () {
  // id="grid" へのグリッド設定
  $('#grid').w2grid({ 
    name: 'grid', 
    columns: [
      { field: 'fname', caption: 'First Name', size: '30%' },
      { field: 'lname', caption: 'Last Name' , size: '30%' },
      { field: 'email', caption: 'Email'     , size: '40%' },
      { field: 'sdate', caption: 'Start Date', size: '100px' }
    ],
    url: {
      get:    'data-get.json',
      remove: 'data-remove.json',
      save:   'datas-save.json'
    }
  });  
});
</script>
</body>
</html>

この方法で上手くいくかと思ったのですが、remove , save のところで json ファイル指定はできない様です。以下のソースの様に PHP ファイルに制御を渡して、 $_GET['request'] の中を調べてデータ処理をすることになります。

<!DOCTYPE html>
<html>
<head>
  <title>w2ui Grid-2 url2</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
  <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
  <div id="grid" style="width: 500px; height: 200px;"></div>

<script>
$(function () {
  // id="grid" へのグリッド設定
  $('#grid').w2grid({ 
    name: 'grid', 
    method: 'GET', 
    columns: [
      { field: 'recid', caption: 'ID', size: '50px' },
      { field: 'fname', caption: 'First Name', size: '30%' , editable: { type: 'text' } },
      { field: 'lname', caption: 'Last Name' , size: '30%' },
      { field: 'email', caption: 'Email'     , size: '40%' },
      { field: 'sdate', caption: 'Start Date', size: '100px' }
    ], 
    url: {
      get:    'data-get.json',
      remove: 'remove.php',
      save:   'save.php'
    },
    show : {
      toolbar : true,
      toolbarDelete : true,
      toolbarSave : true,
      searchAll : false
    }
  });
});
</script>
</body>
</html>

このソースを表示し、グリッドの Save ボタンをクリックすると変更個所の情報が PHP プログラムに送られます。

■save.php プログラム

<?php
$results = print_r($_GET, true);
file_put_contents("save.json", $results);
?>

■save.json ファイルの内容

Array
(
    [request] => {"changes":[{"recid":3,"fname":"Jin111"},{"recid":4,"fname":"Susan222"}],"action":"save"}
)

変更の在った recid と変更したカラム名とその値が送られてくるので、それを使って実際のデータを更新処理することになります。

グリッドの行を選択し Delete ボタンをクリックすると削除個所の情報が PHP プログラムに送られます。

■remove.php プログラム

<?php
$results = print_r($_GET, true);
file_put_contents("remove.json", $results);
?>

■remove.json ファイルの内容

Array
(
    [request] => {"action":"delete","recid":[1]}
)

削除の在った recid が送られてくるので、それを使って実際のデータを削除処理することになります。

JavaScript
0CM

2020/04/02

JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介

今回から複数回に渡り JavaScript のデータグリッドコンポーネントである w2ui ついて説明をします。
最近仕事で使うことになったので、簡単な使い方から初めて、いろいろな使い方について紹介していきたいと思います。

w2ui ですが見た目もなかなかな感じで HTML タグの table では表現が難しいものも簡単な指定で可能になります。

それでは簡単な例を以下に示します。

<!DOCTYPE html>
<html>
<head>
  <title>w2ui Grid-1</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
  <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
  <div id="grid" style="width: 500px; height: 200px;"></div>

<script>
$(function () {
  // id="grid" へのグリッド設定
  $('#grid').w2grid({ 
    name: 'grid', 
    columns: [
      { field: 'fname', caption: 'First Name', size: '30%' },
      { field: 'lname', caption: 'Last Name' , size: '30%' },
      { field: 'email', caption: 'Email'     , size: '40%' },
      { field: 'sdate', caption: 'Start Date', size: '100px' }
    ],
    records: [
      { recid: 1, fname: "John"   , lname: "Doe"    , email: "jdoe@gmail.com", sdate: "2020/03/01" },
      { recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" },
      { recid: 3, fname: "Jin"    , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" },
      { recid: 4, fname: "Susan"  , lname: "Ottie"  , email: "sott@gmail.com", sdate: "2020/03/24" },
      { recid: 5, fname: "Kelly"  , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" },
      { recid: 6, fname: "Francis", lname: "Gatos"  , email: "fgat@gmail.com", sdate: "2020/03/26" },
      { recid: 7, fname: "Mark"   , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" },
      { recid: 8, fname: "Thomas" , lname: "Bahh"   , email: "tbah@gmail.com", sdate: "2020/03/28" }
    ]
  });  
});
</script>
</body>
</html>

グリッドの領域を div タグで宣言し、その領域に対して w2ui の1つの機能である w2grid を設定してやります。 w2grid への引数は1個のオブジェクトとして宣言したものを渡してやります。そのオブジェクトの中に、グリッド用の各種のプロパティを宣言します。
上記の例ではカラムの宣言である columns プロパティと、表示データの中身である records プロパティを宣言します。それぞれのプロパティはオブジェクトの配列として設定します。さらに columns 、 records ともそれぞれ専用のプロパティで宣言します。

これを実行させると以下の様な表示になります。（結構簡単にグリッドによるデータ表示が実現できると思います）

■columns プロパティのオブジェクト配列の内部プロパティについて

プロパティ名	説明	備考
caption	カラムのキャプション	デフォルト:''
field	レコードのフィールド名	デフォルト:''
size	カラムの幅 px OR ％	数値のみは px
min	カラムの最小幅 px	デフォルト:15
max	カラムの最大幅 px
hidden	非表示カラムの指定	デフォルト:false
render	表示文字列 OR レンダリング関数	レンダリング関数: render(function(record, [index], [column_index])) を宣言できる <例:> 　render: function (record) { 　　return '<div>'+record.fname+' '+record.lname+'</div>'; 　}
editable	編集可能フィールドの指定	オブジェクトとして指定するオブジェクトのプロパティとして type , min , max などがある <例:> 　editable: { type:"int", min: 0, max: 999 }
frozen	左固定列の指定

columns 用プロパティは他にもありますが、以上が重要なプロパティです。尚、editable は内部にプロパティを持つので、以下にその代表的なものを示します。

■editable の内部プロパティについて

プロパティ名	説明	備考
type	フィールドの型宣言	型には以下のものがあります int :整数型 float :実数型 hex :16進数 currency :通貨型 alphaNumeric :英数字 date :日付型 check :チェックボックス select :ドロップダウンリスト
min	入力最小値
max	入力最大値

■w2ui のダウンロードについて

w2ui をダウンロードするには以下のサイトにアクセスして下さい。
⇒https://github.com/vitmalina/w2ui

該当のサイトを開いてから、「Clone or download」の緑色のボタンをクリックしてダウンロードします。

ダウンロードしたソースには各種デモが入っていますので、テストしてみてはいかがでしょうか。

尚、今後はいろんな使い方をご紹介したいと思います。

JavaScript
0CM

2020/03/31

JavaScript 配列と Object.keys 、Object.values 及び Object.entries について

配列及び連想配列にはそれぞれキーを持っていて、対応する値を管理しています。
そのキーの一覧を取得するためには標準オブジェクトである Object の Object.keys() メソッドを使用します。
Object.keys() メソッドは、指定されたオブジェクトが持つプロパティの名前の配列を、通常のループで取得するのと同じ順序で返します。それでは、以下にの例を示します。

■配列のキー一覧取得（Object.keys）

    var arrTest;
    var arrKeys;

    //  単純な配列
    arrTest = ['a', 'b', 'c'];
    arrKeys = Object.keys(arrTest);
    console.log(arrKeys);

    //  オブジェクトのような配列
    arrTest = { 0: 'abcdefg', 1: 123, 2: true };
    arrKeys = Object.keys(arrTest);
    console.log(arrKeys);

    //  key定義がランダムな配列
    arrTest = { 100: 'abcdefg',  5: 123, 10: true };
    arrKeys = Object.keys(arrTest);
    console.log(arrKeys);

    //  key定義がランダムな配列２
    arrTest = { aaa: 'abcdefg',  100: 123, 20: 45, cc:'10', bb: true };
    arrKeys = Object.keys(arrTest);
    console.log(arrKeys);

結果をコンソールに表示していますので、ブラウザの開発環境を開いてコンソール出力を表示させます。ブラウザにより少し違いがありますが、以下の様な結果が表示されるはずです。

Array(3) [ "0", "1", "2" ]
Array(3) [ "0", "1", "2" ]
Array(3) [ "5", "10", "100" ]
Array(5) [ "20", "100", "aaa", "cc", "bb" ]

ここで注意するのは key が昇順でソートされて返されるところです。数値と文字列が混在した場合には、数値はソートされ、文字列は発生した順番の様です。

キーの一覧取得には Object.keys() メソッドを使用するのですが、キーの示す値の取得にはそれに対応する Object.values() メソッドを使用することになります。

上のソースを少し変更したものを以下に示します。

■配列の値一覧取得（Object.values）

    var arrTest;
    var arrVals;

    //  単純な配列
    arrTest = ['a', 'b', 'c'];
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  オブジェクトのような配列
    arrTest = { 0: 'abcdefg', 1: 123, 2: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  key定義がランダムな配列
    arrTest = { 100: 'abcdefg',  5: 123, 10: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  key定義がランダムな配列２
    arrTest = { aaa: 'abcdefg',  100: 123, 20: 45, cc:'10', bb: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

結果は以下の通りです。先ほどのキーの出力順番通りキーに対応する値が出力されています。

Array(3) [ "a", "b", "c" ]
Array(3) [ "abcdefg", 123, true ]
Array(3) [ 123, true, "abcdefg" ]
Array(5) [ 45, 123, "abcdefg", "10", true ]

この Object.values() メソッドですが、 FireFox 、Chrome 、Edge などは対応していますが IE(Internet Explorer) は対応していません。これを実行すると「オブジェクトは 'values' プロパティまたはメソッドをサポートしていません。」のエラーが表示されるはずです。
IE を対象外とはまだできないと思いますので、Object.values() メソッドを作ってみたいと思います。

■ IE(Internet Explorer) で Object.values() メソッドをエミュレート

function EmulateObjectValues() {
    if(!Object.values) {
        //  「Object.values」の定義が存在しない場合、関数生成
        Object.values = function(obj) {
            //  戻り値の配列
            var arr = new Array();
            //  [obj]の中のキー値の一覧
            for(var key in obj) {
                //  [obj]の中の値を配列に設定
                arr.push(obj[key]);
            }
            //  配列を戻す
            return (arr);
        }
    }
}

この関数は Object.values() メソッドが存在しない場合にメソッドの関数を生成する様にしています。この関数を Object.values() メソッドを使用する前にコールする様にします。上のソースにこの関数をコールする様にした例を示します。

■Object.values() メソッドのエミュレート関数をコールする

    var arrTest;
    var arrVals;

    //  エミュレート関数生成をコール
    EmulateObjectValues();

    //  単純な配列
    arrTest = ['a', 'b', 'c'];
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  オブジェクトのような配列
    arrTest = { 0: 'abcdefg', 1: 123, 2: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  key定義がランダムな配列
    arrTest = { 100: 'abcdefg',  5: 123, 10: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  key定義がランダムな配列２
    arrTest = { aaa: 'abcdefg',  100: 123, 20: 45, cc:'10', bb: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

これを実行すると上の方の実行結果と同じになるはずです。

Object.values() に関連したメソッドとして Object.entries() が有りますが、このメソッドも IE(Internet Explorer) は対応していませんので、これのエミュレート関数を作成してみます。

■Object.entries() メソッドのエミュレート関数

function EmulateObjectEntries() {
    if(!Object.entries) {
        //  「Object.entries」の定義が存在しない場合、関数生成
        Object.entries = function(obj) {
            //  戻り値の配列
            var arr = new Array();
            //  [obj]の中のキー値の一覧
            for(var key in obj) {
                //  子のオブジェクトに設定
                var objSub = {};
                objSub[key] = obj[key];
                arr.push(objSub);
            }
            //  配列を戻す
            return (arr);
        }
    }
}

これを実行するソースは以下の様になります。

    var arrTest;
    var arrEnts;

    //  エミュレート関数生成をコール
    EmulateObjectEntries();

    //  key定義がランダムな配列２
    arrTest = { aaa: 'abcdefg',  100: 123, 20: 45, cc:'10', bb: true };
    arrEnts = Object.entries(arrTest);
    console.log(arrEnts);

以下に IE 及び FireFox での実行結果（コンソール画面）の表示を示します。

■Object.entries() IEでの実行結果

■Object.entries() FireFoxでの実行結果

JavaScript
0CM

2020/03/25

数値データを指定書式で文字列に変換する（ToString , String.Format）

数値データを表示するために各種の書式の文字列に変換することはよくあります。各データ型が持つ ToString メソッドを使えば以下の様な感じでできます。

Console.WriteLine((12345).ToString("C"))            '¥12,345  と表示
Console.WriteLine((12345).ToString("D8"))           '00012345 と表示
Console.WriteLine((1234.567).ToString("00000.00"))  '01234.57 と表示

上の (12345) の部分は文字列 "12345" を Integer型 データとして変換されます。また (1234.567) の部分は文字列 "1234.567" を Double型 データとして変換され、それぞれの ToString メソッドが呼ばれます。

ToString メソッドの引数の文字列には各種存在し、「標準の数値書式指定文字列」と「カスタム数値書式指定文字列」の2種類がありますので、順を追って説明します。

「標準の数値書式指定文字列」について
「カスタム数値書式指定文字列」について
「複合書式指定文字列」について

■「標準の数値書式指定文字列」について

次の表に、標準の数値書式指定文字列の説明および書式指定子ごとのサンプル出力を示します。

書式指定子	名称	対象データ型	結果	精度指定子	サンプル
"C" or "c"	通貨型	全ての数値型	通貨値	小数部の桁数	(123.456).ToString("C") = ¥123 (-123.456).ToString("C3") = -¥123.456
"D" or "d"	Decimal	整数型のみ	必要に応じて負の符号が付く整数と小数	最小桁数	(1234).ToString("D") = 1234 (-1234).ToString("D6") = -001234
"E" or "e"	指数	全ての数値型	指数表記	小数部の桁数	(123.456).ToString("E") = 1.234560E+002 (0.12345).ToString("e3") = 1.235e-001
"F" or "f"	固定小数点	全ての数値型	必要に応じて負の符号が付く整数と小数	小数部の桁数	(1234.567).ToString("F") = 1234.57 (1234).ToString("F1") = 1234.0 (-1234.56).ToString("F3") = -1234.560
"G" or "g"	全般	全ての数値型	固定小数点表記or 指数表記の何れか簡潔な形式	有効桁数	(-123.456).ToString("G") = -123.456 (123.4546).ToString("G4") = 123.5 (-1.23456E-25).ToString("G") = -1.23456E-25
"P" or "p"	ﾊﾟｰｾﾝﾄ	全ての数値型	数値に 100 を掛けて％記号を付けて表示	小数部の桁数	(1).ToString("P") = 100.00 % (-0.39678).ToString("P1") = -39.7 %
"X" or "x"	16進数	整数型のみ	16進数文字列	結果文字列の桁数	(255).ToString("X") = FF (-1).ToString("X") = FFFFFFFF (255).ToString("x4") = 00ff (1000).ToString("X4") = 03E8

書式指定子は上記の様にたくさんありますが、実際に使ったものとなると "C" と "D" ぐらいです。指数表記は科学計算で必要になるぐらいで、私はあまり使った記憶がありません。
尚、以下のソースで簡単な例を示します。

    Private Sub btnTest_Click(sender As Object, e As EventArgs) Handles btnTest.Click
        '「Double」型データ
        Dim dbTest As Double = 0.0
        '「Long」型データ
        Dim lngTest As Long = 0

        '標準の数値書式指定文字列「C,c」
        Console.WriteLine("標準の数値書式指定文字列「C,c」")
        dbTest = 123
        Console.WriteLine(dbTest.ToString("C"))
        dbTest = 123.56
        Console.WriteLine(dbTest.ToString("C"))
        dbTest = 123.456
        Console.WriteLine(dbTest.ToString("C2"))
        dbTest = -123.56
        Console.WriteLine(dbTest.ToString("C"))

        '標準の数値書式指定文字列「D,d」
        Console.WriteLine("標準の数値書式指定文字列「D,d」")
        lngTest = 123
        Console.WriteLine(lngTest.ToString("D"))
        Console.WriteLine(lngTest.ToString("D5"))
        lngTest = -123
        Console.WriteLine(lngTest.ToString("D6"))
    End Sub

実行結果がコンソールには以下様に表示されます。

標準の数値書式指定文字列「C,c」
\123
\124
\123.46
-\124
標準の数値書式指定文字列「D,d」
123
00123
-000123

■「カスタム数値書式指定文字列」について

次の表に、カスタム数値書式指定文字列の説明および書式指定子ごとのサンプル出力を示します。（よく使うものをピックアップしてあります）

書式指定子	名称	説明	サンプル
"0"	ゼロプレースホルダー	対応する数字でゼロを置き換えます。置き換えが行われるのは対応する数字が存在する場合です。それ以外の場合は結果の文字列にはゼロが表示されます。	(1234).ToString("00000") = "01234" (-1.23).ToString("000.000") = "-001.230" (123.456).ToString("00.00") = "123.46"
"#"	桁プレースホルダー	対応する数字で "#" 記号を置き換えます。置き換えが行われるのは対応する数字が存在する場合です。それ以外の場合は結果の文字列に数字は表示されません。	(1234).ToString("00000") = "01234" (-1.23).ToString("000.000") = "-001.230" (123.456).ToString("00.00") = "123.46"
"."	小数点	結果の文字列の小数点位置を決定します。	(123.45).ToString("0.0") = "123.5" (-1.2).ToString("00.00") = "-01.20"
","	桁区切り数値位取り	(0 または #) の間に1つ以上の "," が在る場合は桁区切り記号が挿入。数値位取りとしては指定された "," ごとに数値を 1000 で除算します。	(123456).ToString("#,0") = "123,456" (1678).ToString("0,") = "2" (123456789).ToString("0,,") = "123"
";"	セクション区切り	正、負、ゼロの数値に対して別々の書式指定文字列でセクションを定義します。 2セクション: ・最初のセクションが正の値とゼロに適用・2番目のセクションが負の値に適用 3セクション: ・最初のセクションが正の値に適用・2番目のセクションが負の値に適用・3番目のセクションがゼロに適用	(12.345).ToString("#0.0#;(#0.0#);-\0-") = "12.35" (0).ToString("#0.0#;(#0.0#);-\0-") = "-0-" (-12.345).ToString("#0.0#;(#0.0#);-\0-") = "(12.35)"
"%"	パーセントプレースホルダー	数値に 100 を乗算し結果の文字列にパーセント記号を挿入します。	(0.3697).ToString("%#0.00") = %36.97
'文字列'	リテラル文字列区切り	囲まれた文字列が結果の文字列にそのまま出力される。	(0.3697).ToString("'P:'%#0.00") = P:%36.97

尚、上記の例を以下のソースで示します。

    Private Sub btnTest_Click(sender As Object, e As EventArgs) Handles btnTest.Click
        '「Double」型データ
        Dim dbTest As Double

        'カスタム数値書式指定文字列["0"]
        Console.WriteLine("カスタム数値書式指定文字列[""0""]")
        dbTest = 123
        Console.WriteLine(dbTest.ToString("00000"))
        dbTest = 123.456
        Console.WriteLine(dbTest.ToString("00000.00"))
        dbTest = -123.56
        Console.WriteLine(dbTest.ToString("00000.00"))

        'カスタム数値書式指定文字列["#"]
        Console.WriteLine("カスタム数値書式指定文字列[""#""]")
        dbTest = 123
        Console.WriteLine(dbTest.ToString("#####"))
        dbTest = 123.456
        Console.WriteLine(dbTest.ToString("#####.##"))
        dbTest = -123.56
        Console.WriteLine(dbTest.ToString("#####.##"))

        'カスタム数値書式指定文字列[";"]
        Console.WriteLine("カスタム数値書式指定文字列["";""]")
        dbTest = 123
        Console.WriteLine(dbTest.ToString("#####;[#####];'ZERO'"))
        dbTest = 0
        Console.WriteLine(dbTest.ToString("#####;[#####];'ZERO'"))
        dbTest = -123.56
        Console.WriteLine(dbTest.ToString("#####.##;[#####.##];'ZERO'"))

        '最後に複合的な使い方
        Console.WriteLine("最後に複合的な使い方")
        dbTest = 12345678.123
        Console.WriteLine(dbTest.ToString("'テストデータ：'#,0.00"))
    End Sub

実行結果がコンソールには以下様に表示されます。

セクション区切りを使用して1個の書式文字列で、正、負、ゼロで別々の書式が指定できますので、数値を判断して個別に処理を分けなくてもよくなります。

カスタム数値書式指定文字列["0"]
00123
00123.46
-00123.56
カスタム数値書式指定文字列["#"]
123
123.46
-123.56
カスタム数値書式指定文字列[";"]
123
ZERO
[123.56]
最後に複合的な使い方
テストデータ：12,345,678.12

■「複合書式指定文字列」について

複合書式指定文字列とは、出力される固定文字列の中に挿入されるべきデータ用のプレースホルダーを記入したものです。このプレースホルダーはインデックス化されていて、「0」から順に番号が振られます。
この複合書式指定文字列を引数として使えるメソッドに String.Format や Console.WriteLine などがあります。複合書式指定文字列の引数の後ろに、プレースホルダーに対応する出力したいデータを記述します。

この説明ではよく分からないので、以下の例を見てください。
{ } で囲まれた数字がインデックスで、対応するデータの引数の位置を示しているのが分かります。

    Private Sub btnTest_Click(sender As Object, e As EventArgs) Handles btnTest.Click
        Dim intData As Integer = 10
        Dim lngData As Long = 1000
        Dim dblData As Double = 123.45
        Console.WriteLine("Integer:{0}, Long:{1}, Double:{2}", intData, lngData, dblData)
    End Sub

実行結果がコンソールには以下様に表示されます。

Integer:10, Long:1000, Double:123.45

尚、プレースホルダーの書式は以下の様になっています。

<プレースホルダー書式>
{ index [,alignment] [:formatString] }

・index：パラメーター指定子とも呼ばれ、
         オブジェクトのリスト内で対応する項目を識別するための 0 から始まる数値です。 
・[,alignment]：書式設定フィールドの幅を指定する符号付き整数です。
         フィールド内の書式設定されたデータは、alignment が正の場合は右揃え、
         alignment が負の場合は左揃えされます。 埋め込みが必要な場合は、空白が使用されます。

・[:formatString]：書式設定されるオブジェクトの種類に適した書式指定文字列です。
        「標準の数値書式指定文字列」「カスタム数値形式文字列」が指定できます。

プレースホルダーの書式にいろいろ付け加えて、上記のソースを以下の様にしました。

    Private Sub btnTest_Click(sender As Object, e As EventArgs) Handles btnTest.Click
        Dim intData As Integer = 10
        Dim lngData As Long = 1000
        Dim dblData As Double = 123.45
        Console.WriteLine("Integer:{0,7:0.00}, Long:{1,-6:#,0}, Double:{2,10:###0.000}", _
                          intData, lngData, dblData)
    End Sub

実行結果がコンソールには以下様に表示されます。

Integer:  10.00, Long:1,000 , Double:   123.450

■JSON 形式のテストデータ(data-get.json)

■url プロパティによる JSON ファイルを指定について

■save.php プログラム

■save.php プログラム(削除処理も含む)

■url プロパティによる JSON ファイルを指定について

■url プロパティによるレコードの取得、削除、登録を指定

■save.php プログラム

■save.json ファイルの内容

■remove.php プログラム

■remove.json ファイルの内容

■columns プロパティのオブジェクト配列の内部プロパティについて

■editable の内部プロパティについて

■w2ui のダウンロードについて

■配列のキー一覧取得（Object.keys）

■配列の値一覧取得（Object.values）

■ IE(Internet Explorer) で Object.values() メソッドをエミュレート

■Object.values() メソッドのエミュレート関数をコールする

■Object.entries() メソッドのエミュレート関数

■Object.entries() IEでの実行結果

■Object.entries() FireFoxでの実行結果

■「標準の数値書式指定文字列」について

■「カスタム数値書式指定文字列」について

■「複合書式指定文字列」について

関連する記事