jqGrid

Question

में जोड़ें/संपादित करें संवाद को अनुकूलित करना क्षमा करें, मैं छवियों को पोस्ट नहीं कर सकता, मैं बहुत नया हूं।

jqGrid में संवाद जोड़ें/संपादित करें मैं पहले किए गए चयन के आधार पर चुनिंदा वस्तुओं की एक सूची लोड करना चाहता हूं। उपर्युक्त चित्र में, मान चयन मानदंड चयन में चुने गए मान के आधार पर लोड किया जाना चाहिए। मेरा मानना ​​है कि जाने का मार्ग एडिटोपॉप्शन ऑब्जेक्ट में डेटाोरल का उपयोग कर रहा है लेकिन मुझे इस संबंध में समस्याएं हैं। परेशानी का पहला मुद्दा दस्तावेज here पर आधारित था, ऐसा प्रतीत नहीं होता है कि आग लगने के लिए कोई घटना उपलब्ध है जब मानदंडों के मान में परिवर्तन होता है जो मुझे मूल्य सूची अपडेट करने की अनुमति देगा।

इसके अलावा मैं उलझन में हूं कि डेटा AJAX अनुरोध से कैसे वापस किया जाना चाहिए। दस्तावेज में यह कहते हैं:

editoptions स्थापना dataUrl editoptions dataUrl पैरामीटर केवल edittype के तत्व के लिए मान्य है पैरामीटर: का चयन करें। DataUrl पैरामीटर यूआरएल का प्रतिनिधित्व करता है जहां से एचटीएमएल चयन तत्व प्राप्त किया जाना चाहिए। जब यह विकल्प सेट किया गया है, तो तत्व AJAX अनुरोध से मानों से भरा जाएगा। डेटा इच्छित विकल्प "

है इसका मतलब मैं एचटीएमएल पैदा करते हैं और प्रतिक्रिया के भाग के रूप में इस वापस जाने के लिए की आवश्यकता होगी के साथ एक मान्य HTML का चयन तत्व होना चाहिए? पहले मैं json का उपयोग कर अपने डेटा के सभी गुजर गया था ।

Answer 1

jqGrid editoptions में निर्भर चयन का कोई सरल समर्थन हासिल है। तो लागू करने के लिए एक मुख्य चयन पर change घटना उपयोग करने के लिए मैन्युअल रूप से दूसरा (निर्भर) के विकल्प का चयन की सूची अद्यतन करने के लिए है।

the demo में आप पाएंगे कि आप निर्भर चयन कैसे कार्यान्वित कर सकते हैं। मैंने डेमो 'एल में उपयोग किया ocal 'डेटाटाइप और valueeditoptions की dataUrl की बजाय 0 सेट करें, लेकिन मुख्य स्कीमा जो किया जाना चाहिए वही रहें। इसके अलावा डेमो में मैं न केवल संपादन का उपयोग करता हूं, बल्कि इनलाइन संपादन भी करता हूं। कोड दोनों मामलों में काम करता है। चूंकि jqGrid फॉर्म संपादन मोड में स्थानीय संपादन का समर्थन नहीं करता है, इसलिए फ़ॉर्म सबमिट करना काम नहीं करता है। मैं उन चालों का उपयोग कर सकता हूं जिन्हें मैंने here वर्णित किया है, लेकिन कोड बहुत लंबा होगा और इसमें आपके मुख्य प्रश्न से बहुत सी चीजें शामिल होंगी। तो मैंने कोड को उस फॉर्म में पोस्ट करने का फैसला किया जहां सबमिट करना काम नहीं है।

var countries = { '1': 'US', '2': 'UK' }, 
    states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' }, 
    statesOfUS = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' }, 
    statesOfUK = { '5': 'London', '6': 'Oxford' }, 
    // the next maps contries by ids to states 
    statesOfCountry = { '1': statesOfUS, '2': statesOfUK }, 
    mydata = [ 
     { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" }, 
     { id: '1', Country: '1', State: '3', Name: "Jim Morrison" }, 
     { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" }, 
     { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" } 
    ], 
    lastSel = -1, 
    grid = $("#list"), 
    resetStatesValues = function() { 
     // set 'value' property of the editoptions to initial state 
     grid.jqGrid('setColProp', 'State', { editoptions: { value: states} }); 
    }; 

grid.jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    colModel: [ 
     { name: 'Name', width: 200 }, 
     { 
      name: 'Country', 
      width: 100, 
      editable: true, 
      formatter: 'select', 
      edittype: 'select', 
      editoptions: { 
       value: countries, 
       dataInit: function (elem) { 
        var v = $(elem).val(); 
        // to have short list of options which corresponds to the country 
        // from the row we have to change temporary the column property 
        grid.jqGrid('setColProp', 'State', { editoptions: { value: statesOfCountry[v]} }); 
       }, 
       dataEvents: [ 
        { 
         type: 'change', 
         fn: function (e) { 
          // build 'State' options based on the selected 'Country' value 
          var v = $(e.target).val(), 
           sc = statesOfCountry[v], 
           newOptions = '', 
           stateId, 
           form, 
           row; 
          for (stateId in sc) { 
           if (sc.hasOwnProperty(stateId)) { 
            newOptions += '<option role="option" value="' + stateId + '">' + 
             states[stateId] + '</option>'; 
           } 
          } 

          resetStatesValues(); 

          // populate the subset of contries 
          if ($(e.target).is('.FormElement')) { 
           // form editing 
           form = $(e.target).closest('form.FormGrid'); 
           $("select#State.FormElement", form[0]).html(newOptions); 
          } else { 
           // inline editing 
           row = $(e.target).closest('tr.jqgrow'); 
           $("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions); 
          } 
         } 
        } 
       ] 
      } 
     }, 
     { 
      name: 'State', 
      width: 100, 
      editable: true, 
      formatter: 'select', 
      edittype: 'select', 
      editoptions: { value: states } 
     } 
    ], 
    onSelectRow: function (id) { 
     if (id && id !== lastSel) { 
      if (lastSel !== -1) { 
       resetStatesValues(); 
       grid.jqGrid('restoreRow', lastSel); 
      } 
      lastSel = id; 
     } 
    }, 
    ondblClickRow: function (id) { 
     if (id && id !== lastSel) { 
      grid.jqGrid('restoreRow', lastSel); 
      lastSel = id; 
     } 
     resetStatesValues(); 
     grid.jqGrid('editRow', id, true, null, null, 'clientArray', null, 
      function() { // aftersavefunc 
       resetStatesValues(); 
      }); 
     return; 
    }, 
    editurl: 'clientArray', 
    sortname: 'Name', 
    ignoreCase: true, 
    height: '100%', 
    viewrecords: true, 
    rownumbers: true, 
    sortorder: "desc", 
    pager: '#pager', 
    caption: "Demonstrate dependend select/dropdown lists (edit on double-click)" 
}).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: true }, 
    { // edit options 
     recreateForm: true, 
     viewPagerButtons: false, 
     onClose: function() { 
      resetStatesValues(); 
     } 
    }, 
    { // add options 
     recreateForm: true, 
     viewPagerButtons: false, 
     onClose: function() { 
      resetStatesValues(); 
     } 
    }); 

UPDATED: देखें डेमो पर सबसे हाल के संस्करण के लिए "अपडेट 2" the answer का हिस्सा

आप नीचे डेमो से कोड पाते हैं।