2010-07-12 17 views
16

HI, में परिवर्तनों को सहेजना मैं SlickGrid को देख रहा हूं और मैं सेल को संपादित करने के तरीके पर उदाहरण देख सकता हूं, हालांकि मैं इन परिवर्तनों को सहेजता हूं। मुझे अभी तक एक उदाहरण नहीं मिला है जो मुझे बताता है कि यह कैसे करें।SlickGrid

उत्तर

18

स्लिमग्रिड को सहेजने की चाल यह जानना है कि ग्रिड कोशिकाओं को संपादित किए जाने के दौरान ग्रिड बनाने के दौरान आपके द्वारा प्रदान किए गए डेटा की सरणी अपडेट करेगा।

जिस तरह से मैं इसे सहेजता हूं वह सबमिट बटन के साथ एक फॉर्म और ग्रिड के नीचे एक छिपे हुए फ़ील्ड को शामिल करना है। मैं सबमिट घटना को फँसता हूं और सरणी को क्रमबद्ध करने के लिए JSON plugin का उपयोग करता हूं और इसे छिपे हुए क्षेत्र में रखता हूं। सर्वर की ओर आपको एक JSON स्ट्रिंग प्राप्त होगी जिसे आप deserialise, loop के माध्यम से डेटाबेस में लिख सकते हैं।

डेटा के अपने सरणी मान लिया जाये कि नमूने की तरह "डाटा" कहा जाता है, निम्नलिखित आप के लिए काम करना चाहिए:

<form action="?" method="POST"> 
    <input type="submit" value="Save"> 
    <input type="hidden" name="data" value=""> 
</form> 
<script> 
    $(function() { 
    $("form").submit(
     function() { 
     $("input[name='data']").val($.JSON.encode(data)); 
     } 
    ); 
    }); 
</script> 
+0

HI जिम, यही विचार है कि मैं साथ गया हूं। वहाँ कुछ अन्य कार्यान्वयन सोचा लेकिन अनुमान नहीं है। यह ठीक है, धन्यवाद। – Rubans

+0

मैं सहेजें बटन पर क्लिक करने के बाद बस मुझे एक खाली ग्रिड लाने में। मैं क्या गलत कर रहा हूं? – randomizertech

+0

बस ब्राउज़र डिफ़ॉल्ट का उपयोग करना चाहते हैं ['JSON.stringify'] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) ठीक होना चाहिए इन दिनों। JQuery प्लगइन रूट जाने की कोई आवश्यकता नहीं है जब तक कि आपको कुछ वास्तव में पुराने ब्राउज़र का समर्थन करने की आवश्यकता न हो। – user128216

4

जबकि मैं व्यक्तिगत रूप से JSON serialize उपयोग कर रहा हूँ और एक छिपी हुई फ़ील्ड दृष्टिकोण from my previous answer किसी अन्य रूप में प्रस्तुत एक सेल वैल्यू बदल गया है और बदले गए मूल्य को बचाने के लिए सर्वर पर अजाक्स कॉल करने के बाद स्लिक्ग्रिड द्वारा निकाल दिया गया सेल चेंज इवेंट को फंसाने के लिए दृष्टिकोण हो सकता है। इसके परिणामस्वरूप सर्वर पर बहुत से छोटे अजाक्स अनुरोध होंगे (जो लोड बढ़ा सकते हैं) लेकिन जैसे ही परिवर्तन किए जाते हैं, सर्वर को अद्यतन करता है।

+0

मैंने इस तरह का एक उदाहरण लागू किया है, लेकिन मैं आपके पहले उदाहरण को पसंद करूंगा जहां बैच अपडेट संसाधित किए गए हैं, लेकिन मैं दोनों का लाभ देख सकता हूं, निश्चित रूप से यह देखने के लिए कि कम से कम किसी और का उपयोग कर रहे हैं;) – Rubans

+0

मैं बैच विधि को स्वयं पसंद करता हूं , लेकिन मैंने सोचा कि मैं पूर्णता के लिए अन्य विचार जोड़ूंगा :) –

+0

बैच विधि इमो से अधिक बेहतर और अधिक विश्वसनीय। – EarlyPoster

16

पूर्णता के लिए, जिम ओहल्लोरन के पोस्ट में संदर्भित, सेलचेंज के उपयोग का प्रदर्शन करने वाला एक न्यूनतम उदाहरण।

अधिक जानकारी के लिए, और सभी घटनाओं को देखने के लिए जिन्हें कैलचेंज पर समान रूप से उपयोग किया जा सकता है, SlickGrid source की शुरुआत में टिप्पणियां देखें।

<head> 
    <!-- boilerplate omitted ... --> 
    <script type="text/javascript"> 
     var grid; 

     var options = { 
      enableCellNavigation: true, 
      enableColumnReorder: false, 
      autoEdit: false, 
      editable: true, 
     }; 

     var columns = [ 
      {id: "item_key", name: "Key", field: "item_key" }, 
      {id: "value", name: "value", field: "value", editor: LongTextCellEditor } 
     ]; 

     var data = [ 
      {item_key: "item1", value: "val1"}, 
      {item_key: "item2", value: "val2"}, 
     ]; 

     $(document).ready(function() { 
      grid = new Slick.Grid($("#myGrid"), data, columns, options); 

     //Earlier code for earlier version of slickgrid 
     // grid.onCellChange = function (currentRow, currentCell, item) { 
     //  alert(currentRow+":"+currentCell+"> key="+item['item_key']+", value="+item['value']); 

      //Updated code as per comment. 
      grid.onCellChange.subscribe(function (e,args) { 
       console.log(args); 
      }); 

      }; 
     }); 
    </script> 

</head> 
<body> 
    <div id="myGrid" style="height:10em;"> </div> 
</body> 
+4

इस विधि के लिए एपीआई थोड़ा बदल गया है: 'grid.onCellChange.subscribe (समारोह (ई, args) { console.log (तर्क); });' args सेल, पंक्ति के साथ एक वस्तु है, ग्रिड ऑब्जेक्ट, और संपादित आइटम। – Solsys

+0

@Iclark क्या आप समझा सकते हैं कि मैं एक डीबी अपडेट के लिए एक विशिष्ट सेल को कैसे लक्षित करूं? चूंकि आपका डेटा मूल रूप से एक महत्वपूर्ण मान जोड़ी है जहां कुंजी कॉलम फ़ील्ड कुंजी मान से मेल खाना चाहिए, मुझे नहीं लगता कि मैं अपने सेल तत्व की एक अद्वितीय आईडी कैसे प्रदान कर सकता हूं ताकि मैं उस तत्व को डेटाबेस इकाई से मिलान कर सकूं? मैं अपने सेल तत्व की अनूठी आईडी कैसे पास कर सकता हूं, जहां मैं डीबी अपडेट करता हूं, मैं उस सेल से केवल तत्व अपडेट करता हूं जो पूरे ग्रिड में बदल गया है और नहीं? – Marko

+0

अच्छा एक। मैंने पंक्तियों को संशोधित करने के लिए जावास्क्रिप्ट हैशटेबल के कार्यान्वयन का उपयोग किया (http://www.mojavelinux.com/articles/javascript_hashes.html) – Amit

संबंधित मुद्दे