在 ajax 调用中填充 JqGrid

Populate JqGrid inside ajax call

本文关键字：填充 JqGrid 调用 ajax      更新时间：2023-09-26

我正在尝试在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);

如果其他人遇到这个问题，这就是答案。这就是我最终所做的，行正在通过我传递给函数 URL 的日期参数进行过滤。在 Ajax 调用中填充网格似乎也是一个问题，所以我不得不将其取出。

 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');
        }
    })      
  })
});

你真的把一个值传递给你的控制器吗？我看到您的data: dataToSend与您的控制器不匹配idDate.

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

我个人的建议是你：

  • 单独设置网格，如果您不希望它在页面加载时可见，则隐藏
  • 将其数据类型设置为本地，以便网格不会在页面加载时加载
  • 在更改事件上：
    • 显示网格
    • 更改网格具有的后数据参数
    • 设置控制器/操作的URL，将数据反馈回网格
    • 触发网格重新加载
相关文章：