首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

jQuery EasyUI jqGrid 客戶端數據綁定:data vs url 參數衝突

     編輯:程式設計綜合問答

問題現象

AJAX 獲取 JSON 後,嘗試將數據傳給 jqGrid 的 url 參數,導致重複請求、數據為空。

核心誤區

  • url:遠端數據源,jqGrid 會自動發起 HTTP 請求獲取數據。
  • data:客戶端本地數據,直接接收陣列/對象,不發起請求。
  • 兩者互斥:設置 data 後不可再設 url,否則會覆蓋或雙重請求。

正確綁定方式

方案一:直接使用 data 參數(推薦)

$.ajax({
    url: 'getData.action',
    success: function(json) {
        $("#grid").jqGrid({
            datatype: "local",
            data: json,           // 直接傳入數據陣列
            colModel: [...],
            jsonReader: { root: "rows", repeatitems: false } // 視後端結構調整
        });
    }
});

方案二:讓 jqGrid 直接請求 url(無需手動 AJAX)

$("#grid").jqGrid({
    url: 'getData.action',
    datatype: "json",
    colModel: [...],
    jsonReader: { root: "rows", repeatitems: false }
});

關鍵配置檢查

  • colModel 的 name 必須與 JSON 字段名完全一致(區分大小寫)。
  • jsonReader 正確映射:root 指向數據陣列,repeatitems: false 使用名稱映射。
  • 不要混用 ExtJS 庫,jqGrid 依賴 jQuery + jQuery UI。

參考文檔

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved