よそのサイトのページアイコンが必要な時、すぐに取得できます。
googleの以下URLで、domain= の後に、対象のURLを入力
https://www.google.com/s2/favicons?domain=https://intl3-senko.com/bimpsch/
後は、名前を付けて画像を保存
月: 2019年1月
jqGrod 折り畳み状態の永続化
たくさんのグリッドを配置したページでは、あまり見ないのは折り畳んでおくとすっきりしますが、次回使う時、開いた状態で始まるとわかりにくく、使いにくいので、ローカルストレージに保存して前回最終折り畳み状態を再現できるようにします。
[ コードサンプル ]
// 各グリッド折り畳み状態 //
/* キーはグリッドid, hiddngid が true or false 既定は全部trueで折り畳み */
var gdhiddenMap = {delayskip: true, pctgt: true, pchst: true, mtapi: true, usradd: true, tgtbps: true,
tableschemalist: true, tableloglist: true, batlog: true,
pcsum: true, apidoc: true, pcncann: true, svpdsterr: true, polydel: true, polyfacildel: true,
bareaupdt: true, actcy: true};
// ローカルストレージから読む //
if (localStorage) {
if (localStorage.getItem('vesselsch_gdstate_logshow') != null) {
var hdnmap = JSON.parse(localStorage.getItem('vesselsch_gdstate_logshow'));
/*for (key in gdhiddenMap) {
if (hdnmap[key] !== undefined) {
gdhiddenMap[key] = hdnmap[key];
}
}*/
// これでも出来るが、あまり変わりないような //
$.map(gdhiddenMap, function (value, index) {
if (hdnmap[index] !== undefined) {
gdhiddenMap[index] = hdnmap[index];
}
});
}
}
/* jgGrid プロパティ設定 */
hiddengrid: gdhiddenMap['delayskip'], // 折り畳み
/* jqGrid onHeaderClick イベントでローカルストレージに保存する */
// -- 折り畳みを変えた時 -- //
onHeaderClick: function () {
var gdstate = $(this).jqGrid('getGridParam', 'gridstate');
var thisid = $(this).attr('id');
gdhiddenMap[thisid] = gdstate == 'hidden';
localStorage.setItem('vesselsch_gdstate_logshow', JSON.stringify(gdhiddenMap));
},
Chromeの開発ツールで状態をチェックする
jqGrid セルに画像を配置
loadCompleteで行走査して、指定列番セルにhtmlで設定してます。
const var ANCH_SPAN = '<span style="margin-left:4px"/><img src="Img/port.png" /></span>';
// 国旗 //
// tdのセット //
td = $('#' + rows[i]['id']).children('td').eq(FLG_COLIDX);
if (rows[i]['cdCntry'] != '') {
$(td).html(
'<span style="margin-left:2px"/><img src="Img/flag/' + rows[i]['cdCntry'] + '.gif" /></span>')
}
else if (rows[i]['lastpcres'].indexOf(' ANCH ') != -1) {
$(td).html(ANCH_SPAN);
}
else {
$.each(ANCH_ARY, function (j, itm) {
if (rows[i]['lastpcres'].indexOf(itm) != -1) {
$(td).html(ANCH_SPAN);
}
});
}
// 入出港アイコン //
td = $('#' + rows[i]['id'] + ' td').eq(ARVDEP_COLIDX);
if (rows[i]['lastpcres'] != '') {
$(td).html('<span style="margin-left:4px;margin-right:4px;"><img src="Img/ope/' +
(rows[i]['lastpcres'].slice(0, 3)) + '.png"/></span>');
}
・動的設定はhidden列でしてる
・htmlが長くなるのはconstでセットするとよい
< 画面例 >
|
|
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/2da28325.98229e1b.2da28326.40bbd3b8/?me_id=1278256&item_id=16159045&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F3193%2F2000004933193.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
jqGrid グループヘッダー
列タイトルを2行にしてグループにする方法
[ コードサンプル ]
// ==== グループヘッダー ==== //
$("#pcsum").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{startColumnName: 'tgtarv', numberOfColumns: 5, titleText: 'Target'},
{startColumnName: 'resarv', numberOfColumns: 5, titleText: 'Response'},
{startColumnName: 'costarv', numberOfColumns: 5, titleText: 'Cost (s)'},
{startColumnName: 'totaltgt', numberOfColumns: 3, titleText: 'Total'}
]
});
画面例
jqGrid ツールバーにリフレッシュボタンを配置
頻繁に最新状況を見たい時とか、既定ではリフレッシュボタンが下にだけあるので、スクロールするのが面倒くさいので、上にもあると便利なので、つけるコードです。
[ コードサンプル ]
// リフレッシュボタンを付ける //
var TOOLBAR_REFRESH_DIV = "<div style='float:right;margin-right:16px;' id='tbarrefreshpc'>";
var TOOLBAR_REFRESH_BTN = "<span class='ui-icon ui-icon-refresh curpo' id='tbarrefreshbtnpc'></span>";
$('#t_pctgt').append(TOOLBAR_REFRESH_DIV);
$('#tbarrefreshpc').html(TOOLBAR_REFRESH_BTN);
$('#tbarrefreshpc').attr('title', $('#refresh_pctgt').attr('title'));
// ナビゲーションバーのボタンクリックを発生させる //
$('#tbarrefreshbtnpc').on('click', function () {
$('#refresh_pctgt').click();
});
[ 画面例 ]
jqGrid タイトルの動的設定
gridCompleteに書いておきます。
[ コードサンプル ]
var reccnt = $(this).jqGrid("getGridParam", "records");
// タイトル //
$(this).jqGrid('setCaption', "MarineTraffic Port-call Target List X " + reccnt + totaltxt);
jqGrid ツールバーのカスタマイズ
検索条件設定用のパーツとか、jqGridとは別に上とかに配置してもいいですが、デザイン合わすためのCSSが別に必要になったり、グリッドと連動させて折り畳みとかしようとすると、別にコード書くという煩雑さもあるので、ツールバーの中に入れるのが、すっきりすると思います。
方法としては、2種類あって、
1) jqGridの設定コードの後に書く
2) jqGridのgridCompoleteに書く
にしてます。
[ 後に書くコードサンプル ]
// == ツールバー == //
var htmlds = 'Last Revising Executed Date From ' + "${dtdssel}";
$('#t_delayskip').prepend(htmlds); // 後でリフレッシュボタンを付けてるのでprepend
// == From日を変えた時 == //
$('#dtdssel').on('change', function () {
$('#delayskip').jqGrid('setGridParam', {
serializeGridData: function (postData) {
postData['mindt'] = $('#dtdssel').val();
return postData;
}
}).trigger('reloadGrid');
});
・jqGridのtableのidの前に “t_” がついやのが、ツールバーのid
・${dtdssel}はJSPのpageContextで作ったセレクトタグ
・jQueryのセレクタを使って配置
・日付条件を変えて再検索できる
画面例
// == ツールバー == //
var PCTGT_SEARCH_BUTTON = '' +
'';
var htmlmt = 'Type ' + TP_SEL +
'Add From ' + "${dtpcsel}" +
'Res From ' + "${dtpcselres}" +
' Vessel ' +
"${azselpc}" + ' No Res ' + WITH_NORES_SEL;
$('#t_pctgt').prepend(htmlmt + PCTGT_SEARCH_BUTTON); // 後でリフレッシュボタンを付けてるのでprepend
//$('#t_pctgt').before(htmlmt); // 後でリフレッシュボタンを付けてるのでprepend
$('#pctgtsearchbtn').button();
// == Searchボタンを押した時 == //
$('#pctgtsearchbtn').on('click', function () {
$('#pctgt').jqGrid('setGridParam', {
serializeGridData: function (postData) {
postData['mindt'] = $('#dtpcsel').val();
postData['mindtpcres'] = $('#dtpcselres').val();
postData['hchr'] = $('#azselpc').val();
postData['withnoressel'] = $('#withnoressel').val();
postData['pctgttpsel'] = $('#pctgttpsel').val();
return postData;
}
}).trigger('reloadGrid');
// ローカルストレージに保存 //
if (localStorage) {
var pctgtMap = {};
pctgtMap['mindt'] = $('#dtpcsel').val();
pctgtMap['mindtpcres'] = $('#dtpcselres').val();
pctgtMap['hchr'] = $('#azselpc').val();
pctgtMap['withnoressel'] = $('#withnoressel').val();
pctgtMap['pctgttpsel'] = $('#pctgttpsel').val();
localStorage.setItem('vesselsch_pctgt', JSON.stringify(pctgtMap));
}
});
北朝鮮 ロケット発射技術
一度は挫折した軍事研究ですが、
1円古本が多数入手できたので、読んでました。
某自衛隊退官執筆者のご意見によると、
北朝鮮の核弾頭用ロケット技術は、日本のそれを遥かに凌駕して
いて、その失敗率の低さは、日本を下回り、欧米諸国並みであること
に少し驚いた次第です。
というわけで、
北朝鮮においては、その優れた技術、生産手法を民生活用してもらい、
外貨獲得してくれれば、
現行の貧困、脅威問題は丸く消えて、心配なくなるかと推測いたします。
海文堂出版 海運と港湾
今まで得た知識の再確認の他、船舶港湾についての、経済産業的
側面を俯瞰する上で、最適の一冊と思います。
(別にアマゾンにカスタマーレビューするつもりはありませんが)
初めて知ったことで、興味深いのは、以下になろうかです。
1) LNG船の燃料として、LNGを使う事が実用化され就航してる。
2) ビルゲイツが、自分の成し遂げたコンピュータの大衆化以外で、20世紀最大の革命的出来事として、コンテナ船の運行を揚げている。
3) 船内での犯罪、民事もめごとの解決の為の法律として、船籍国の法律が適用される。
4) 頓挫したと思っていた北極海航路の実現化が進められているが、ロシアの利権思惑、砕氷技術と船への応用がまだで、エスコート船が必要ではあるが、近いうちに実現可能となり、運賃コストの問題はあるが、欧州向け、大幅トランジット削減、海賊問題の解消につながる。
関連リンク : http://containerlogi.com/category3/entry186.html
5) 世界最初のコンテナ船を就航させたシーランド社は当初、職がなくなることによる、ニューヨークの港湾マフィアに多額の裏金を渡す必要があった。
6) 日本のコンテナハブ港衰退化解消、内航船活性化策として著者が提案されている、那覇港の国際ハブ港化は、なるほどと感心させられ、中国、韓国、台湾に負けてる海運業界活性化に必要と思う。
|
|
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/2d6b6799.7e4f498b.2d6b679a.47787c76/?me_id=1213310&item_id=18769816&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4072%2F9784303164072.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
・
Numeral.js が使える場面
jqGrid の colModel でしてるスタティックな設定が、全データで通用すれば、使う必要ありませんが、データ値によって表現を変える場合、他の列値の状態により、フォーマットを変える必要ある場合に使えます。
[ コードサンプル ]
// 確定数量をフォーマット //
if (rows[i]['wtFixed'] != '0.0') {
$('#shpgrid').jqGrid('setCell', tmpid, 'wtFixed', numeral(rows[i]['wtFixed']).format('0,0.000'));
}
if (trmdtxt.indexOf(".") > 0) {
if (j == WT_FIXED_COLUMN_INDEX) {
$(this).text(numeral(trmdtxt).format('0,0.000'));
}
else {
$(this).text(numeral(trmdtxt).format('0,0.00'));
}
}
コメントを投稿するにはログインしてください。