如何使用c#在jQGrid中执行服务器端的搜索操作?

时间:2014-05-26 10:53:26

标签: c# asp.net jqgrid

我在我的应用程序中实现了JqGrid。我已经完成了编辑,删除,插入操作,但是我无法搜索记录。我已经绑定了来自sql server的数据。

这是我的剧本

<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');
        jQuery("#contactsList").jqGrid('setGridParam', { url: "WebService.asmx/searchrow", page: 1 }).trigger("reloadGrid");
    });
function getAllSelectOptions() {
    var states = { 'male': 'M', 'female': 'F' };

    return states;

}

</script>

这里我给出了在我的asmx文件中搜索的参考,比如WebService.asmx / searchrow,当我点击弹出窗口中的find按钮时,光标移动到url中的指定方法。 这是我的问题,如何让用户输入搜索参数名称和值来执行搜索操作。

我已经定义了搜索方法,如下面的

  [WebMethod]
   public List<Person> searchrow(HttpContext context)
   {
       return null;
   }

请帮我解决这个问题或任何其他在JQGrid中进行搜索操作的方法。

感谢 普尔纳

0 个答案:

没有答案