カテゴリー: jQuery

jQuery JSONファイルの同期読込

投稿日: 投稿者:

jQueryであるJSONファイルを同期で読み込む必要がある場合に使ってます。
$.ajaxSetup, asyncのセットで出来ます。

[ コード例 ]


      $.ajaxSetup({async: false});     // 同期
      $.getJSON(geojsonfnmChart, function (data) {
        chartdata = data;
      });
      $.ajaxSetup({async: true});      // 同期解除

 

ここで教えていただきました。
https://jslob.repop.jp/2017/06/getjsonjson.html

Javascript forEach の活用

投稿日: 投稿者:

ECMA2015以降、forEachで配列の一括処理が出来て、コードがわかりやすくなるので使ってます。

[ コード例 ]


    const myturf = new MyTurf();
    const pushToArray = (ll, idx) => {

      if (idx > 0) {

        prevll = coordinates[idx - 1];
        // turf.jsで方向角を求める //
        tmpbearing = myturf.getBeaing(prevll, ll);
        // 時計式角度を航空式角度に変換 //
        tmpbearing = tmpbearing < 0 ? Number(tmpbearing) + Number(360) : tmpbearing;
        // アイコン用整数に四捨五入 //
        tmpbearing = Math.round(tmpbearing);

        barray.push(tmpbearing);
      }
    };
    
    // 位置配列を走査して方向角配列に追加して行く //
    coordinates.forEach((ll, idx) => pushToArray(ll, idx));

DOM操作を伴う場合、jQueryの$.eachの方がすっきり書けるので、jQueryを使ってます。
jQueryの場合、コールバックに渡す引数の要素番号が 先になり、forEachと逆です。

[ jQuery $.each 例 ]


$.each($("#" + itm["id"]).children("td"), function (j, itmc) {
  $(this).addClass("td_lsilver");
});

jQuery Based Base64 File Converter

投稿日: 投稿者:

Formからのバイナリファイルのアップロードが、サーバー側で Part が取得出来ない不思議なことになってしまい、Base64形式でアップロード することにし、クライアント側で使ってみました。

ここにあります。 https://www.jqueryscript.net/text/Lightweight-jQuery-Based-File-Base64-Converter-base64-js.html

jqGrid グリッドデータをクリップボードにコピー

投稿日: 投稿者:

< 画面例 >

1) ナビゲーションボタンにコピーボタンを配置

2) クリックすると全選択 => 選択内容がクリップボードにコピーされる

< コード例 >

1) 呼び出し元


// クリップボードコピー //  
clipCopyButtonJSfunc($("#addrlist"), $("#addrlistpager"), "");

2) コピーボタン追加


**
 * jqGrid table contents copy to clipboard
 * @returns {undefined}
 */
function clipCopyButtonJSfunc(objtable, objpager, idcmpltdmsg) {

  // ==== Clipboard copy ==== //
  $(objtable).jqGrid('navButtonAdd', objpager,
          {
            caption: 'Copy',
            //id: "copygmapdest",
            title: "Copy table contents",
            onClickButton: function () {
              //alert($(this).attr("id"));
              selectDomElm(this);

              // 選択しているテキストをクリップボードにコピーする
              document.execCommand("Copy");
              // 選択の解除 //
              //window.getSelection().removeAllRanges();


            },
          }
  );


}

3) 指定DOMエレメント選択


// 指定DOMエレメント選択 //
function selectDomElm(obj) {
  // Rangeオブジェクトの取得
  var range = document.createRange();
  // 範囲の指定
  range.selectNodeContents(obj);

  // Selectionオブジェクトを返す。ユーザが選択した範囲が格納されている
  var selection = window.getSelection();
  // 選択をすべてクリア
  selection.removeAllRanges();
  // 新規の範囲を選択に指定
  selection.addRange(range);
}

ここで教えていただきました : https://9-bb.com/javascript-3/

多言語化の方法

投稿日: 投稿者:

[ 基本的方法 ]

  1. データベースにマスタを用意
  2. JSPでデータベースのデータを読込、Javascriptの連想配列になった文字列を、pageContext に格納
  3. pageContext の連想配列を const した変数に格納
  4. 3. を jQuery の text, html に入れて表示。jqGridの場合は、constな変数に格納して使う
  5. 2.により、言語変更は、コード簡潔化の為、ページの再読込を必要とする