諸君は必ず失敗する。
成功があるかもしれませんけど、成功より失敗が多い。
失敗に落胆しなさるな。失敗に打ち勝たねばならぬ。
anda sekalian pasti gagal.
maupun ada success . akan ada gagal lebih banyak success.
tapi anda harus lupa gagal. dan harus menang gagal.
|
Semakin di depan
諸君は必ず失敗する。
成功があるかもしれませんけど、成功より失敗が多い。
失敗に落胆しなさるな。失敗に打ち勝たねばならぬ。
anda sekalian pasti gagal.
maupun ada success . akan ada gagal lebih banyak success.
tapi anda harus lupa gagal. dan harus menang gagal.
|
JSONをオンラインで整形して見やすくしてくれます。
他にもいろいろありますが、これが一番便利に思えます。
サイズの大きいデータを貼り付けると応答に時間がかかります。
< URL >
https://lab.syncer.jp/Tool/JSON-Viewer/
2. 整形結果
Javascript を難読化できるオンラインツール
< URL >
有償で、まとめて多数のファイルを一括変換できるデスクトップアプリもあります。
[ 単純クラスオブジェクト ]
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
// curlをRunTimeで実行 //
Forecast fc = PF.getCurrentForecast();
// UTC => MyTM 変換があるのでクラスに入れたのを文字列に戻す //
//Gson gson = new Gson(); // 整形なし
Gson gson = new GsonBuilder().setPrettyPrinting().create(); // 改行整形
String gsonstr = gson.toJson(fc);
応答テキスト
{
"DESTINATION": "JP TYO R",
"ETA": "19/01/07 07:00 (UTC)",
"ETA_CALC": "19/01/09 06:31 (UTC)",
"ETA_MY": "19/01/07 16:00 (Asia/Tokyo)",
"ETA_CALC_MY": "19/01/09 15:31 (Asia/Tokyo)",
"NEXT_PORT_NAME": "TOKYO",
"NEXT_PORT_UNLOCODE": "JPTYO",
"LAST_PORT": "SHANGHAI",
"nowtmjst": "19/01/04 14:22 (JST)",
"cdCntryLast": "CN",
"cdCntryNext": "JP"
}
表示したいテキストを title属性にセット
<input type="text" name="dcnm" id="dcnm" value="${dcnmfst}" placeholder="Discharging port name"
class="menuitm" title="Input a discharging port name"/>
tippyが現れるようにする
tippy('.tmptippy', { // 表示対象
placement: 'bottom', // 表示位置
animation: 'scale', // アニメーション指定
duration: 1000, // 表示遅延
arrow: true, // 矢印有無」
});
単体でかんたんに使えるJavascriptのツールチップ
本家 :https://atomiks.github.io/tippyjs/
紹介ページ : https://on-ze.com/archives/7310
< 画面例 >
こんなのも出来ます
編集なし、リードオンリーな表はかんたん。
[ JavaScriptサンプル ]
// 最終更新時刻 処理コスト //
$('#expgridpager_left').html(userdata['lastupdttm'] + ' Cost : ' + userdata['tmcost'] + ' ms');
// エクセルアイコン //
$('#exceltd').remove();
$('#expgridpager_left').before(EXCEL_ICON_SPAN);
検索結果レコードの他、各種の付属データ(合計、平均、検索条件でもって結果としてあれば便利なデータまたは必要なデータなど)が必要な場合があると思います。
jqGrid の userData を使えば出来ます。
画面例
< 設定例 >
[ JavaScript ]
gridComplete で取得
gridComplete: function () {
// == userdata取得 == //
var userdata = $(this).jqGrid('getGridParam', 'userData');
},
表示例
// 最終更新時刻 処理コスト //
//$('#vslgridpager_left').text(userdata['lastupdttm'] + ' Cost : ' + userdata['tmcost'] + ' ms');
var INFO_SPAN = '</>';
$('#infospan').remove();
$('#vslgrid_toppager_right').before(INFO_SPAN);
$('#infospan').text(userdata['tmcost'] + ' ms');
// スケジュール遵守率 2018-11-22 //
var complratio = userdata['compl_ratio'];
var compltxt = userdata['compl_txt'];
var COMPL_SPAN = '</>';
$('#complspan').remove();
if (complratio != undefined) {
$('#infospan').before(COMPL_SPAN);
$('#complspan').text("JPort Arrival Accurancy Percentage Past 6 months : " + complratio + " (" + compltxt + ")");
}
[ Servlet ]
HashMapに格納
// +++ 結果メッセージ用 +++ //
HashMap<String, String> usrdata = new HashMap<String, String>();
DBini ini = new DBini();
if (reslist.size() > -1) { // <=== * 注意 * ない場合も含む 2018-07-14 Position API 全対象用
// 船スペック //
String spec = PV.getAVesselspecALine(vessel, true); // 2018-01-17 trueで短縮
spec = spec == null ? "" : spec;
System.out.println("spec:" + spec);
usrdata.put("spec", spec);
usrdata.put("vessel", vessel);
usrdata.put("imo", spec == null ? "" : spec.trim().substring(spec.length() - 8));
結果応答用JSONオブジェクトに格納
// ++ JSONオブジェクトに格納 ++ //
JSONResultGrid grid = new JSONResultGrid();
grid.setPage(1);
grid.setTotal(1);
grid.setRecords(reslist.size());
grid.setRows(reslist);
grid.setUserdata(usrdata);
//Gson gson = new Gson();
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String gsonstr = gson.toJson(grid);
String gsonliststr = gson.toJson(reslist);
JSONオブジェクトクラス
package vesselsch;
import java.util.ArrayList;
import java.util.HashMap;
/**
* jqGrid JSONデータソース用
* @author
*/
public class JSONResultGrid {
private int page = 1;
private int total = 1;
private int records = 0;
private ArrayList<?> rows;
private ArrayList<?> rows2;
private ArrayList<?> rows3;
private HashMap<String, String> userdata = null;
private HashMap<String, Integer> userData = null;
private ArrayList strlist = null;
private HashMap<String, Integer> itmCntMap = null;
/**
* @return the page
*/
public int getPage() {
return page;
}
/**
* @param page the page to set
*/
public void setPage(int page) {
this.page = page;
}
/**
* @return the total
*/
public int getTotal() {
return total;
}
/**
* @param total the total to set
*/
public void setTotal(int total) {
this.total = total;
}
/**
* @return the records
*/
public int getRecords() {
return records;
}
/**
* @param records the records to set
*/
public void setRecords(int records) {
this.records = records;
}
/**
* @return the userdata
*/
public HashMap<String, String> getUserdata() {
return userdata;
}
/**
* @param userdata the userdata to set
*/
public void setUserdata(HashMap<String, String> userdata) {
this.userdata = userdata;
}
/**
* @return the rows
*/
public ArrayList<?> getRows() {
return rows;
}
/**
* @param rows the rows to set
*/
public void setRows(ArrayList<?> rows) {
this.rows = rows;
}
/**
* @return the rows
*/
public ArrayList<?> getRows2() {
return rows2;
}
/**
* @param rows the rows to set
*/
public void setRows2(ArrayList<?> rows2) {
this.rows2 = rows2;
}
/**
* @return the userData
*/
public HashMap<String, Integer> getUserData() {
return userData;
}
/**
* @param userData the userData to set
*/
public void setUserData(HashMap<String, Integer> userData) {
this.userData = userData;
}
/**
* @return the strlist
*/
public ArrayList getStrlist() {
return strlist;
}
/**
* @param strlist the strlist to set
*/
public void setStrlist(ArrayList strlist) {
this.strlist = new ArrayList(strlist);
}
/**
* @return the rows3
*/
public ArrayList<?> getRows3() {
return rows3;
}
/**
* @param rows3 the rows3 to set
*/
public void setRows3(ArrayList<?> rows3) {
this.rows3 = rows3;
}
/**
* @return the itmCntMap
*/
public HashMap<String, Integer> getItmCntMap() {
return itmCntMap;
}
/**
* @param itmCntMap the itmCntMap to set
*/
public void setItmCntMap(HashMap<String, Integer> itmCntMap) {
this.itmCntMap = itmCntMap;
}
}
応答JSON文字列 userData部分
"userdata": {
"opeseltag": "\u003cselect name\u003d\u0027opesel\u0027 id\u003d\u0027opesel\u0027 multiple\u003d\u0027multiple\u0027 size\u003d\u00273\u0027\u003e\u003coption value\u003d\u0027APL\u0027 selected\u003eAPL\u003coption value\u003d\u0027Ben(Swire)\u0027 selected\u003eBen(Swire)\u003coption value\u003d\u0027__\u0027 selected\u003e__\u003c/select\u003e",
"pnmccdmaptxt": "Yokohama:JP,Guam:GU,Saipan:MP,YOKOHAMA:JP",
"nationseltag": "\u003cselect name\u003d\u0027nationsel\u0027 id\u003d\u0027nationsel\u0027 multiple\u003d\u0027multiple\u0027 size\u003d\u00273\u0027\u003e\u003coption value\u003d\u0027Guam\u0027 selected\u003eGuam\u003coption value\u003d\u0027Japan\u0027 selected\u003eJapan\u003coption value\u003d\u0027North mariana is\u0027 selected\u003eNorth mariana is\u003c/select\u003e",
"cntrycdtxt": "GU,JP,MP",
"tmcost": "3958",
"compl_ratio": "33 %",
"imo": "9229609",
"spec": "Year:2001 Speed:19.5 TEU:1078 Length:154.00 Width:25.00 IMO:9229609 ",
"compl_txt": "3 / 9",
"opecnttxt": "12,12,2",
"opestxt": "APL,Ben(Swire),__",
"vessel": "APL GUAM",
"pnmseltag": "\u003cselect name\u003d\u0027pnmsel\u0027 id\u003d\u0027pnmsel\u0027 multiple\u003d\u0027multiple\u0027 size\u003d\u00274\u0027\u003e\u003coption value\u003d\u0027Guam\u0027 selected\u003eGuam\u003coption value\u003d\u0027Saipan\u0027 selected\u003eSaipan\u003coption value\u003d\u0027YOKOHAMA\u0027 selected\u003eYOKOHAMA\u003coption value\u003d\u0027Yokohama\u0027 selected\u003eYokohama\u003c/select\u003e",
"lastupdttm": "LU:2018-12-01 00:06:17",
"voyseltag": "\u003cselect name\u003d\u0027voysel\u0027 id\u003d\u0027voysel\u0027 multiple\u003d\u0027multiple\u0027 size\u003d\u00275\u0027\u003e\u003coption value\u003d\u00270DQ2UR1PL\u0027 selected\u003e0DQ2UR1PL\u003coption value\u003d\u00270DQ2WR1PL\u0027 selected\u003e0DQ2WR1PL\u003coption value\u003d\u00270DQ2WR1PL/0DQ2W\u0027 selected\u003e0DQ2WR1PL/0DQ2W\u003coption value\u003d\u00270DQ2YR1PL\u0027 selected\u003e0DQ2YR1PL\u003coption value\u003d\u00270DQ30R1PL\u0027 selected\u003e0DQ30R1PL\u003c/select\u003e"
}
gridComplete に下のような関数を入れてます。
// 高さを行数に応じてアジャストする //
adjustGridHeight($(this), 20, reccnt, 30);
/**
* グリッド高のアジャスト
* @param {type} gridobj 対象グリッド
* @param {type} maxreccnt アジャスト適用最大レコード数
* @param {type} reccnt 検索結果レコード数
* @returns {undefined} なし
*/
function adjustGridHeight(gridobj, maxreccnt, reccnt) {
//var reccnt = $(gridobj).jqGrid("getGridParam", "records");
// 高さを行数に応じてアジャストする //
if (reccnt <= maxreccnt) {
$(gridobj).parents(".ui-jqgrid-bdiv").css('height', $(gridobj).css('height'));
var hv = $(gridobj).parents(".ui-jqgrid-bdiv").css('height').replace('px', '');
var hvadj = eval(hv) + eval(40) + 'px';
$(gridobj).parents(".ui-jqgrid-bdiv").css('height', hvadj);
}
// これがないと復帰しないので //
else {
$(gridobj).parents(".ui-jqgrid-bdiv").css('height', $(gridobj).jqGrid('getGridParam', 'height'));
}
}
[ 適用前 ]
[ 適用後 ]
jqGrid5.3.1 にバージョンを上げたところ、4.7とデフォルトのスタイルが異なり、タイトル行の折り返しが効かないので、サポートに聞いたところ、以下のようにCSSをオーバーライトしたら、元のスタイルに出来ました。
/* Guriddo 5.3.1 (for same style as 4.7's default) */
.ui-jqgrid tr.jqgrow td, .ui-userdata, .ui-jqgrid-pager, .ui-jqgrid-titlebar {
height: auto;
font-size:11px;
padding: 2px;
}
/* Guriddo 5.3.1 (for same style as 4.7's default) */
.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid-sortable, .ui-jqgrid-title {
height:auto;
overflow:hidden;
white-space:normal !important;
font-size:11px;
}
ポイントは、thにwhite-space:normal !important;を効かすこと。フォントサイズ、パッディングの指定になります。
コメントを投稿するにはログインしてください。