क्लाइंटसाइड पर jqGrid - पेजिंग/संपादन/सॉर्टिंग प्रश्न

Question

मैं jqgrid का उपयोग कर एक सिस्टम बनाने की कोशिश कर रहा हूं जो क्लाइंटसाइड पर सबकुछ करता है, यानी एक JSON ऑब्जेक्ट को पुनर्प्राप्त करने के लिए AJAX का उपयोग करें (सी #/नेट का उपयोग करके) और इसे कैश करें जावास्क्रिप्ट चर और फिर डेटा के आधार पर उस कैश (addRowData) से कई ग्रिड पॉप्युलेट करें। यह सब बहुत अच्छी तरह से काम कर रहा है।

हालांकि, मुझे कुछ और उन्नत चीजों को कैसे करना है, यह जानने में समस्याएं आ रही हैं।

1) कोई सर्वर इंटरैक्शन वाले डेटा को पेजिंग/सॉर्ट करना। क्या यह संभव है? या क्या यह आवश्यक है कि मैं कस्टम पेजिंग फ़ंक्शंस लिखूं (यानी जब उपयोगकर्ता पृष्ठ 2 पर जाता है, तो कैश से अगले 10 रिकॉर्ड प्राप्त करें और उनके साथ ग्रिड अपडेट करें)। उम्मीद है कि ऐसा करने का एक स्वचालित तरीका है? सॉर्टिंग के बारे में कैसे? कुछ चीजें पढ़ें जो इसके सर्वर की तरफ से सुझाव देते हैं लेकिन शायद वे पुराने लेख थे? निश्चित नहीं।

2) उपयोगकर्ताओं को प्रत्येक पंक्ति पर नियंत्रण (मुख्य रूप से रेडियो बटन और डेटपिकर) देखने की अनुमति दें और उन परिवर्तनों को कैश चर में प्रतिबिंबित करें। मैंने jqGrid के संपादन कार्यों को देखा लेकिन ऐसा लगता है कि "क्लिक/संपादित/सहेजें"। आदर्श रूप में मैं ग्रिड के प्रारंभिक प्रदर्शन को दिखाना चाहता हूं, उदाहरण के लिए, प्रत्येक पंक्ति पर रेडियो बटन के जोड़े प्रदर्शित करने वाले कॉलम में से एक और उपयोगकर्ता केवल उन लोगों को क्लिक कर सकता है जिनमें वे रुचि रखते हैं (यानी उन्हें स्पष्ट रूप से संपादित नहीं करना है " "रेडियो बटन देखने/बदलने के लिए पंक्ति)। यह डेटा ग्रिड में अद्यतन कैश वैरिएबल में ग्रिड में और अधिक महत्वपूर्ण रूप से अपडेट किया गया है। क्या प्रत्येक पंक्ति पर अंतर्निहित क्लाइंट डेटासेट पर नियंत्रण नियंत्रण का एक स्वचालित तरीका है? मैं प्रत्येक सेल में नियंत्रण कैसे बना सकता हूं और सेल मान पर अपना मान कैसे जोड़ूं?

खुशी से कोई मुझे सही दिशा में इंगित कर सकता है?

किसी भी मदद आप दे सकते हैं के लिए धन्यवाद,

विधेयक

Answer 1

जो भी आप अपने प्रश्न के भाग 1 में रखना चाहते हैं, उसे jqGrid 3.7.x के साथ कार्यान्वित किया जा सकता है। आपको datatype: 'json' और loadonce: true पैरामीटर दोनों का उपयोग करना चाहिए। सर्वर को सभी डेटा वापस भेजना चाहिए। उदाहरण के रूप में jqgrid setGridParam datatype:local देखें।

आपके प्रश्न के दूसरे भाग के बारे में क्या। ऐसा लगता है कि आप jqGrid को बहुत जटिल बनाने की कोशिश करते हैं। मुझे jqGrid (उदाहरण के लिए ग्रिड के शीर्ष पर) के के बाहर कुछ नियंत्रण (चयन/ड्रॉपडाउन बॉक्स, चेकबॉक्स या रेडियो बटन) सेट करना बहुत आसान लगता है। यदि उपयोगकर्ता इस नियंत्रण में कुछ बदलाव करता है तो आपको नए चुने हुए पैरामीटर के आधार पर सर्वर से ग्रिड को फिर से लोड करना चाहिए। एक उदाहरण के रूप में How to filter the jqGrid data NOT using the built in search/filter box देखें। यदि आप loadonce: true पैरामीटर के साथ इस तरह से गठबंधन करने का प्रयास करेंगे, तो आपको समझना चाहिए कि loadonce: true के साथ ग्रिड के पहले लोड के बाद अन्य पैरामीटर datatype: 'json' से datatype: 'local' बदल दिया जाएगा। तो ग्रिड को फिर से लोड करने के लिए आपको अतिरिक्त रूप से ग्रिड को पुनः लोड करने से पहले datatype: 'json' सेट करना चाहिए।

टिप्पणियों के आधार पर अद्यतन: ठीक है।यदि आपके पास कुछ पूर्वनिर्धारित डेटा सेट हैं, तो आप सर्वर से सभी लोड करना चाहते हैं और फिर आवश्यक ग्रिड को तुरंत प्रदर्शित करें, आप केवल कुछ डाइव को परिभाषित कर सकते हैं और सभी अतिरिक्त jquGrids (टेबल और पेजिंग div तत्व) को संबंधित अतिरिक्त div (एक div प्रति jqGrid) के अंदर रखें। । आप पेज लोडिंग पर सभी ग्रिड में डेटा लोड करना शुरू कर सकते हैं। जब भी आपको आवश्यकता हो, आप माता-पिता को jQuery.show() और jQuery.hide() के संबंध में अदृश्य या छिपाते हैं। पेज पर शुरू होने वाले डिव को सीएसएस शैली display:none हो सकती है।

कैश किए गए डेटा के साथ द्विपक्षीय रूप से ग्रिड बनाने का एक और विकल्प निम्नलिखित है। आप jQuery.remove() के साथ एक jqGrid को हटा सकते हैं और jQuery.after() जैसी विधि के साथ एक नया <table> और पेजिंग <div> तत्व डाल सकते हैं। इस तरह से आप jqGrid बिल्कुल गतिशील रूप से बना सकते हैं। यदि आप ऐसा करते हैं तो आपको ध्यान में रखना चाहिए, कि jqGrid तालिका और पेजिंग div तत्वों पर कुछ अतिरिक्त divs बनाते हैं। तो आईडी = "सूची" के साथ पूरे jqGrid को हटाने के लिए आपको div = "gbox_list" के साथ div को हटा देना चाहिए। वैकल्पिक यदि आप दोनों <table> और पेजिंग <div> को पैरेंट div तत्व में रखते हैं और आप jQuery.empty() और jQuery.html() माता-पिता div पर एक नया jqGrid निकालने या डालने के लिए विधियों का उपयोग कर सकते हैं।

अब jqGrid के अंदर रेडियो बटन प्रदर्शित करने के बारे में। यदि आप कस्टम फॉर्मेटर का उपयोग करेंगे तो यह संभव है। उदाहरण के लिए jqGrid: Editable column that always shows a select देखें jqGrid के अंदर चयन (ड्रॉपडाउन बॉक्स) को प्रदर्शित करने के लिए कैसे करें। जिस तरह से मुझे चयन के साथ तुलना करने वाले रेडियो बटन का उपयोग करने का कोई फायदा नहीं होता है। रेडियो बटन ने पृष्ठ पर केवल और स्थान लिया और उपयोगकर्ताओं को पृष्ठ को अक्सर स्क्रॉल करना होगा।

फिर भी मैं आपको jqGrid कोशिकाओं के अंदर जटिल तत्वों का उपयोग करने की सलाह नहीं देता हूं। मैं आपको jqGrid के अपने उपयोगकर्ताओं को "इनलाइन संपादन" सुविधा का प्रदर्शन करने की सलाह देता हूं। इसका अर्थ यह है कि यदि उपयोगकर्ता एक पंक्ति का चयन करते हैं या एक पंक्ति पर डबल-क्लिक करते हैं (आप अपने उपयोगकर्ताओं को पसंद करने वाले एक तरीके को कार्यान्वित कर सकते हैं) पंक्ति को संपादन मोड में चेकबॉक्स के साथ स्विच किया जाएगा, बॉक्स (ड्रॉपडाउन बॉक्स), टेक्स्ट इनपुट आदि का चयन करें। । यह मानक तरीका है। उपयोगकर्ताओं के आराम के पक्ष में "फॉर्म संपादन" पर कुछ फायदे हैं। जितना अधिक आप मानक से दूर जाते हैं, भविष्य में आपको और अधिक समस्याएं मिल सकती हैं। "इनलाइन संपादन" का प्रदर्शन करने के लिए आप http://trirand.com/blog/jqgrid/jqgrid.html खोल सकते हैं और "पंक्ति संपादन" और फिर "इनपुट प्रकार" वाले पेड़ पर चयन कर सकते हैं। एक कोड उदाहरण के रूप में आप jqGrid - edit only certain rows for an editable column का उपयोग कर सकते हैं।

अद्यतन 2: एक और छोटी टिप्पणी। यदि सर्वर पर डेटा को अक्सर बदला नहीं जाएगा और आप क्लाइंट पर अधिक लंबे समय तक कैश चाहते हैं तो आप jqGrid के prmNames: { nd:null} पैरामीटर का उपयोग करने पर विचार कर सकते हैं, खासकर यदि आप इंटरनेट एक्सप्लोरर का उपयोग करते हैं। यदि आप ऐसा करते हैं तो अंतिम HTTP GET परिणाम (समावेशी jQuery.ajax अनुरोध) क्लाइंट पर कैश किए जाएंगे और अगले AJAX rwquests सर्वर पर अनुरोध भेजने के बजाय स्थानीय ब्राउज़र कैश से डेटा लोड कर सकते हैं। यदि सर्वर में प्रतिक्रिया (HTTP शीर्षलेख) में अनुमत कैशिंग समय के बारे में कोई जानकारी शामिल है, तो यह स्वचालित रूप से jQuery.ajax में क्लाइंट पर उपयोग की जाएगी।

अपडेट किए गए स्रोत कोड के आधार पर 3 अपडेट किया गया: आपके पास कोड में कुछ त्रुटियां हैं। यहाँ तय कोड

var myGrid = $("#mygrid").jqGrid({ 
    datatype: 'local', 
    colModel: [ 
     { name: 'AID', label: 'Some ID', key: true, width: 100, 
      editable: false, sorttype: "int" }, 
     { name: 'Name', width: 300, editable: false }, 
     { name: 'Group', width: 100, editable: false }, 
     { name: 'Info', width: 100, editable: false }, 
     { name: 'AValue', width: 100, editable: true, edittype: 'text' } 
    ], 
    pager: '#mypager', 
    rowNum: 10, 
    rowList: [10, 20, 500], 
    viewrecords: true, 
    autowidth: true, 
    sortname: 'AID', 
    sortorder: 'desc' 
}); 
myGrid.jqGrid('navGrid','#mypager',{edit:false,add:false,del:false,search:false}); 

var mydata = []; 
for (var i = 0; i < 100; i++) { 
    mydata.push({AID:i,Name:"123",Group:"456",Info:"78",AValue:"8"}); 
} 
myGrid.setGridParam({data: mydata}).trigger("reloadGrid"); 

आप इसे यहाँ http://www.ok-soft-gmbh.com/jqGrid/Clientside.htm

अपडेट 4 कोशिश कर सकते हैं: एक ही उदाहरण के लिए समावेशी ग्राहक के पक्ष संपादन यहाँ है http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing.htm। यह http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/ और Losing edited cell data after paging पर आधारित है।

Answer 2

jqGrid के नवीनतम संस्करण को आप क्या जरूरत है, मेरा मानना ​​है। इस link

• स्थानीय पेजिंग, खोज, सॉर्टिंग और आभासी स्क्रॉलिंग जोड़ा गया। कृपया डेमो देखें 3.7

Answer 3

मेरा कोड नीचे है।ग्रिड लोड पूरा होने के बाद InitGridTestBulkLoad चलाता है और 10 रिकॉर्ड का पहला पृष्ठ सही तरीके से प्रदर्शित होता है। पेजिंग नियंत्रण इंगित करता है कि मैं 10 पेज 1 पर हूं।

हालांकि, अगर मैं "अगला पृष्ठ" दबाता हूं तो मुझे एक संक्षिप्त "लोडिंग" बॉक्स दिखाई देता है लेकिन कुछ भी नहीं बदलता है। इसके अलावा, अगर मैं क्रमबद्ध करने के लिए पहले कॉलम शीर्षक पर क्लिक करता हूं, तो कुछ भी नहीं होता है।

ग्रिड डीईएफ़ और "कैश की गई" डाटा स्टोर और ग्रिड में लोड करने के लिए कोड है:

jQuery(document).ready(function() { 
    jQuery("#mygrid").jqGrid({ 
     dataType: "local", 
     data: {}, 
     colNames: ['AID', 'Name', 'Group', 'Info', 'AValue'], 
     colModel: [ 
         { name: 'AID', label: 'Some ID', index: 'SomeID', width: 100, editable: false, sorttype: "int" }, 
         { name: 'Name', label: 'Name', index: 'Name', width: 300, editable: false }, 
         { name: 'Group', label: 'Group', index: 'Group', width: 100, editable: false }, 
         { name: 'Info', label: 'Info', index: 'Info', width: 100, editable: false }, 
         { name: 'AValue', label: 'AValue', index: 'AValue', width: 100, editable: true, edittype: 'text' } 
         ], 
     pager: '#mypager', 
     rowNum: 10, 
     rowList: [10, 20, 500], 
     viewrecords: true, 
     loadonce: true, 
     autowidth: true, 
     sortname: 'AID', 
     sortorder: 'desc' 
    }); 

}); 

var oJR = {}; 
oJR.rows = new Array(); 
function InitGridTestBulkLoad() { 
    oJR.total = 100; 
    oJR.page = 1; 
    oJR.records = 100; 
    for (var i = 0; i < 100; i++) { 
     var s = i.toString(); 
     oJR.rows[i] = {}; 
     oJR.rows[i].id = i; 
     oJR.rows[i].cell = [s, "123", "456", "78", "8"]; 
    } 

    var mg = $("#mygrid"); 
    mg[0].addJSONData(oJR); 
}