jqgrid自带的搜索,采用本地化数据搜索,支持jqgrid自带的所有搜索方式;可切换多属性联合查询

jqgrid自带的搜索如果datatype为非local,那么搜索时会传入搜索对应的参数,然后传入到url对应的地址访问,jqgrid本身支持很丰富的搜索方式,但如果每个方式搜索时切换url,都对应写对应的接口,工作量大而且麻烦。但使用本地化数据,增、删、改时需切换成datatype非local模式。这里博主尝试良久,终于解决,直接上代码吧:

$(function () {
    pageInit();
});

function pageInit() {
    var jqGridSetter = {
        datatype: 'json',
        url: serverAddress + "apartment/select",
        colNames: ['ID', '名称'],
        colModel: [
            {
                name: 'id',
                index: 'id',
                width: 100,
                align: 'center',
                sortable: false,
                hidden: true,
                key: true
            },
            {
                name: 'name',
                index: 'name',
                width: 100,
                align: 'center',
                sortable: false,
                editable: true,
                editoptions: {size: 10},
                edittype: "text",
                search: true
            }
        ],
        height: 400,
        autowidth: true,
        shrinkToFit: true,
        rowNum: 10,
        rowList: [5, 10, 15],
        pager: '#pager',
        mtype: 'post',
        // 注意:id隐藏了,如果在datatype为local下,会报:Cannot read property 'id' of undefined at Object.getAccessor,实在是坑
        // sortname: 'id',
        viewrecords: true,
        caption: '部门'
    };
    $('#list').jqGrid(jqGridSetter);
    $('#list').jqGrid('navGrid', '#pager', {edit: true, add: true, del: true, search: true});
    $('#add_list span').click(function () {
        $('#list').setGridParam({datatype: 'json', editurl: serverAddress + "apartment/insert"});
    });
    $('#edit_list span').click(function () {
        $('#list').setGridParam({datatype: 'json', editurl: serverAddress + "apartment/update"});
    });
    $('#del_list span').click(function () {
        $('#list').setGridParam({datatype: 'json', editurl: serverAddress + "apartment/delete"});
    });
    $('#search_list span').click(function () {
        mui.getJSON(serverAddress + "apartment/select", {}, function (data) {
            $('#list').setGridParam({datatype: 'local', data: data});
        });
    });
}

多属性联合查询:

$('#list').jqGrid('navGrid', '#pager', {edit: false, add: false, del: false}, {}, {}, {}, {multipleSearch: true});
发布了388 篇原创文章 · 获赞 105 · 访问量 31万+

猜你喜欢

转载自blog.csdn.net/haoranhaoshi/article/details/105396762
今日推荐