JQGridのインストールおよび使用法

2年 ago
結衣, 春花
1 minute

JQGridのインストールは、以下の手順で行うことができます。

  1. JQGridプラグインファイルをダウンロードします。JQGridの公式Webサイト（https://www.trirand.com/blog/）でJQGridプラグインファイルの最新バージョンをダウンロードできます。
  2. ダウンロードしたJQGridプラグインファイルを、プロジェクト内の適切な場所に展開します。
  3. HTMLファイルにJQGridプラグインの関連ファイルをインポートします。以下のようなコードを使用して、JQGridのCSSとJavaScriptファイルをHTMLファイルにインポートできます。
<link rel="stylesheet" type="text/css" href="path/to/jqgrid/css/ui.jqgrid.css" />
<script src="path/to/jqgrid/js/jquery.js"></script>
<script src="path/to/jqgrid/js/grid.locale-cn.js"></script>
<script src="path/to/jqgrid/js/jquery.jqGrid.min.js"></script>

上記コード中の path/to/jqgrid は、実際に JQGrid プラグインファイルを配置したパスに置き換えてください。

  1. それは大変望ましいです。
  2. 大丈夫。
<div id="gridContainer"></div>
  1. JavaScript のコードで JQGrid を初期化します。以下のようなコードで JQGrid を初期化し、前の手順で作成したコンテナー要素にデータを照会して表示できます。
$(function() {
$("#gridContainer").jqGrid({
url: "path/to/your/data", // 替换为你的数据源URL
datatype: "json", // 指定数据源的类型为JSON
colNames: ["列1", "列2", "列3"], // 指定列的名称
colModel: [
{name: "col1", index: "col1", width: 100}, // 指定列的配置
{name: "col2", index: "col2", width: 150},
{name: "col3", index: "col3", width: 200}
],
rowNum: 10, // 指定每页显示的行数
rowList: [10, 20, 30], // 指定可选择的每页显示行数
pager: "#gridPager", // 指定分页栏的容器元素
sortname: "col1", // 指定默认按照哪一列排序
sortorder: "desc", // 指定默认排序方式
viewrecords: true, // 显示总记录数
autowidth: true, // 自动调整列宽
height: 300 // 指定表格的高度
});
});

上のコード中の `path/to/your/data` はお使いの実際のデータソースURLに置き換える必要があります。

ステップを踏むことで、HTMLページにJQGridプラグインを取り付け、使えるようになります。そのページにアクセスすると、JQGridはデータソースからデータを受け取り、表中に表示します。

bannerAds