jQWidgets jqxDataTable filterMode属性

以下是关于“jQWidgets jqxDataTable filterMode属性”的完整攻略，包含两个示例说明：

简介

jqx 控件提供了 filterMode 属性，用于设置表格的筛选模式。通过设置 filterMode 属性，我们可以控制表格的筛选方式，以适应不同的需求。

详细攻略

以下是 jqxDataTable 控件的 filterMode 属性的详细攻略：

filterMode属性

filterMode 属性是 jqxDataTable 控件的一个属性，用于设置表格的筛选模式。该属性包含以下几个选项：

• default：默认的筛选模式，支持文本、数字和日期等类型的筛选。
• advanced：高级筛选模式，支持多个条件的组合筛选。
• excel：Excel 风格的筛选模式，支持多个条件的组合筛选，并提供了更多的筛选选项。

示例1

在此示例中，我们创建了 jqxDataTable 控件，并使用 filterMode 属性来设置表格的筛选模式为 default。

<div id="jqxdatatable"></div>
<script>
    $(document).ready(function () {
        // 创建 jqxDataTable 控件
        var data = [
            { name: '张三', age: 20, gender: '男', address: '北京市' },
            { name: '李四', age: 25, gender: '女', address: '上海市' },
            { name: '王五', age: 30, gender: '男', address: '州市' },
            { name: '赵六', age: 35, gender: '女', address: '深圳市' },
            { name: '钱七', age:40, gender: '男', address: '杭州市' },
            { name: '孙八', age: 45, gender: '女', address: '南京市' },
            { name: '周九', age: 50, gender: '男', address: '成都市' },
            { name: '吴十', age: 55, gender: '女', address: '重庆市' }
        ];
        var source = {
            datatype: 'json',
            datafields: [
                { name: 'name', type: 'string' },
                { name: 'age', type: 'number' },
                { name: 'gender', type: 'string' },
                { name: 'address', type: 'string' }
            ],
            localdata: data,
            totalrecords: data.length
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxdatatable").jqxDataTable({
            columns: [
                { text: '姓名', datafield: 'name' },
                { text: '年龄', datafield: 'age' },
                { text: '性别', datafield: 'gender' },
                { text: '地址', datafield: 'address' }
            ],
            source: dataAdapter,
            filterMode: 'default'
        });
    });
</script>

在上述代码中，我们创建了一个 jqxDataTable 控件，并使用 filterMode 属性来设置表格的筛选模式为 default。

示例2

在此示例中，我们创建了一个 jqx 控件，并使用 filterMode 属性来设置表格的筛选模式为 excel。在表格的 filter 事件中，我们使用 getFilterInformation() 方法来获取筛选信息，并将其显示在另一个 jqxDataTable 控件中。

<div id="jqxdatatable"></div>
<div="result"></div>
<script>
    $(document).ready(function () {
        // 创建 jqxDataTable 控件
        var data = [
            { name: '张三', age: 20, gender: '男', address: '北京市' },
            { name: '李四', age: 25, gender: '女', address: '上海市' },
            { name: '王五', age: 30, gender: '男', address: '州市' },
            { name: '赵六', age: 35, gender: '女', address: '深圳市' },
            { name: '钱七', age: 40, gender: '男', address: '杭州市' },
            { name: '孙八', age: 45, gender: '女', address: '南市' },
            { name: '周九', age: 50, gender: '男', address: '成都市' },
            { name: '吴十', age: 55, gender: '女', address '重庆' }
        ];
        var source = {
            datatype: 'json',
            datafields: [
                { name: 'name', type: 'string' },
                { name: 'age', type: 'number' },
                { name: 'gender', type: 'string' },
                { name: 'address', type: 'string' }
            ],
            localdata: data,
            totalrecords: data.length
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxdatatable").jqxDataTable({
            columns: [
                { text: '姓名', datafield: 'name' },
                { text: '年龄', datafield: 'age' },
                { text: '性别', datafield: 'gender' },
                { text: '地址', datafield: 'address' }
            ],
            source: dataAdapter,
            filterMode: 'excel',
            filter: function () {
                var filterInfo = $("#jqxdatatable").jqxDataTable('getFilterInformation');
                var resultData = data.filter(function (item) {
                    var match = true;
                    for (var i = 0; i < filterInfo.length; i++) {
                        var filter = filterInfo[i];
                        if (filter.condition === 'CONTAINS_CASE_SENSITIVE') {
                            match = match && item[filter.datafield].toString().indexOf(filter.value) !== -1;
                        } else if (filter.condition === 'CONTAINS_CASE_INSENSITIVE') {
                            match = match && item[filter.datafield].toString().toLowerCase().indexOf(filter.value.toLowerCase()) !== -1;
                        } else if (filter.condition === 'DOES_NOT_CONTAIN_CASE_SENSITIVE') {
                            match = match && item[filter.datafield].toString().indexOf(filter.value) === -1;
                        } else if (filter.condition === 'DOES_NOT_CONTAIN_CASE_INSENSITIVE') {
                            match = match && item[filter.datafield].toString().toLowerCase().indexOf(filter.value.toLowerCase()) === -1;
                        } else if (filter.condition === 'EQUAL') {
                            match = match && item[filter.datafield] == filter.value;
                        } else if (filter.condition === 'NOT_EQUAL') {
                            match = match && item[filter.datafield] != filter.value;
                        } else if (filter.condition === 'GREATER_THAN') {
                            match = match && item[filter.datafield] > filter.value;
                        } else if (filter.condition === 'LESS_THAN') {
                            match = match && item[filter.datafield] < filter.value;
                        } else if (filter.condition === 'GREATER_THAN_OR_EQUAL') {
                            match = match && item[filter.datafield] >= filter.value;
                        } else if (filter.condition === 'LESS_THAN_OR_EQUAL') {
                            match = match && item[filter.datafield] <= filter.value;
                        }
                    }
                    return match;
                });
                var resultSource = {
                    datatype: 'json',
                    datafields: [
                        { name: 'name', type: 'string' },
                        { name: 'age', type: 'number' },
                        { name: 'gender', type: 'string' },
                        { name: 'address', type: 'string' }
                    ],
                    localdata: resultData,
                    totalrecords: resultData.length
                };
                var resultDataAdapter = new $.jqx.dataAdapter(resultSource);
                $("#result").jqxDataTable({ source: resultDataAdapter });
            }
        });
    });
</script>

在上述代码中，我们创建了一个 jqxDataTable 控件，并使用 filterMode 属性来设置表格的筛选模式为 excel。在表格的 filter 事件中，我们使用 getFilterInformation() 方法来获取筛选信息，并将其显示在另一个 jqxDataTable 控件中。