2

我正在尝试在 Ajax 调用的成功函数中填充 JqGrid。我的 ajax 调用将日期参数传递给将过滤结果的函数。我的网格已加载，但未显示任何数据，并且在我的网格标题上方显示正在加载...。我正在使用下拉菜单根据日期过滤结果。我的 json 数据已被验证为有效。

 $(document).ready(function () {
$("[name='DDLItems']").change(function () {
    var selection = $(this).val();
    var dataToSend = {
        //holds selected value 
        idDate: selection
    };

    $.ajax({
        type: "POST",
        url: "Invoice/Filter",
        data: dataToSend,
        success: function (dataJson) {
       //      alert(JSON.stringify(dataJson));
            $("#grid").jqGrid({ //set your grid id

                data:  dataJson, //insert data from the data object we created above
                datatype: json,
                mtype: 'GET',
                contentType: "application/json; charset=utf-8",
                width: 500, //specify width; optional
                colNames: ['Invoice_Numbers', 'Amt_Totals','f', 'ff', 't'], //define column names
                colModel: [                    
                { name: 'Invoice_Number', index: 'Invoice_Number', key: true, width: 50 },
                { name: 'Amt_Total', index: 'Amt_Total', width: 50 },
                { name: 'Amt_Due', index: 'Amt_Due', width: 50 },
                { name: 'Amt_Paid', index: 'Amt_Paid', width: 50 },
                { name: 'Due_Date', index: 'Due_Date', width: 50 },

                ], //define column models

                pager: jQuery('#pager'), //set your pager div id
                sortname: 'Invoice_Number', //the column according to which data is to be sorted; optional
                viewrecords: false, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
                sortorder: "asc", //sort order; optional
                caption: "jqGrid Example", //title of grid                    
            });
        },

- 控制器

 [HttpPost]                     // Selected DDL value 
    public JsonResult Filter(int idDate)      
    {              
        switch (idDate)
           // switch statement goes here

        var dataJson = new UserBAL().GetInvoice(date);        

      return Json(new  { agent = dataJson}, JsonRequestBehavior.AllowGet);
4

2 回答 2

3

如果其他人遇到此问题，这就是答案。这就是我最终做的事情，行被过滤通过我传递给函数 URL 的日期参数。在 Ajax 调用中填充 Grid 似乎也是一个问题，所以我不得不把它拿出来。

 public JsonResult JqGrid(int idDate)
    {
         switch (idDate)

         #region switch date
            --Switch Statement--
        #endregion
        var invoices = new UserBAL().GetInvoice(date);

        return Json(invoices, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]  // pretty much does nothing, used as a middle man for ajax call 
    public JsonResult JqGridz(int idDate)
    {
        switch (idDate)
        #region switch date

          --Switch Statement--
        #endregion

        var invoices = new UserBAL().GetInvoice(date);

        return Json(invoices, JsonRequestBehavior.AllowGet);
    }

是的，这两个功能看起来非常多余，而且确实如此。我不知道为什么我的帖子不会更新数据，但我每次都需要重新加载网格，当我这样做时，它会调用第一个函数。所以是的，帖子 jqGridz 有点像一个中间人。

这是我使用的 jquery 代码

var dropdown
var Url = '/Invoice/JqGrid/?idDate=0'  
         $(document).ready(function () {

$("#jqgrid").jqGrid({ 
    url: Url,
    datatype: 'json',
    mtype: 'GET', //insert data from the data object we created above 
    width: 500,  
    colNames: ['ID','Invoice #', 'Total Amount', 'Amount Due', 'Amount Paid', 'Due Date'], //define column names
    colModel: [
    { name: 'InvoiceID', index: 'Invoice_Number', key: true, hidden: true, width: 50, align: 'left' },
    { name: 'Invoice_Number', index: 'Invoice_Number', width: 50,  align: 'left'},
    { name: 'Amt_Total', index: 'Amt_Total', width: 50, align: 'left' },
    { name: 'Amt_Due', index: 'Amt_Due', width: 50, align: 'left' },
    { name: 'Amt_Paid', index: 'Amt_Paid', width: 50, align: 'left' },
    { name: 'Due_Date', index: 'Due_Date', formatter: "date", formatoptions: { "srcformat": "Y-m-d", newformat: "m/d/Y" }, width: 50, align: 'left' },

    ],                     
    pager: jQuery('#pager'), 
    sortname: 'Invoice_Number',  
    viewrecords: false, 
    editable: true,
    sortorder: "asc",  
    caption: "Invoices",       
});
$("[name='DDLItems']").change(function () {
    var selection = $(this).val();
     dropdown = {
        //holds selected value 
        idDate: selection
    };

    $.ajax({

        type: "POST",
        url: "Invoice/JqGridz",
        data: dropdown,
        async: false,
        cache: false,
        success: function (data) {         
            $("#jqgrid").setGridParam({ url: Url + selection})               
             $("#jqgrid").trigger('reloadGrid');
        }
    })      

  })
});
于 2013-09-20T19:39:00.147 回答
0

您实际上是否将值传递给您的控制器？我看到你有data: dataToSend哪些与你的控制器不匹配idDate。

您尝试以这种方式设置网格是否有原因？您是否不想处理分页，或者我什至不确定您的设置是否会在用户第二次选择日期时处理重建网格。

我个人的建议是你：

  • 单独设置您的网格，如果您不希望它在页面加载时显示，则隐藏
  • 将它的数据类型设置为本地，这样网格就不会在页面加载时加载
  • 关于更改事件：
    • 显示网格
    • 更改网格具有的 postdata 参数
    • 设置将数据反馈给网格的控制器/动作的 url
    • 触发网格重新加载
于 2013-09-18T15:36:59.143 回答