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/

jqGrid サブグリッドの表示非表示をプロパティでセット

jqGrid の最近のアップデートのドキュメントを見ていたら、ありましたので、早速実装してみました。

前は、loadComplete でグリッドデータをループして、クラスをセットしていたので、すっきりわかりやすくなりました。

isHasSubGrid: で出来ます。



 // ######### サブグリッド ######### //
 subGrid: true,
 isHasSubGrid: function (rowid) {   // <=== New from 5.3
   // if custommerid begin with B, do not use subgrid
   var cell = $(this).jqGrid('getCell', rowid, "cnt_img");
   //console.log(cell, rowid);
   if (cell && cell == 0) {    // <=== === は使えない
     return false;
   }
   return true;
 },
 subGridOptions: {
   // configure the icons from theme rolloer
   plusicon: "ui-icon-triangle-1-e",
   minusicon: "ui-icon-triangle-1-s",
   openicon: "ui-icon-arrowreturn-1-e"
 },
 subGridRowExpanded: showChildGrid,    // <=== 展開した時の処理
 // ######### サブグリッド ######### //     

Tesseract.js Javascript OCR文字認識

Canvas から切り抜いた画像でもって、OCRする必要あり、過去にtesseract を使ってサーバー側で処理した結果を応答する仕様のをリリースしたことがあり、今回もそれで行こうと思いましたが、
ちょっと調べたところ、何と、tesseract が Javascript で実行できるようになって、早速、利用してみました。

ここで教えて頂く : https://qiita.com/furunfuru/items/0ecf0a21273ae93bc060

< コード例 >


<script src='https://cdn.rawgit.com/naptha/tesseract.js/0.2.0/dist/tesseract.js'></script>


       // @@ 文字認識ボタンを押した時 @@ //
        $("#execocr").on("click", function (e) {

          //var img = $("#RecCanvas").toDataURL();
          // var img = document.getElementById("RecCanvas").toDataURL();
          var img = document.getElementById("RecCanvas").toDataURL("image/jpeg");

          Tesseract.recognize(img, {lang: "eng"}).then(function (result) {
            //const a = document.querySelector("#test");
            console.log(result);
            $("#ocrres").val(result.text);
          });
         });

< 対象画像 結果例 >

jQuery-ui Dialog のボタン位置変更と 2個目 のダイアログのハンドリング

jQuery-ui Dialog で、機能豊富なダイアログにしようとして、少しはまったので備忘録しておきます。

デフォルトで下側にあるボタンを上側に配置するのは、セレクタを使って出来ました。

[ コード例 ]


// ボタンメニューを上に置く //
$(".ui-dialog-buttonpane").insertBefore("#alertdialog");

[ 単数ダイアログ画面例 ]

ダイアログ画面から、更にダイアログが現れる場合、

[ 複数ダイアログ画面例 ]

[ 確認ダイアログを閉じた後の状態 ]

閉じたダイアログのボタンが現れてしまいます。

しばらく悩んだ後、わかった原因と解消方法は、jQuery のセレクタの insert で、クラスを指定しているのが原因で、2個目のダイアログのクラスを remove することで解消しました。

[ コード例 ]


/**
 * 汎用確認ダイアログ サイズ指定 Close後ボタンクラス削除
 * @param {type} obj divのid
 * @param {type} title タイトル
 * @param {type} msg htmlメッセージ
 * @param {type} btntxt1 左ボタン
 * @param {type} btntxt2 右ボタン
 * @param {type} func Yesの場合の関数を参照渡し
 * @param {type} w 幅
 * @param {type} h 高さ
 * @returns {undefined} なし
 */
function confirmDialogWithWHRemove(obj, title, msg, btntxt1, btntxt2, func, w, h) {

  var btns = {};
  btns[btntxt1] = function () {
    $(obj).dialog("close");
    func();
    // insert into で上にすると元ダイアログで見えるので //
    $(".ui-dialog-buttonpane").eq(1).remove();
  };
  btns[btntxt2] = function () {
    $(obj).dialog("close");
    // insert into で上にすると元ダイアログで見えるので //
    $(".ui-dialog-buttonpane").eq(1).remove();
  };
  $(obj).html(msg);
  $(obj).dialog({
    title: title,
    modal: false,
    width: w, height: h,
    open: function () {
      // フォーカスボタンのセット //
      $(this).siblings(".ui-dialog-buttonpane").find('button:eq(1)').focus();

    },
    buttons: btns
  });

}

 

Javascript 連想配列の要素数

配列と同じく length でとれて使えると思ったら、undefined になるので、調べたところ、Object.keys() を使えばとれることがわかりました。

ここで教えて頂きました : https://senews.jp/hash-length/

[ コード例 ]


var map = {};
var reccnt = 0;
function setMap(m) {
  map = m;
  // 後で計算で使う場合の為にキャストしておく //
  reccnt = parseInt(Object.keys(photoimoarray).length);
}