jqxgrid詳解

一、jqxgrid簡介

jqxgrid 是一個易於使用且功能強大的 jQuery Grid 控制項。它提供了各種強大的功能，如分頁，排序，分組，搜索以及自定義列。此外，它還提供了先進的特性（例如，多選、分層列標題）和樣式（如固定表頭和列、自動行高、分頁操作、懸停樣式和滑鼠指針）。

二、jqxgrid的基本使用方法

在頁面中引入 jqxgrid 的 js 和 css 文件：

<link href="jqx.base.css" rel="stylesheet" type="text/css" />
<link href="jqx.ui.css" rel="stylesheet" type="text/css" />
<script src="jquery-3.5.1.min.js"></script>
<script src='jqxcore.js'></script>
<script src='jqxdata.js'></script>
<script src='jqxbuttons.js'></script>
<script src='jqxscrollbar.js'></script>
<script src='jqxmenu.js'></script>
<script src='jqxgrid.js'></script>
<script src='jqxgrid.filter.js'></script>
<script src='jqxgrid.selection.js'></script>
<script src='jqxgrid.sort.js'></script>
<script src='jqxdatetimeinput.js'></script>
<script src='jqxcalendar.js'></script>
<script src='jqxdropdownlist.js'></script>
<script src='jqxcheckbox.js'></script>

放置一個具有ID為「grid」名稱的 DIV 元素作為 jqxgrid 的容器:

<div id='grid'></div>

在JavaScript代碼中添加以下代碼以初始化 jqxgrid：

//數據源
var source =
{
    datatype: "json",
    datafields: [
        { name: 'id', type: 'string' },
        { name: 'name', type: 'string' },
        { name: 'age', type: 'string' },
        { name: 'gender', type: 'string' }
    ],
    url: "data.php"
};

// jqxGrid的設置
var dataAdapter = new $.jqx.dataAdapter(source);

$("#grid").jqxGrid(
{
    width: 680,
    source: dataAdapter,
    pageable: true,
    sortable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年齡', datafield: 'age', width: 150 },
        { text: '性別', datafield: 'gender', width: 150 }
    ]
});

三、jqxgrid的高級功能

1、分頁

設置 jqxGrid 可以分頁顯示，只需將 pageable 屬性設置為 true，同時設定每頁要顯示的行數。以下代碼設置每頁顯示十行：

$("#grid").jqxGrid(
{
    width: 680,
    source: dataAdapter,
    pageable: true,
    pageSize: 10,
    sortable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年齡', datafield: 'age', width: 150 },
        { text: '性別', datafield: 'gender', width: 150 }
    ]
});

2、排序

通過 jqxGrid 可以方便地對每列數據進行排序。只需將 sortable 屬性設置為 true。

$("#grid").jqxGrid(
{
    width: 680,
    source: dataAdapter,
    pageable: true,
    pageSize: 10,
    sortable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年齡', datafield: 'age', width: 150 },
        { text: '性別', datafield: 'gender', width: 150 }
    ]
});

3、分組

通過 jqxGrid 可以方便地對數據進行分組。只需將 groupable 屬性設置為 true。以下代碼先按照性別分組，然後按照年齡排序：

$("#grid").jqxGrid(
{
    width: 680,
    source: dataAdapter,
    pageable: true,
    pageSize: 10,
    groupable: true,
    groups: ['gender'],
    sortmode: 'manyimmutable',
    sortable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年齡', datafield: 'age', width: 150 },
        { text: '性別', datafield: 'gender', width: 150 }
    ]
});

4、搜索

jqxGrid 提供了一個內置的搜索框，可以在表格中搜索數據。需要使用 filterable 屬性，並設置編輯器類型為 text。

$("#grid").jqxGrid(
{
    width: 680,
    source: dataAdapter,
    pageable: true,
    pageSize: 10,
    sortable: true,
    filterable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: 150 },
        { text: '姓名', datafield: 'name', width: 150 },
        { text: '年齡', datafield: 'age', width: 150 },
        { text: '性別', datafield: 'gender', width: 150 }
    ]
});

五、總結

jqxGrid 是一個功能強大，而且可以根據需要進行自定義的 jQuery Grid 控制項。在本文中，我們介紹了 jqxGrid 的基本用法，並介紹了它的一些高級特性。大家可以根據自己的需要，進一步了解 jqxGrid 的各種強大功能。