如何在jqgrid上实现搜索？

在jqGrid中实现搜索功能，可以使用jqGrid的内置搜索功能，也可以使用自定义搜索功能。以下是两种方法的详细说明：

方法一：使用jqGrid内置搜索功能

jqGrid提供了内置的搜索功能，可以通过以下步骤实现搜索功能：

在jqGrid初始化时，设置search选项为true，以启用搜索功能。
在需要搜索的列上设置searchoptions选项，以定义搜索选项。
在需要搜索的列上设置stype选项，以定义搜索类型。
调用jQuery("#grid_id").jqGrid('filterGrid', postdata, refresh)方法来执行搜索。

以下是一个示例代码：

jQuery("#grid_id").jqGrid({
    url: 'mydata.json',
    datatype: 'json',
    colNames: ['Column 1', 'Column 2', 'Column 3'],
    colModel: [
        { name: 'col1', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, stype: 'text' },
        { name: 'col2', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, stype: 'text' },
        { name: 'col3', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, stype: 'text' }
    ],
    search: true,
    pager: '#pager'
});

jQuery("#grid_id").jqGrid('navGrid', '#pager', { search: true });

function searchGrid() {
    var postdata = jQuery("#grid_id").jqGrid('getGridParam', 'postData');
    jQuery("#grid_id").jqGrid('setGridParam', { search: true });
    jQuery("#grid_id").jqGrid('filterGrid', postdata, refresh);
}

方法二：使用自定义搜索功能

如果内置搜索功能不能满足需求，可以使用自定义搜索功能。以下是一个示例代码：

jQuery("#grid_id").jqGrid({
    url: 'mydata.json',
    datatype: 'json',
    colNames: ['Column 1', 'Column 2', 'Column 3'],
    colModel: [
        { name: 'col1', search: true },
        { name: 'col2', search: true },
        { name: 'col3', search: true }
    ],
    pager: '#pager'
});

jQuery("#search_button").click(function() {
    var search_col1 = jQuery("#search_col1").val();
    var search_col2 = jQuery("#search_col2").val();
    var search_col3 = jQuery("#search_col3").val();

    var postdata = jQuery("#grid_id").jqGrid('getGridParam', 'postData');
    postdata.filters = '{"groupOp":"AND","rules":[';

    if (search_col1) {
        postdata.filters += '{"field":"col1","op":"cn","data":"' + search_col1 + '"},';
    }

    if (search_col2) {
        postdata.filters += '{"field":"col2","op":"cn","data":"' + search_col2 + '"},';
    }

    if (search_col3) {
        postdata.filters += '{"field":"col3","op":"cn","data":"' + search_col3 + '"},';
    }

    postdata.filters = postdata.filters.slice(0, -1) + ']}';

    jQuery("#grid_id").jqGrid('setGridParam', { search: true, postData: postdata });
    jQuery("#grid_id").jqGrid('filterGrid', postdata, refresh);
});

在这个示例中，我们创建了一个搜索表单，包含三个搜索框，每个搜索框对应一个列。当用户点击搜索按钮时，我们使用jqGrid('getGridParam', 'postData')方法获取当前jqGrid的postData对象，然后根据搜索表单中的值设置filters属性，最后调用jqGrid('setGridParam', { search: true, postData: postdata })和jqGrid('filterGrid', postdata, refresh)方法来执行搜索。

如何在jqgrid上实现搜索？

方法一：使用jqGrid内置搜索功能

方法二：使用自定义搜索功能

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐