0

我创建了 JqGrid 来加载如下所示的一些记录。

  <script type="text/javascript">
        $(document).ready(function () {
            $('#jqgRequests').jqGrid({
                defaults: {
                    recordtext: "View {0} - {1} of {2}",
                    emptyrecords: "No Request Found",
                    loadtext: "Loading...",
                    pgtext: "Page {0} of {1}"
                },
                //url from wich data should be requested
                url: '@Url.Action("LoadRequest")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: ['Is Approved','Requestor', 'Request Type', 'Request Date', 'Approved Date', 'Package','Comments','RequestID', '','',''],
                //columns model
                colModel: [

                         { name: 'IsApproved',
                               formatter: function (cellvalue, options, rowObject) {
                                   var status = rowObject[0];
                                   if (status == 1) {
                                       return '<input type="checkbox" name="approval" checked disabled="disabled">';
                                   }

                                   else if(status==2) {

                                    return '<img  src="@Url.Content("~/Content/images/reject.jpg")"></img>';

                                   }
                                   else{
                                    return '<input type="checkbox" name="approval" disabled="disabled" >';
                                   }

                               },sortable:false, align: 'center', width: 80, index: 'subColumn'
                           },
                         { name: 'Requestor', index: 'Requestor', width: 170, align: 'left' },
                         { name: 'Request Type', index: 'RequestType', width: 90, align: 'left' },
                         { name: 'RequestDate', index: 'RequestDate', formatter: 'date', formatoptions: { srcformat: 'FullDateTime', newformat: 'd/m/Y g:i:s A' }, width: 120, align: 'left' },
                         { name: 'ApprovedDate', index: 'ApprovedDate', formatter: 'date', formatoptions: { srcformat: 'FullDateTime', newformat: 'd/m/Y g:i:s A' }, width: 120, align: 'left' },
                         { name: 'Package', index: 'Package', width: 150, align: 'left' },
                         { name: 'Comments', index: 'Comments', width: 300, align: 'left' },
                         { name: 'RequestID', index: 'RequestID', width: 1, align: 'left',hidden:true },

                         { name: 'Approve',
                             formatter: function (cellvalue, options, rowObject) {
                                 var status = rowObject[0];
                                 if(status==1)
                                 {
                                 return  '@Html.ActionLink("Approve", null, null, new { @style = "color:blue;font-weight:bold;", onclick = "return WarningPopup('Already approved');", href = "#" })';

                                 }
                                 else{
                                   var x = '@Html.ActionLink("Approve", null, null, new { @style = "color:Blue;font-weight:bold;", onclick = "return ConfirmPopup('myId');", href = "#"  })';
//                                 var x = '@Html.ActionLink("Approve", "Approve", "Dashboard", new { requestId = "myId" }, new { @style = "color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to approve this request?');" })';
                                 return x.replace("myId",rowObject[7]);
                                 }
                             },sortable:false, align: 'left', width: 45
                         },
                           { name: 'Reject',
                             formatter: function (cellvalue, options, rowObject) {
                                      var status = rowObject[0];
                                 if(status==2)
                                 {
                                 return  '@Html.ActionLink("Reject", null, null, new { @style = "color:blue;font-weight:bold;", onclick = "return WarningPopup('Already rejected');", href = "#" })';

                                 }
                                 else{
                                  var x = '@Html.ActionLink("Reject", null, null, new { @style = "color:Blue;font-weight:bold;", onclick = "return Rejectpopup('myId');", href = "#"  })';
                                // var x = '@Html.ActionLink("Reject", "Reject", "Dashboard", new { requestId = "myId" }, new { @style = "color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to reject this request?');" })';
                                 return x.replace("myId",rowObject[7]);
                                 }
                             },sortable:false, align: 'left', width: 60
                         },
                          { name: 'More',
                             formatter: function (cellvalue, options, rowObject) {
//                                var x = "<a class='btnMore' onclick='GetDetail('myId');' style = 'color:blue;font-weight:bold;' href='#'>More Detail</a>"
                             var x='@Html.ActionLink("Detail", null, null, new { @style = "color:blue;font-weight:bold;", onclick = "return GetDetail('myId');", href = "#" })';

                               return x.replace("myId",rowObject[7]);

                             },sortable:false, align: 'left', width: 80
                         }
                         ],
                //pager for grid
                pager: $('#jqgpRequests'),
                //number of rows per page
                rowNum: 25,
                //initial sorting column
                sortname: 'RequestID',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total records count
                viewrecords: true,
                //grid height
                height: '100%'
            });
        });
        </script>

行动结果

   [AcceptVerbs(HttpVerbs.Post)]
            public JsonResult LoadRequest(JqGridRequest request)
            {
                int totalRecords = _dashboardRepository.RequestCount;
                var response = new JqGridResponse()
                {
                    TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
                    PageIndex = request.PageIndex,
                    TotalRecordsCount = totalRecords
                };
                const string subColumn = "";
                foreach (var dashboard in _dashboardRepository.LoadAllRequests(request.SortingName, request.SortingOrder.ToString(), request.PageIndex, request.RecordsCount))
                {
                    response.Records.Add(new JqGridRecord(dashboard.RequestID.ToString(), new List<object>()
                {
                    dashboard.IsApproved,
                    dashboard.Requestor,
                    dashboard.RequestType,
                    dashboard.RequestDate,
                    dashboard.ApprovedDate,
                    dashboard.Package,
                    dashboard.Comments,
                    dashboard.RequestID
                }));
                }
                return new JqGridJsonResult { Data = response };
            }

这个 jqGrid 在页面加载时加载。我还添加了一个用于过滤的下拉列表。为此，我需要为 JqGridRequest 类发布一些参数。我怎么可能呢？

4

2 回答 2

0

假设您的下拉 id 是ddlFilter您可以这样编写 JavaScript 更改事件处理程序：

$('#ddlFilter').on('change', function(e) {
    $('#jqgRequests').setGridParam({ postData: { FilterValue: $(this).val(); } }).trigger('reloadGrid', [{ page: 1 }]);
});

在服务器端，您可以创建以下视图模型来处理发布数据：

public class PostDataViewModel
{
    public string FilterValue { get; set; }
}

并将其作为另一个参数添加到您的操作中：

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult LoadRequest(JqGridRequest request, PostDataViewModel postData)
{
    ...
}

除非您在问题中没有描述某些特定要求或边缘情况，否则这应该可以解决问题。

于 2013-03-22T12:45:12.093 回答
0

如果我理解您是正确的，您可以按照旧答案中的建议进行操作。

如果您在页面上有例如<select id="mySelect">...</select>，您可以使用 jqGrid 选项

postData: {
    myFilter: function () {
        return $("#mySelect option:selected").val();
    }
}

将选择框的值与其他标准 jqGrid 参数一起发送（请参阅 参考资料JqGridRequest）。如果您还想在每次更改选择后重新加载网格，您可以使用.trigger("reloadGrid"). 您只需要设置change和keyup事件处理程序并调用.trigger("reloadGrid")它需要。有关更多代码示例，请参见答案。

于 2013-03-22T13:04:09.503 回答