jQuery toggleClass example

Toggle class name on click in jQuery

by rough cheap

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/ui.jqgrid.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/i18n/min/grid.gendere-de.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/jquery.jqgrid.min.js"></script>
<div id="banner-message">
  <table id="grid"></table>
</div>

JavaScript

jQuery(document).ready(function() {
  var mydata = [{
      zip7: "110-0000",
      addr: "東京都台東区以下に掲載がない場合"
    },
    {
      zip7: "110-0001",
      addr: "東京都台東区谷中"
    },
    {
      zip7: "110-0002",
      addr: "東京都台東区上野桜木"
    },
    {
      zip7: "110-0003",
      addr: "東京都台東区根岸"
    },
    {
      zip7: "110-0004",
      addr: "東京都台東区下谷"
    },
    {
      zip7: "110-0005",
      addr: "東京都台東区上野"
    },
    {
      zip7: "110-0006",
      addr: "東京都台東区秋葉原"
    },
    {
      zip7: "110-0007",
      addr: "東京都台東区上野公園"
    },
    {
      zip7: "110-0008",
      addr: "東京都台東区池之端"
    },
    {
      zip7: "110-0011",
      addr: "東京都台東区三ノ輪"
    },
    {
      zip7: "110-0012",
      addr: "東京都台東区竜泉"
    },
    {
      zip7: "110-0013",
      addr: "東京都台東区入谷"
    },
    {
      zip7: "110-0014",
      addr: "東京都台東区北上野"
    },
    {
      zip7: "110-0015",
      addr: "東京都台東区東上野"
    },
    {
      zip7: "110-0016",
      addr: "東京都台東区台東"
    }
  ];

  jQuery("#list").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: [
      '郵便番号', '住所'
    ],
    colModel: [{
        name: 'zip7',
        width: '100px'
      },
      {
        name: 'addr',
        width: '300px'
      }
    ],
    height: '300',
    width: '550',
    sortname: 'zip7',
    sortorder: "ASC",
    rowNum: 20,
    rowTotal: 2000,
    regional: 'ja', // ここをgrid.locale-**.js の**に合わせないと、navGridが表示されない。
    rowList: [20, 30, 50], // グリッドに表示する行数 -- 20行、30行、50行の選択ができる
    viewrecords: true,
    gridview: true,
    pager: '#pager', // ページャの ID
    multiselect: false,
    caption: '住所一覧'
  });
  // グリッドとページャの関連付け
  //    レコードの削除、追加、編集はなし、検索のみ有効
  jQuery("#list").jqGrid('navGrid', '#pager', {
    del: false,
    add: false,
    edit: false,
    search: true
  });
});