jqGrid colModel, colNames (基本)

投稿日: 投稿者:

jqGridのcolNames, colModel については、下サンプルのようにプロパティで設定します。
先に変数に入れて、それを指定してもよいです。

本家 API : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

[ colModelインライン記述例 ]


datatype: "json",
loadui: 'block',
reloadAfterSubmit: true,
colNames: ['', 'Name', 'Home URL', 'My URL', 'Exp', 'Imp', 'LastUpdate', '', ''],
colModel: [
  {name: 'ico', width: '20px', align: 'center', classes: 'curpo'},
  {name: 'ope', width: '40px', align: 'left', classes: 'curpo'},

  {name: 'url', width: '120px', align: 'left', editable: true},
  {name: 'myurl', width: '120px', align: 'left', editable: true},

  {name: 'expcnt', width: '20px', align: 'right'},
  {name: 'impcnt', width: '20px', align: 'right'},
  {name: 'tmLastupdt', width: '50px', align: 'left', classes: 'tmcol'},
  {name: 'id', index: 'id', width: '0px', align: 'left',
    hidden: true,
    editrules: {edithidden: true}},
  {name: 'opeforedit', width: '0px', align: 'left', editable: true}
],
multiselect: false,

変数指定例


      var colnames = ['SKNo.', 'InvoiceNo.', '工場', 　'揚港', 'コンテナNo.', '保税地域',
        '仕入額$', '仕入額\\', '納品日', '納品場所', '支払日', '請求額(課税)', '請求額(非課税)',
        '消費税', '税関名', '関税', '申告番号', '',
        '輸入諸掛(社内)', '輸入諸掛金額', '海上運賃', 'その他諸掛', '保険', '控除後売上', '粗利',
        '備考', 　'最終更新', '', '', '', ''];

      var colmodel = [
        // SK No. //
        {name: 'noSK', index: 'NO_SK', width: '38px', align: 'left'},
        // Invoice No. //
        {name: 'noInv', index: 'NO_INV', width: '60px', align: 'left'},
        // 工場 //
        {name: 'nmFact', index: 'NM_FACT', width: '38px', align: 'left'},
        // DCPort //
        {name: 'nmDc', index: 'NM_DC', width: '20px', align: 'left'},
        // コンテナNo //
        {name: 'nmCont', index: 'NM_CONT', width: '64px', align: 'left'},

        // CYCFS 2018-09-28 //
        {name: 'cdTerminal', index: 'CD_TERMINAL', width: '40px', align: 'left', editable: true,
          edittype: "select",
          editoptions: {
            required: true,
            dataUrl: 'GetSelectTag?tp=cycfs',
            defaultValue: function (setval) {
              //setval = lastselIdxMap['cdCust'];
              return setval;
            }
          }
        },

        // ドル仕入額 //
        {name: 'amSuplusd', index: 'AM_SUPL_USD', width: '30px', align: 'right', editable: true,
          editrules: {number: true, minValue: 0, maxValue: 9999999}
        },
        // 円仕入額 //
        {name: 'amSupljpy', index: 'AM_SUPL_JPY', width: '30px', align: 'right', editable: true,
          editrules: {integer: true, minValue: 0, maxValue: 99999999}
        },
        // 納品日 //
        {name: 'dtDeliv', index: 'DT_DELIV_LONG', width: '30px', align: 'center', "classes": "dtcol"},
        // 納品場所 //
        {name: 'nmDeliv', index: 'NM_DELIV', width: '50px', align: 'left'},
        // 支払日 //
        {name: 'dtPayment', index: 'DT_PAYMENT_LONG', width: '30px', align: 'center', editable: true, "classes": "dtcol"},
        // 課税請求 //
        {name: 'amInwithtax', index: 'AM_IN_WITH_TAX', width: '30px', align: 'right', editable: true,
          editrules: {integer: true, minValue: 0, maxValue: 99999999}
        },
        // 非課税請求 //
        {name: 'amInnotax', index: 'AM_IN_NO_TAX', width: '30px', align: 'right', editable: true,
          editrules: {integer: true, minValue: 0, maxValue: 99999999}
        },
        // 消費税 //
        {name: 'amTaxc', index: 'AM_TAXC', width: '30px', align: 'right'

        },
        // 税関名 //
        {name: 'nmCustom', index: 'NM_CUSTOM', width: '36px', align: 'left', editable: true,
          edittype: "select",
          editoptions: {
            required: true,
            dataUrl: 'GetSelectTag?tp=custom',
            defaultValue: function (setval) {
              //setval = lastselIdxMap['cdCust'];
              return setval;
            }
          }
        },
        // 関税 //
        {name: 'amTarrif', index: 'AM_TARRIF', width: '30px', align: 'right', editable: true, sotrable: true,
          editrules: {integer: true, minValue: 0, maxValue: 99999999}
        },
        // 申告番号 //
        {name: 'noNotify', index: 'NO_NOTIFY', width: '56px', align: 'left', editable: true},
        // 通関チェック //
        {name: 'isCustomed', index: 'IS_CUSTOMED', width: '8px', align: 'center',
          editable: true,
          edittype: "checkbox", editoptions: {value: "1:0"}
        },
        // 輸入諸掛営業所名 //
        {name: 'nmDiv', index: 'NM_DIV', width: '38px', align: 'left', editable: true,
          edittype: "select",
          editoptions: {
            required: true,
            dataUrl: 'GetSelectTag?tp=divsk',
            defaultValue: function (setval) {
              //setval = lastselIdxMap['cdCust'];
              return setval;
            }
          }
        },
        // 輸入諸掛金額 //
        {name: 'amOutdiv', index: 'AM_OUT_DIV', width: '30px', align: 'right', editable: true,
          editrules: {integer: true, minValue: 0, maxValue: 99999999}
        },
        // 海上運賃 //
        {name: 'amFreight', index: 'AM_FREIGHT', width: '30px', align: 'right', editable: true,
          editrules: {integer: true, minValue: 0, maxValue: 99999999}
        },
        // その他諸掛 //
        {name: 'amOther', index: 'AM_OTHER', width: '30px', align: 'right', editable: true},
        // 保険 //
        {name: 'amIns', index: 'AM_INS', width: '30px', align: 'right', editable: true,
          editrules: {integer: true, minValue: 0, maxValue: 99999999}
        },
        // 控除後売上 //
        {name: 'amInfinal', index: 'AM_IN_FINAL', width: '30px', align: 'right', "classes": "cntcol",
          editrules: {integer: true, minValue: 0, maxValue: 99999999}
        },
        // 粗利 //
        {name: 'amProfit', index: 'AM_PROFIT', width: '30px', align: 'right', "classes": "cntcol",
          editrules: {integer: true, minValue: 0, maxValue: 99999999}
        },
        // 備考 //
        {name: 'nmRemark', index: 'NM_REMARK', width: '40px', align: 'left', editable: true},
        // 最終更新 //
        {name: 'tmLastupdt', index: 'TM_LASTUPDT', width: '56px', align: 'center', classes: 'tmcol'},
        // 隠し列 //
        {name: 'id', width: '0px', editable: true, edithidden: true, hidden: true},
        {name: 'dtDelivlong', width: '0px', editable: true, edithidden: true, hidden: true},
        {name: 'dtPaymentlong', width: '0px', editable: true, edithidden: true, hidden: true},
        {name: 'txtOthers', width: '0px', editable: true, edithidden: true, hidden: true}
      ];

編集可能で列が多くなったりすると、ややこしく扱いにくくなるので、データベースから読み込んだりしてます。
データベースでの設定については、別途説明します。

コメントを残す