easyui datagrid 在toolbar添加模糊搜索

您可以在easyui datagrid的toolbar中添加一个搜索框，然后通过监听搜索框的输入事件，在后台进行模糊搜索。

以下是一个示例代码：

$('#datagrid').datagrid({
    url: 'your_data_url',
    toolbar: [{
        text: '搜索：'
    },{
        xtype: 'textfield',
        id: 'searchbox',
        width: 200,
        listeners: {
            change: function(value) {
                $('#datagrid').datagrid('load', {
                    search: value
                });
            }
        }
    }],
    queryParams: {
        search: ''
    }
});

在上面的代码中，我们在toolbar中添加了一个搜索框，然后通过监听change事件，在输入框中输入内容时触发load方法重新加载datagrid的数据。在load方法中，我们通过queryParams传递了一个search参数，后台可以根据这个参数进行模糊搜索。

相关问题

easyui datagrid 在toolbar添加模糊搜索，不调用后台的情况下过滤数据

如果您希望在前端不调用后台的情况下过滤数据，可以使用easyui datagrid提供的本地过滤功能。

以下是一个示例代码：

// 初始化datagrid
$('#datagrid').datagrid({
    url: 'your_data_url',
    toolbar: [{
        text: '搜索：'
    },{
        xtype: 'textfield',
        id: 'searchbox',
        width: 200,
        listeners: {
            change: function(value) {
                // 过滤数据
                $('#datagrid').datagrid('loadData', filterData(value));
            }
        }
    }]
});

// 本地过滤数据
function filterData(searchValue) {
    // 获取所有数据
    var data = $('#datagrid').datagrid('getData').rows;
    // 如果搜索值为空，则返回所有数据
    if (!searchValue) {
        return data;
    }
    // 过滤数据
    var result = [];
    for (var i = 0, len = data.length; i < len; i++) {
        var row = data[i];
        // 判断是否包含搜索值
        if (JSON.stringify(row).indexOf(searchValue) >= 0) {
            result.push(row);
        }
    }
    return result;
}

在上面的代码中，我们通过监听搜索框的change事件，在输入框中输入内容时触发本地过滤数据的函数filterData。在这个函数中，我们通过datagrid的getData方法获取所有数据，然后根据输入值进行过滤，将过滤后的结果通过loadData方法重新加载datagrid的数据。

easyui datagrid 在toolbar添加模糊搜索，不调用后台的情况下过滤数据，要最简单的

可以通过EasyUI datagrid的onHeaderContextMenu事件来实现在toolbar中添加模糊搜索的功能，具体实现步骤如下：

1. 在datagrid的toolbar中添加一个搜索框和一个搜索按钮：

<div id="toolbar">
    <input id="searchbox" class="easyui-searchbox" data-options="searcher:doSearch" style="width:200px" placeholder="请输入关键字"/>
    <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">搜索</a>
</div>

2. 在datagrid的onHeaderContextMenu事件中添加过滤数据的逻辑：

$('#datagrid').datagrid({
    onHeaderContextMenu: function(e, field){
        e.preventDefault();
        if (!$('#mm').length){
            $('<div id="mm" style="width:100px;"></div>').appendTo('body');
            $('#mm').menu({
                onClick: function(item){
                    if (item.name == 'clear'){
                        $('#datagrid').datagrid('removeFilterRule');
                    } else {
                        $('#datagrid').datagrid('addFilterRule', {
                            field: field,
                            op: 'contains',
                            value: item.name
                        });
                    }
                    $('#datagrid').datagrid('doFilter');
                }
            });
            var fields = $('#datagrid').datagrid('getColumnFields');
            for (var i=0; i<fields.length; i++){
                var field = fields[i];
                var col = $('#datagrid').datagrid('getColumnOption', field);
                if (col.title && col.field){
                    $('<div data-options="name:\''+col.field+'\'">'+col.title+'</div>').appendTo('#mm');
                }
            }
            $('<div class="menu-sep"></div>').appendTo('#mm');
            $('<div data-options="name:\'clear\'">清除过滤</div>').appendTo('#mm');
        }
        $('#mm').menu('show', {
            left:e.pageX,
            top:e.pageY
        });
    }
});

3. 在doSearch函数中实现搜索逻辑，获取搜索框中的值，并调用datagrid的load方法重新加载数据：

function doSearch(){
    var keyword = $('#searchbox').searchbox('getValue');
    $('#datagrid').datagrid('load', {
        keyword: keyword
    });
}

最后，在后台的接口中，获取前端传递过来的keyword参数，对数据进行过滤即可。