JqGridの使用方法を詳しく解説します。

2年 ago
綾乃, 一希
1 minute

JqGridは、jQueryベースのテーブルプラグインであり、開発者が強力なテーブルやデータ表示インタフェースを迅速に構築するのに役立ちます。以下はJqGridの使用方法の詳細です。

  1. HTMLページには、jQueryライブラリ、JqGridプラグインファイル、必要なスタイルファイルをインポートする必要があります。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.6/dist/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.6/dist/css/ui.jqgrid.min.css">
  1. HTMLテーブルコンテナの定義：HTMLページ内に、表を表示するためのdivコンテナを定義します。
<div id="gridContainer"></div>
  1. ジェイクエリ(copyright)
$(function() {
  $("#gridContainer").jqGrid({
    // 表格配置选项
    url: "data.json", // 后台数据接口
    datatype: "json", // 数据类型
    colModel: [ // 列定义
      {label: "姓名", name: "name"},
      {label: "年龄", name: "age"},
      {label: "性别", name: "gender"}
    ],
    rowNum: 10, // 每页显示的记录数
    rowList: [10, 20, 30], // 每页显示记录数选项
    pager: "#gridPager", // 分页栏
    height: 400, // 表格高度
    autowidth: true, // 自动调整列宽
    caption: "用户列表" // 表格标题
  });
});
  1. データの読み込み：URLやデータの種類を設定することにより、バックエンドから提供されるデータを読み込むことができます。
$("#gridContainer").jqGrid("setGridParam", {url: "data.json", datatype: "json"}).trigger("reloadGrid");
  1. JqGridが提供する方法を使用して、ソート、フィルタ、ページネーションなど、他の操作を定義することができます。
$("#gridContainer").jqGrid("sortGrid", "name", true); // 根据姓名排序（升序）
$("#gridContainer").jqGrid("filterToolbar", {searchOnEnter: false}); // 显示筛选工具栏
$("#gridContainer").jqGrid("navGrid", "#gridPager", {edit: false, add: false, del: false}); // 显示导航栏（编辑、新增、删除操作）

JqGridの使用方法を説明しました。簡単な設定と操作で、強力なテーブル表示画面を実現できます。

bannerAds