Éditeur de sélection SlickGrid

Question

Je souhaite créer un fichier html à remplissage dynamique pour une cellule sélectionnée. J'extrais des informations d'une base de données différente pour chaque ligne. Le problème est que l'éditeur perd les données initiales et je ne sais pas comment conserver certaines données pour une cellule spécifique. Est-ce que quelqu'un a déjà fait ça?

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

A queations similaire a été posée here (celui-ci est cependant pas slickgrid marqué). J'ai fait un SelectEditor, avec une gamme flexible d'options en fonction de la colonne dans laquelle nous sommes. La raison de penser ici est que le type de données de la valeur que vous éditez dans une colonne déterminera les choix valides pour ce champ.

Pour ce faire, vous pouvez ajouter une option supplémentaire à vos définitions de colonne (par exemple des options appelées) comme ceci:

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}, 

]

et l'accès que l'utilisation args.column.options dans la méthode d'initialisation de votre propre objet SelectEditor comme ceci:

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

Vous pouvez modifier légèrement le SelectCellEditor ci-dessus pour créer différentes options de sélection pour chaque cellule.

function SelectCellEditor(args) { 

    ..... 

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

Maintenant, il est facile de créer un éditeur de liste déroulante dynamique.

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

remplacer

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

avec

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

si elle ne fonctionne pas pour vous

Answer 4

S'il vous plaît essayez le code ci-dessous.

Dans slick.editors.js, définissez un nouvel éditeur.

$.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(); 
} 

Ensuite, modifiez vos options de grille

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]; 
    } 
} 

};

Et utilisez l'éditeur lors de l'initialisation des colonnes.

{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

Je ne peux pas encore ajouter de commentaires, mais je dois ajouter quelque chose à la réponse de HeiN.

La réponse de HeiN fonctionne très bien, mais j'ai des données qui ne correspondent pas à mes options de sélection et je dois encore afficher ces données ... donc j'ai dû modifier dataItemColumnValueExtractor dans les options. Cela permet à mes données d'origine d'afficher si je n'ai pas une option dans la liste pour correspondre.

 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]; 
      } 
     } 

Espérons que cela aidera quelqu'un plus tard sur la ligne.