格式化程序在排序或搜索後給出錯誤結果

我有以下代碼使用free-jqgrid。它第一次正確加載（Status爲「Active」，Partner？爲「Yes」）。但是，當我進行排序或搜索時，值會變得不正確（狀態爲「退休」，合作伙伴？爲「否」）。格式化程序在排序或搜索後給出錯誤結果

爲什麼格式化程序提供的值不正確？如何解決這個問題？

SCRIPT

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css" rel="stylesheet" /> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/css/ui.jqgrid.min.css" rel="stylesheet" /> 

    <script type="text/javascript"> 


     function getCurrentPractice() 
     { 
      return "Test"; 
     } 

     function getGridCaption() { 
      return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" + 
      "<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" + 
      "<div style='float:right;width:550px; padding-bottom:20px;'>" + 
       "<input type='text' class='form-control' id='filter' placeholder='Search' style='width:250px; height:30px; float:right; ' />" + 
      " </div>" + 
      "</div>"; 
     } 

     $(function() { 

      var currentPractice = "P"; 
      var grid = $("#list2"); 
      grid.jqGrid({ 
       url: '/Home/GetProviders', 
       datatype: "json", 
       postData: 
       { 
        practiceName: function() { return currentPractice } 
       }, 

       colNames: [ 
          'Practice', 
          'ProviderID', 
          'Partner?', 
          'Status' 
       ], 
       colModel: [ 
        { name: 'Practice', hidden: false }, 
        { name: 'ProviderID', hidden: false }, 
        { 
         name: 'PartnerStatusText', 
         width: 70, 
         formatter: function (cellvalue, options, rowObject) { 

          var isPartner = rowObject.IsPartner; 
          return isPartner == true ? 'Yes' : 'No'; 
         } 
        }, 
        { 
         name: 'ActiveStatusText', 
         width: 70, 
         formatter: function (cellvalue, options, rowObject) { 
          var isActive = rowObject.IsActive; 
          return isActive == true ? 'Active' : 'Retired'; 
         } 
        } 
       ], 
       ignoreCase: true, 
       loadonce: true, 
       rowNum: 25, 
       rowList: [15, 25, 35, 50], 
       pager: '#pager2', 
       viewrecords: true, 
       sortable: true, 
       caption: getGridCaption(), 

       beforeSelectRow: function (rowid, e) { 
        //Avoid selection of row 
        return false; 
       }, 
       loadComplete: function() { 

       } 


      }); 
      grid.jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false }); 

      //Filter Toolbar 
      $("#advancedSearch").click(function() { 
       grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" }); 
      }); 


      //Top Search 
      $("#filter").on('keyup', function() { 
       var searchFiler = $("#filter").val(), f; 

       if (searchFiler.length === 0) { 
        grid[0].p.search = false; 
        $.extend(grid[0].p.postData, { filters: "" }); 
       } 
       f = { groupOp: "OR", rules: [] }; 
       f.rules.push({ field: "Practice", op: "cn", data: searchFiler }); 
       grid[0].p.search = true; 
       $.extend(grid[0].p.postData, { filters: JSON.stringify(f) }); 
       grid.trigger("reloadGrid", [{ page: 1, current: true }]); 
      }); 


     }); 
    </script> 

</head>

HTML

<div style="float:left; border:1px solid red;"> 
    <div id="divGrid" style="width: 680px; min-height: 50px; float: left; border: 1px solid silver;"> 
     <table id="list2"></table> 
     <div id="pager2"></div> 
    </div> 
</div>

服務器代碼

[AllowAnonymous] 
public JsonResult GetProviders(string practiceName) 
{ 

    //System.Threading.Thread.Sleep(3000); 
    List<Provider> providers = new List<Provider>(); 
    Provider p = new Provider(); 
    p.Practice = "Test1"; 
    p.ProviderID = 1; 
    p.IsActive = true; 
    p.IsPartner = true; 
    providers.Add(p); 

    Provider p2 = new Provider(); 
    p2.Practice = "Test2"; 
    p2.ProviderID = 2; 
    p2.IsActive = true; 
    p2.IsPartner = true; 
    providers.Add(p2); 

    return Json(providers, JsonRequestBehavior.AllowGet); 
}

ü PDATE

感謝Oleg，工作演示可以在這裏找到 - Fiddle。它使用JSFiddle的"/echo/json/"服務從服務器獲取數據。它使用sorttype和additionalProperties。這可以在沒有additionalProperties的情況下重寫 - 當我有機會重新訪問時，我需要這樣做。

來源

2017-04-22 Lijo

這個問題似乎很容易。從服務器返回的數據包含屬性Practice,ProviderID，IsActive和IsPartner。在初始加載期間，該屬性可在rowObject中獲得。您另外使用loadonce: true選項。因此，免費的jqGrid會嘗試在本地保存一些數據，但哪一個？默認情況下，jqGrid會保存與列名對應的屬性：Practice,ProviderID,PartnerStatusText和ActiveStatusText，但jqGrid沒有其他屬性IsActive和IsPartner也需要保存。

您可以通過兩種可選的方式解決問題：

重命名列名PartnerStatusText和ActiveStatusText到IsActive和IsPartner。
您添加選項additionalProperties: ["IsActive", "IsPartner"]以通知jqGrid讀取並保存本地其他屬性。

此外，我建議您在自定義格式化程序中使用options.rowData而不是rowObject。您可以跳過三維參數並使用formatter: function (cellvalue, options) {...}。

最後一句：自定義格式化程序的當前代碼非常簡單。您需要將一些輸入值（true和false）替換爲另一個文本。人們可以使用formatter: "select"的情況：

colModel: [ 
     { name: "Practice" }, 
     { name: "ProviderID" }, 
     { 
      name: "IsPartner", 
      width: 70, 
      formatter: "select", 
      formatoptions: { value: "false:No;true:Yes" } 
     }, 
     { 
      name: "IsActive", 
      width: 70, 
      formatter: "select", 
      formatoptions: { value: "false:Retired;true:Active" } 
     } 
    ],

見https://jsfiddle.net/c9fge9yk/1/

來源

2017-04-22 22:09:34 Oleg

完美。我使用'additionalProperties'方法。很好的解釋 - 「jqGrid默認保存與列名對應的屬性」。謝謝。 – Lijo

@Lijo：不客氣！我建議你總是升級到免費的jqGrid的最新版本（目前它是4.14.0）。 – Oleg

@Lijo：[README]（https://github.com/free-jqgrid/jqGrid/blob/master/README.md）包含這些URL。 [wiki文章]（https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs）包含更多詳細信息，包括「完整性」值。我建議你另外閱讀[新功能]的列表（https://github.com/free-jqgrid/jqGrid/blob/master/README.md#new-main-features-implemented-in-the-version- 4140-相比與 - 4136）。例如[demo]（https://jsfiddle.net/OlegKi/yvbt6w54/1/）演示了'searchoptions' /'editoptions'的'value'的自動生成。 – Oleg

格式化程序在排序或搜索後給出錯誤結果

回答

相關問題