jQWidgets jqxGrid 可过滤属性介绍

简介

jQWidgets jqxGrid 是一个基于 jQuery 的网格控件，提供了丰富的数据操作功能，包括排序、分页、筛选等。其中，可过滤属性提供了便捷的筛选操作，使用户可以通过简单的输入快速地找到所需的数据。

使用

要使用可过滤属性，需要设置 grid 的 filterable 属性为 true，并设置 filtermode 为 “advanced” 或 “simple”。

$('#grid').jqxGrid({
    filterable: true,
    filtermode: 'advanced' // 可选值还有 "simple"
    // ...
});

• 当 filtermode 设为 “advanced” 时，会自动生成一个表单界面，供用户进行灵活的筛选操作。具体的可选条件和操作方法可以查看 jqxGrid 的官方文档。
• 当 filtermode 设为 “simple” 时，则只会显示一个输入框，用户输入的内容会被匹配到所有可搜索的列中。

除此之外，还可以对特定列进行筛选，只需要在列的定义中将 filterable 属性设置为 true 即可。

{
    text: '姓名',
    datafield: 'name',
    filterable: true,
    // ...
}

示例

以下是一个使用可过滤属性的简单示例：

$('#grid').jqxGrid({
    width: '100%',
    height: 400,
    filterable: true,
    columns: [
        { text: 'ID', datafield: 'id', width: '10%' },
        { text: '姓名', datafield: 'name', width: '20%', filterable: true },
        { text: '年龄', datafield: 'age', width: '20%', filterable: true },
        { text: '地址', datafield: 'address', width: '50%', filterable: true }
    ],
    source: {
        data: [
            { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
            { id: 2, name: '李四', age: 33, address: '上海市浦东新区' },
            { id: 3, name: '王五', age: 25, address: '广州市天河区' },
            { id: 4, name: '赵六', age: 30, address: '深圳市福田区' }
        ],
        dataType: 'array'
    }
});

该示例生成了一个带有过滤功能的网格，其中“姓名”、“年龄”和“地址”三列可筛选，用户输入筛选条件后，网格会自动过滤出符合条件的数据，如下图所示：

参考文献

• jqxGrid 筛选属性文档