एंगुलरजेएस और जेकग्रिड

Question

मैं एंगुलरजेएस के ढांचे के साथ jqGrid को एकीकृत करने का एक सरल उदाहरण खोजने की कोशिश कर रहा हूं (अधिमानतः एक निर्देश जो ग्रिड होस्ट करता है)। यह सवाल SO jqGrid with AngularJS में उठाया गया था, लेकिन इसका पूरी तरह उत्तर नहीं दिया गया था। मैं इस बिंदु पर किसी अन्य तृतीय पक्ष पुस्तकालय का उपयोग नहीं करना चाहता हूं। मैं केवल कंट्रोलर और एमवी * शैली दृष्टिकोण के साथ AngularJS के साथ jqGrid को एकीकृत करने का सबसे अच्छा अभ्यास देखना चाहता हूं।

विंटेललेक्ट https://github.com/Wintellect/Angular-MVC-Cookbook द्वारा एक कोणीय jqGrid कुकबुक भी है, लेकिन यह $ रूट ऑब्जेक्ट का उपयोग करता है जिसे मैं इस बिंदु पर पागल नहीं हूं। मैं अभी एक एसपीए बनाने की कोशिश नहीं कर रहा हूं (शायद बाद में)।

क्या कोई मुझे कृपया एक साधारण उदाहरण या JSFiddle में कुछ इंगित कर सकता है? धन्यवाद।

Answer 1

अस्वीकरण:

1. मैंने पहले jqGrid कभी नहीं सुना है।

2. मेरे पास बहुत अधिक jQuery अनुभव नहीं है।

3. जो मैं अपने एपीआई को बता सकता हूं उससे यह बनाम मैनुअल मैनिपुलेशन करने के कोणीय के डेटा-बाध्यकारी तरीके के 1-से-1 मैपिंग के अनुकूल नहीं है।

यहां मैं क्या आया हूं।

http://plnkr.co/edit/50dagqDV2hWE2UxG9Zjo?p=preview

मुझे पता है वहाँ jqGrid एपीआई यदि आपको मदद की जरूरत है रैपिंग की एक विशेष हिस्सा है, तो चलो: यह है कि यह कैसे रैप करने के लिए की एक बुनियादी उदाहरण (या किसी भी शायद) एक कोणीय निर्देश के साथ jQuery प्लगइन है।

var myApp = angular.module('myApp', []); 

myApp.directive('ngJqGrid', function() { 
return { 
    restrict: 'E', 
    scope: { 
    config: '=', 
    data: '=', 
    }, 
    link: function (scope, element, attrs) { 
    var table; 

    scope.$watch('config', function (newValue) { 
     element.children().empty(); 
     table = angular.element('<table></table>'); 
     element.append(table); 
     $(table).jqGrid(newValue); 
    }); 

    scope.$watch('data', function (newValue, oldValue) { 
     var i; 
     for (i = oldValue.length - 1; i >= 0; i--) { 
     $(table).jqGrid('delRowData', i); 
     } 
     for (i = 0; i < newValue.length; i++) { 
     $(table).jqGrid('addRowData', i, newValue[i]); 
     } 
    }); 
    } 
}; 
}); 

Answer 2

मैं टिप्पणी नहीं कर सकता, इसलिए मैं इसे यहाँ पोस्ट, यह सवाल की निरंतरता है .. मैं भी अपने GitHub परियोजना luacassus जाँच कर रहा हूँ अगर मैं, मैं इसे के लिए योगदान देगा कर सकते हैं। अच्छी सुविधा, जेरेड की तरह शब्द।

$scope.config = { 
    ... 
    rowList:[10,20,30], 
    pager: '#pager2', 
    sortname: 'id', 
    ... 
}; 

और इस निर्देश में:

link: function(scope,element,attrs){ 
      var table; 
      scope.$watch('config', function (newValue) { 
       element.children().empty(); 
       table = angular.element('<table id=\'grid2\'></table>'); 
       pager = angular.element('<div id=\'pager2\' ></div>'); 
       element.append(table); 
       element.append(pager); 
       $(table).jqGrid(newValue); 
      }); 

जैसा कि आपने कहा, वहाँ एपीआई मैं कोणीय साथ wrappe चाहते हैं का एक अन्य भाग है, यह "पेजर" है, मैं इसे इस तरह से प्रबंधित

लेकिन मैं आईडी के लिए छुटकारा पाने के लिए यहां से कठिन तरीके से प्रवेश करना चाहता हूं। इसके बाद मैं सेल/पंक्ति/navbar संपादन को लागू करने के लिए आपके जैसे एपीआई का उपयोग करने की कोशिश करूंगा। (ग्रिड के अंदर डेटा को संशोधित करके स्कोप डेटा को संशोधित करने के लिए ... यदि कोई पहले से ही कुछ है ...)

Answer 3

मैं वर्तमान में कोणीय में jQgrid के पूर्ण प्रतिस्थापन पर काम कर रहा हूं, मैं jqGrid तालिकाओं से बैकएंड प्रतिक्रिया उदाहरणों को अनुकूलित कर रहा हूं और ऐसे ... इसमें केवल कुछ दिन काम हैं इसलिए यदि आप सहयोग करना चाहते हैं तो आपको ऐसा करने के लिए आपका स्वागत है !: ngGrid