如何在JQGrid中执行搜索操作？ [英] How to perform the search operation in JQGrid ?

问题描述

大家好，



我需要帮助才能在C＃Jqgrid中实现搜索操作。我在谷歌搜索过我已经为jQGrid写了一个脚本。我已经从sql server数据库绑定了一个数据，它工作正常，我已经使用jQGrid实现了编辑，插入和删除操作。

用于调用我用Web服务编写的方法。现在我的问题是如何在jQGrid中的过滤器工具栏和直接搜索中实现搜索操作。



听到我的剧本

Hi all,

I need help to implement the search operation in C# Jqgrid. I have searched in google I have written a Script for jQGrid . I have bind a data from sql server database it is working fine and I have implemented a edit,insert and delete operations Using jQGrid.
For calling of methods I have written in Web service. Now my problem is how can I Implement the search operation in "filter Toolbar" and "Direct search" in the jQGrid.

Hear is my script

<script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery.extend(jQuery.jgrid.edit, {
                closeAfterEdit: true,
                closeAfterAdd: true,

                ajaxEditOptions: { contentType: "application/json" },
                serializeEditData: function (postData) {
                    var postdata = { 'data': postData };
                    return JSON.stringify(postdata); ;
                }
            });
            jQuery.extend(jQuery.jgrid.del, {
                ajaxDelOptions: { contentType: "application/json" },

                onclickSubmit: function (eparams) {
                    var retarr = {};
                    var sr = jQuery("#contactsList").getGridParam('selrow');
                    rowdata = jQuery("#contactsList").getRowData(sr);
                    retarr = { PID: rowdata.PID };

                    return retarr;
                },
                serializeDelData: function (data) {
                    var postData = { 'data': data };
                    return JSON.stringify(postData);
                }
            });
            $.extend($.jgrid.defaults,
                  { datatype: 'json' }
                  );

            jQuery.extend(jQuery.jgrid.search, {
            
            });


            $("#contactsList").jqGrid({

                url: '/WebService.asmx/GetListOfPersons1',

                datatype: 'json',

                mtype: 'POST',

                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                serializeGridData: function (postData) {

                    return JSON.stringify(postData);
                },

                jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
                colNames: ['PID', 'First Name', 'Last Name', 'Gender'],
                colModel: [
                    { name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true },
                    { name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true },
                    { name: 'LastName', width: 180, sortable: false, hidden: false, editable: true },
                    { name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cellEdit: true, edittype: "select", formater: 'select', editrules: { required: true },
                        editoptions: { value: getAllSelectOptions() }
                    }],
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'PID',
                sortorder: "asc",
                pager: jQuery('#gridpager'),
                viewrecords: true,
                gridview: true,
                height: '100%',
                editurl: '/WebService.asmx/EditRow',
                searchurl: '/WebService.asmx/Searchrow',
                caption: 'Person details'
            }).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: true, search: true });
            jQuery("#contactsList").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true });
           // jQuery("#contactsList").setGridParam({ data: results.rows, localReader: reader }).trigger('reloadGrid');
        });
    function getAllSelectOptions() {
        var states = { 'male': 'M', 'female': 'F' };

        return states;

    }

    </script>

请帮我在客户端或服务器端执行搜索操作。







谢谢

purna

please help me to perform the search operation in client side or server side.



thanks
purna

推荐答案

.extend（

.jgrid.defaults，
{datatype：' json'}
）;

jQuery.extend（jQuery.jgrid.search，{

}）;

.jgrid.defaults, { datatype: 'json' } ); jQuery.extend(jQuery.jgrid.search, { });

（ ＃contactsList）。jqGrid（{

url：' / WebService.asmx / GetListOfPersons1'，

datatype：' json'，

mtype：' POST'，

ajaxGridOptions：{contentType：' application / json; charset = utf-8'}，
serializeGridData： function （postData）{

返回 JSON .stringify（postData）;
}，

jsonReader：{repeatitems： false ，root： d.rows，page： d.page，总计： d.total，记录： < span class =code-string> d.records}，
colNames：[' PID'，' 名字'，' 姓氏'，' 性别']，
colModel：[
{name：' PID'，width： 60 ，对齐： center，隐藏： true ，searchtype： integer，可编辑： true }，
{name：' FirstName'，width： 180 ，可排序： true ，隐藏： false ，可编辑： true }，
{name：' LastName'，width： 180 ，sortable： false ，隐藏： false ，可编辑： true }，
{name：' Gender'，width ： 180 ，可排序： false ，隐藏： false ，可编辑： true ，cellEdit： true ，edittype： select，formater：' select'，editrules：{required： true }，
editoptions：{value：getAllSelectOptions（）}
}]，
rowNum： 10 ，
rowList：[ 10 ， 20 ， 30 ]，
sortname：' PID'，
sortorder ： asc，
pager：jQuery（' ＃gridpager'），
viewrecords： true ，
gridview： true ，
height：' 100％'，
editurl：' / WebService.asmx / EditRow'，
searchurl：' / WebService.asmx / Searchrow'，
标题：' 人员详细信息'
}）。jqGrid（' navGrid'，' #gridpager'，{edit： true ，添加： true ，del： true ，搜索： true }）;
jQuery（ ＃contactsList）。jqGrid（' filterToolbar'，{stringResult： true ，searchOnEnter： false ，searchOperators： true }）;
// jQuery（＃contactsList）。setGridParam（{data：results.rows，localReader：reader }）。trigger（'reloadGrid'）;
}）;
function getAllSelectOptions（）{
var states = {' male'：' M'，' female'：' F'};

return 状态;

}

< / script>

("#contactsList").jqGrid({ url: '/WebService.asmx/GetListOfPersons1', datatype: 'json', mtype: 'POST', ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, serializeGridData: function (postData) { return JSON.stringify(postData); }, jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" }, colNames: ['PID', 'First Name', 'Last Name', 'Gender'], colModel: [ { name: 'PID', width: 60, align: "center", hidden: true, searchtype: "integer", editable: true }, { name: 'FirstName', width: 180, sortable: true, hidden: false, editable: true }, { name: 'LastName', width: 180, sortable: false, hidden: false, editable: true }, { name: 'Gender', width: 180, sortable: false, hidden: false, editable: true, cell true, edittype: "select", formater: 'select', editrules: { required: true }, editoptions: { value: getAllSelectOptions() } }], rowNum: 10, rowList: [10, 20, 30], sortname: 'PID', sortorder: "asc", pager: jQuery('#gridpager'), viewrecords: true, gridview: true, height: '100%', editurl: '/WebService.asmx/EditRow', searchurl: '/WebService.asmx/Searchrow', caption: 'Person details' }).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: true, search: true }); jQuery("#contactsList").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true }); // jQuery("#contactsList").setGridParam({ data: results.rows, localReader: reader }).trigger('reloadGrid'); }); function getAllSelectOptions() { var states = { 'male': 'M', 'female': 'F' }; return states; } </script>

请帮我在客户端或服务器端执行搜索操作。







谢谢

purna

please help me to perform the search operation in client side or server side.



thanks
purna

这篇关于如何在JQGrid中执行搜索操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！