2010-07-02 8 views
8

मैं सर्वर को हिट नहीं करना चाहता हूं और जब मैं पेजर का उपयोग कर रिकॉर्ड के माध्यम से पेजिंग कर रहा हूं तो हर पंक्ति वापस लाऊंगा। मैंने पढ़ा है कि अगर मैं .azax फ़ंक्शन में पूर्ण ब्लॉग में डेटाटाइप = स्थानीय सेट करता हूं और यदि मैं लोडऑन्स सेट करता हूं: तो सच है तो मुझे डेटा के साथ ग्रिड को फिर से लोड करने का इंतजार करने में सक्षम होना चाहिए।jqgrid setGridParam डेटाटाइप: स्थानीय

हालांकि, जब मैं इन चीजों को करता हूं तो ग्रिड अगले पृष्ठ पर नहीं जाता है। यह बस लटकता है ...
मैं क्या गलत कर रहा हूँ?

jQuery(document).ready(function() { 
    jQuery("#list").jqGrid({ 
     datatype: processrequest, 
     mtype: 'POST', 
     jsonReader: { 
      root: "rows", //arry containing actual data 
      page: "page", //current page 
      total: "total", //total pages for the query 
      records: "records", //total number of records 
      repeatitems: false, 
      id: "ID" //index of the column with the PK in it 
     }, 
     colNames: ['Name', 'Title'], 
     colModel: [ 
     { name: 'name', index: 'name', width: 250 }, 
     { name: 'title', index: 'title', width: 250 } 
     ], 
     pager: '#pager', 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortorder: "desc", 
     viewrecords: true, 
     height: '250px', 
     caption: 'My first grid', 
     loadonce: true 
    }).navGrid('#pager', {edit: false, add: false, del: false}); 
}); 

function processrequest(postdata) { 
... 
$.ajax({ 
... 
    complete: function (jsondata, stat) { 
     if (stat == "success") { 
      var thegrid = jQuery("#list2")[0]; 
      var jsonObject = (eval("(" + jsondata.responseText + ")")); 
      thegrid.addJSONData(jsonObject.d); 
      $(".loading").hide(); 
     } else { 
      $(".loading").hide(); 
      alert("Error with AJAX callback"); 
     } 
     $("#list").setGridParam({ datatype: 'local' }); 
    } 
}); 
} 

उत्तर

17

कुछ गलतफहमी हैं। यदि आप datatype: local का उपयोग करते हैं तो आपको addRowData जैसी विधियों के साथ jqGrid को भरना होगा या डेटा को data पैरामीटर (jqGrid संस्करण 3.7 और उच्चतम के साथ) में सेट करना होगा। तो datatype: local का उपयोग jqGrid के लिए कोई भी डेटा लोड नहीं करता है और आपके datatype: processrequest पैरामीटर को अनदेखा कर दिया जाएगा।

आप loadonce: true पैरामीटर जो jqGrid के संस्करण 3.7 के बाद से समर्थित है का उपयोग करना चाहते हैं, तो आप JSON या XML (आपके मामले में उदाहरण datatype: json के लिए) और एक अतिरिक्त पैरामीटरloadonce: true के लिए jqGrid के सभी पैरामीटर होने चाहिए। फिर डेटा के पहले लोड के बाद jqGrid डेटाटाइप को datatype: local पर स्विच करेगा और इसके बाद यह सर्वर पर स्वतंत्र काम करेगा लेकिन कुछ पैरामीटर को अनदेखा करेगा (जैसे datatype: processrequest आपके मामले में)।

एक और छोटी टिप्पणी। jsonReader का अधिकांश गुण जो आप अपने उदाहरण में उपयोग करते हैं डिफ़ॉल्ट हैं (this wiki देखें)। आपके द्वारा उपयोग पैरामीटर डिफ़ॉल्ट गुण के साथ जोड़ा जाएगा, तो यह jsonReader: { repeatitems: false, id: "ID"}

UPDATED तरह पैरामीटर का उपयोग करने के लिए पर्याप्त है: ठीक है जेफ। ऐसा लगता है कि, आपकी समस्या को हल करने के लिए आपको दोनों तरफ से कुछ और कोड उदाहरण चाहिए: क्लाइंट और सर्वर। यहां एक छोटा उदाहरण है जिसे मैंने आपके लिए बनाया और परीक्षण किया।

सभी सर्वर की तरफ से पहले। ASMX वेब सेवा में हम एक वेब विधि है जो अपनी मेज के लिए एक परीक्षण डेटा उत्पन्न परिभाषित:

public JqGridData TestMethod() { 
    int count = 200; 
    List<TableRow> gridRows = new List<TableRow> (count); 
    for (int i = 0; i < count; i++) { 
     gridRows.Add (new TableRow() { 
      id = i, 
      cell = new List<string> (2) { 
       string.Format("Name{0}", i), 
       string.Format("Title{0}", i) 
      } 
     }); 
    } 

    return new JqGridData() { 
     total = 1, 
     page = 1, 
     records = gridRows.Count, 
     rows = gridRows 
    }; 
} 

जहां कक्षाएं JqGridData और TableRow निम्नलिखित की तरह परिभाषित कर रहे हैं:

public class TableRow { 
    public int id { get; set; } 
    public List<string> cell { get; set; } 
} 
public class JqGridData { 
    public int total { get; set; } 
    public int page { get; set; } 
    public int records { get; set; } 
    public List<TableRow> rows { get; set; } 
} 

यहाँ आप देख सकते हैं, वेब विधि TestMethod में कोई पैरामीटर नहीं है और पूर्ण डेटा वापस पोस्ट करता है। पेजिंग, सॉर्टिंग और डेटा की खोज jqGrid (संस्करण 3.7 या उच्चतर) द्वारा की जाएगी।

इस तरह के डेटा पढ़ सकते हैं और हम निम्न कर सकते हैं jqGrid में डाल करने के लिए:

$("#list").jqGrid({ 
    url: './MyTestWS.asmx/TestMethod', 
    datatype: 'json', 
    mtype: 'POST', 
    loadonce: true, 
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
    serializeGridData: function (postData) { 
     return JSON.stringify(postData); 
    }, 
    jsonReader: { 
     root: function (obj) { return obj.d.rows; }, 
     page: function (obj) { return obj.d.page; }, 
     total: function (obj) { return obj.d.total; }, 
     records: function (obj) { return obj.d.records; } 
    }, 
    colModel: [ 
     { name: 'name', label: 'Name', width: 250 }, 
     { name: 'title', label: 'Title', width: 250 } 
    ], 
    rowNum: 10, 
    rowList: [10, 20, 300], 
    sortname: 'name', 
    sortorder: "asc", 
    pager: "#pager", 
    viewrecords: true, 
    gridview: true, 
    rownumbers: true, 
    height: 250, 
    caption: 'My first grid' 
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true}, 
    {},{},{},{multipleSearch : true}); 

jqGrid की परिभाषा के बारे में कुछ टिप्पणियां:

JSON एक के माध्यम से ASMX वेब सेवा के साथ संवाद करने के लिए निम्न कार्य करने की जरूरत है संबंधित jQuery.ajax अनुरोध में:

  • dataType: 'json' सेट होना चाहिए।
  • contentType:'application/json; charset=utf-8' सेट किया जाना चाहिए।
  • सर्वर पर भेजने वाला डेटा JSON एन्कोड किया जाना चाहिए।

इन सभी मैं datatype, ajaxGridOptions और jqGrid के serializeGridData पैरामीटर का उपयोग करने के लिए। मैं JSON.stringify फ़ंक्शन के साथ JSON एन्कोडिंग करता हूं (संबंधित जावास्क्रिप्ट here से डाउनलोड किया जा सकता है)।

फिर प्राप्त डेटा को डीकोड किया जाना चाहिए। मैं jqGrid - jsonReader की मेरी पसंदीदा विशेषता के साथ ऐसा करता हूं (this SO post और this wiki देखें)।

अंत में हम loadonce: true जो 'json' से 'local' को jqGrid के datatype बदलने का उपयोग करें और हम तुरंत स्थानीय पेजिंग के सभी लाभ का उपयोग कर सकते, छंटाई और jqGrid संस्करण 3.7 के बाद से मौजूदा खोज उन्नत।

यदि आप एएसएमएक्स वेब सेवा के साथ सर्वर साइड पेजिंग, सॉर्टिंग और खोज (या उन्नत खोज) बनाना चाहते हैं तो यह भी संभव है। यहां एक छोटी सी जगह को सहेजने और कोड उदाहरणों को अलग करने के लिए मैं आपके अन्य प्रश्न jqgrid Page 1 of x pager (अद्यतन भाग देखें) में इसी उदाहरण को पोस्ट करूंगा।

+0

मैंने आपके जेसन रीडर स्टेटमेंट को अपडेट किया जैसा आपने सुझाव दिया था और मैंने सेटग्रिड पैराम लाइन को हटा दिया था। मैंने लोडऑन्स वैल्यू रखा लेकिन मैं अभी भी देख रहा हूं कि यह हर बार सर्वर पर वापस जाता है। ऐसा लगता है कि यह काम नहीं कर रहा है। कोई और सुझाव? – webdad3

0

यह मेरे लिए काम किया। मुझे पेजिंग और सॉर्टिंग के साथ काम करने में कोई समस्या नहीं थी। शायद .d और __type आइटम्स की वजह से जिन्हें JSON ऑब्जेक्ट में .NET में वापस भेजा जा रहा था। हालांकि, इस उदाहरण में अतिरिक्त विन्यास के साथ। यह काम किया!

मैं पागल हो रहा था। अगर आप अपने webservice के रूप में नेट का उपयोग कर रहे हैं तो ग्रिड को कॉन्फ़िगर करने का यह तरीका है। यह पेजिंग और सॉर्टिंग को काम करने की अनुमति देने के लिए ग्रिड में आवश्यक सही स्थानों में JSON ऑब्जेक्ट से डेटा तत्वों को पार्स करने और सही तरीके से सेट करने के लिए कॉन्फ़िगर किया गया है।

मुझे टिप्पणी करनी पड़ी, क्योंकि मुझे यकीन है कि वहां कुछ लोग हैं जो इस ग्रिड का उपयोग करना चाहते हैं लेकिन नेट को उनके webservice के रूप में उपयोग कर रहे हैं।

2

यह एक छोटा सा देर हो चुकी है, लेकिन यहाँ एक (?) बहुत आसानी से भविष्य में किसी भी समाधान के चाहने वालों के लिए समाधान है:

gridComplete: function(){ 
    $("#yourGridID").setGridParam({datatype: 'local'}); 
} 

यह है कि। मैं 3.7.2 का उपयोग कर रहा हूं, किसी अन्य संस्करण के लिए बात नहीं कर सकता। समस्या (स्पष्ट रूप से) 'loadonce' से उत्पन्न होती है जो केवल पूर्व परिभाषित डेटाटाइप मानों के साथ काम करती है, जो एक फ़ंक्शन नहीं है। मैं मानता हूं अन्य अंतर्निहित मूल्य भी काम करेंगे, लेकिन 'स्थानीय' समझ में आता है।