JavaScript – ページ 13

jqGrid userData の使い方

投稿日: 2019-01-04 投稿者: Hisa

検索結果レコードの他、各種の付属データ(合計、平均、検索条件でもって結果としてあれば便利なデータまたは必要なデータなど)が必要な場合があると思います。

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"
  }

jqGrid グリッド高を検索結果数に合わせて低くする

投稿日: 2019-01-04 投稿者: Hisa

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'));
  }

}


[ 適用前 ]

[ 適用後 ]

jqGrid (Guriddo 5.3.1) へのバージョンアップによるCSSの対応

投稿日: 2019-01-04 投稿者: Hisa

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;を効かすこと。フォントサイズ、パッディングの指定になります。