SlickGrid का चयन करें संपादक

Question

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

function StandardSelectCellEditor($container, columnDef, value, dataContext) { 
var $input; 
var $select; 
var defaultValue = value; 
var scope = this; 

this.init = function() { 
    $input = $("<INPUT type=hidden />"); 
    $input.val(value); 
    } 

    $input.appendTo($container); 

    $select = $("<SELECT tabIndex='0' class='editor-yesno'>"); 
    jQuery.each(value, function() { 
     $select.append("<OPTION value='" + this + "'>" + this + "</OPTION></SELECT>"); 
    }); 
    $select.append("</SELECT>"); 

    $select.appendTo($container); 

    $select.focus(); 
}; 


this.destroy = function() { 
    //$input.remove(); 
    $select.remove(); 
}; 


this.focus = function() { 
    $select.focus(); 
}; 

this.setValue = function(value) { 
    $select.val(value); 
    defaultValue = value; 
}; 

this.getValue = function() { 
    return $select.val(); 
}; 

this.isValueChanged = function() { 
    return ($select.val() != defaultValue); 
}; 

this.validate = function() { 
    return { 
     valid: true, 
     msg: null 
    }; 
}; 

this.init(); 
}; 

Answer 1

ऐसा ही एक queations here पूछा गया था (यह एक तथापि टैग नहीं किया slickgrid है)।

मैंने कॉलम के आधार पर विकल्पों की एक लचीली रेंज के साथ एक चयन एडिटर बनाया है। यहां सोचने का कारण यह है कि कॉलम में आपके द्वारा संपादित किए गए मान का डेटाटाइप इस क्षेत्र के लिए मान्य विकल्प निर्धारित करेगा।

ऐसा करने में आप इस तरह अपने कॉलम परिभाषाएँ (जैसे विकल्पों कहा जाता है) के लिए एक अतिरिक्त विकल्प जोड़ सकते हैं: कि args.column.options का उपयोग कर

var columns = [ 
    {id:"color", name:"Color", field:"color", options: "Red,Green,Blue,Black,White", editor: SelectCellEditor} 
    {id:"lock", name:"Lock", field:"lock", options: "Locked,Unlocked", editor: SelectCellEditor}, 

]

और उपयोग इस तरह अपने खुद के SelectEditor वस्तु की init विधि में:

SelectCellEditor : function(args) { 
     var $select; 
     var defaultValue; 
     var scope = this; 

     this.init = function() { 

      if(args.column.options){ 
       opt_values = args.column.options.split(','); 
      }else{ 
       opt_values ="yes,no".split(','); 
      } 
      option_str = "" 
      for(i in opt_values){ 
       v = opt_values[i]; 
       option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>"; 
      } 
      $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>"); 
      $select.appendTo(args.container); 
      $select.focus(); 
     }; 

     this.destroy = function() { 
      $select.remove(); 
     }; 

     this.focus = function() { 
      $select.focus(); 
     }; 

     this.loadValue = function(item) { 
      defaultValue = item[args.column.field]; 
      $select.val(defaultValue); 
     }; 

     this.serializeValue = function() { 
      if(args.column.options){ 
       return $select.val(); 
      }else{ 
       return ($select.val() == "yes"); 
      } 
     }; 

     this.applyValue = function(item,state) { 
      item[args.column.field] = state; 
     }; 

     this.isValueChanged = function() { 
      return ($select.val() != defaultValue); 
     }; 

     this.validate = function() { 
      return { 
       valid: true, 
       msg: null 
      }; 
     }; 

     this.init(); 
    } 

Answer 2

आप थोड़ा ऊपर SelectCellEditor संशोधित कर सकते हैं प्रत्येक सेल के लिए अलग-अलग चयन विकल्प बनाने के लिए।

function SelectCellEditor(args) { 

    ..... 

    // just to get the DOM element 
    this.getInputEl = function() { 
     return $input; 
    }; 
} 

अब गतिशील ड्रॉपडाउन संपादक बनाना आसान है।

function DynamicSelectCellEditor(args) { 
    // 1: if you already have a select list for individual cells 
    args.columns.options = optionsList[args.item.id] // or any custom logic 
    return new Slick.Editors.SelectCellEditor(args); 

    /*    OR    */ 

    // 2: if data needs to be fetched from the server 
    var editor = new Slick.Editors.SelectCellEditor(args), 
     $select = editor.getInputEl(); 

    $select.html("<option>Loading...</option>"); 
    $.ajax({ }).done(function(list) { 
     // Update select list 
     $select.html(newHtml); 
    }); 

    return editor; 
} 

Answer 3

अगर यह काम नहीं कर रहा

$.each(opt_values , function(index, value) { 
    option_str += "<OPTION value='"+value+"'>"+value+"</OPTION>"; 
}); 

के साथ बदलें

for(i in opt_values){ 
      v = opt_values[i]; 
      option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>"; 
} 

आप

Answer 4

नीचे कोड का प्रयास करें के लिए।

slick.editors.js में, एक नया संपादक परिभाषित करें।

$.extend(true, window, { 
    "Slick": { 
     "Editors": { 
     "SelectOption": SelectCellEditor, 
     ..... 
     } 
    } 
    }); 
function SelectCellEditor(args) { 
    var $select; 
    var defaultValue; 
    var scope = this; 
    var s; 
    this.init = function() { 
     opt_values = eval(args.column.options); 
     option_str = ""; 
     var tuples = []; 
     for (var key in opt_values) tuples.push([key, opt_values[key]]); 
     tuples.sort(function(a, b) { return a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0 }); 
     var length = tuples.length; 
     while (length--) option_str += "<OPTION value='"+tuples[length][0]+"'>"+tuples[length][1]+"</OPTION>"; 

     $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>"); 
     $select.appendTo(args.container); 
     $select.focus(); 
    }; 

    this.destroy = function() { 
     $select.remove(); 
    }; 

    this.focus = function() { 
     $select.focus(); 
    }; 

    this.loadValue = function(item) { 
     defaultValue = item[args.column.field]; 
     $select.val(defaultValue); 
    }; 

    this.serializeValue = function() { 
      return $select.val(); 
    }; 

    this.applyValue = function(item,selectedIndex) { 
     if($.isNumeric(selectedIndex)) 
      item[args.column.field] = parseInt(selectedIndex); 
     else 
      item[args.column.field] = selectedIndex; 
    }; 

    this.isValueChanged = function() { 
     return ($select.val() != defaultValue); 
    }; 

    this.validate = function() { 
     return { 
      valid: true, 
      msg: null 
     }; 
    }; 

    this.init(); 
} 

फिर, अपने ग्रिड विकल्प

var grid_options = { 
editable:    true, 
enableAddRow:  false, 
multiColumnSort: true, 
explicitInitialization: true, 
dataItemColumnValueExtractor: function(item, columnDef) { 
if(columnDef.editor == Slick.Editors.SelectOption){ 
    return eval(columnDef.options)[item[columnDef.field]]; 
    }else{ 
    return item[columnDef.field]; 
    } 
} 

} को संशोधित;

और स्तंभ प्रारंभ करने के दौरान संपादक का उपयोग करें।

{id: "currency_id", name: "Currency *", field: "currency_id", editor: Slick.Editors.SelectOption, options: { 1: 'Dollar', 2: 'Yen', 3: 'Rupiah' }, sortable: true,width: 234} 

Answer 5

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

हेईएन का उत्तर बहुत अच्छा काम करता है, लेकिन मेरे पास डेटा आने वाला विकल्प मेरे चयन विकल्पों से मेल नहीं खाता है और मुझे अभी भी उस डेटा को प्रदर्शित करने की आवश्यकता है ... इसलिए मुझे विकल्पों में डेटा इटैम कॉलमवैल्यू एक्स्ट्रेक्टर को संशोधित करना पड़ा है। यह मेरे मूल डेटा को प्रदर्शित करने की अनुमति देता है यदि मेरे पास मिलान करने के लिए सूची में कोई विकल्प नहीं है।

 dataItemColumnValueExtractor: function(item, columnDef) { 
      if(columnDef.editor == Slick.Editors.SelectOption){ 
       return eval(columnDef.options)[item[columnDef.field]] != null ? eval(columnDef.options)[item[columnDef.field]] : item[columnDef.field]; 
      }else{ 
       return item[columnDef.field]; 
      } 
     } 

आशा है कि इससे बाद में किसी को लाइन में मदद मिलेगी।