SlickGrid sélectionnez éditeur

Je veux faire un rempli dynamiquement html select pour sélectionner la cellule. J'en extraire des informations à partir d'une base de données qui est différente pour chaque ligne de l'élément. Le problème est que l'éditeur perd les données initiales et je ne sais pas comment garder certaines données d'une cellule spécifique. Quelqu'un a fait cela avant?

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

Les gens pourraient apprécier ce lien onmylemon.co.royaume-uni/2014/06/l'écriture de l'éditeur-pour-slickgrid il vous donnera une bonne mise à la terre dans l'écriture des éditeurs pour SlickGrid.

OriginalL'auteur Catalin | 2010-07-09

Similaire queations a demandé ici (celui-ci n'est cependant pas slickgrid balisé).

Que j'ai fait un SelectEditor, avec une gamme d'options en fonction de la colonne, nous sommes en. La raison de la pensée est ici que le type de données de la valeur à modifier dans une colonne va déterminer les choix possibles pour ce champ.

Pour ce faire, vous pouvez ajouter une option supplémentaire pour votre définitions de colonne (par exemple, options) 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 d'accès à l'aide args.la colonne.options dans la méthode init de votre propre SelectEditor objet 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();
}

Avez-vous vraiment besoin de différents sélectionnez options pour chaque champ ? Si oui, vous pouvez envisager de codage de la valeur si chaque champ lui-même comme un objet ayant la valeur et de ses options (par exemple, "Bleu|Rouge,Vert,Bleu,Noir,Blanc". Vous avez besoin d'un supplément de CellFormatter pour montrer la valeur, et vous pouvez changer le CellEditor code pour obtenir les options de la valeur après le "|" sign. Prenez soin d'écrire de nouveau la valeur, y compris la liste d'option après la modification se fait dans le but de ne pas perdre cette information ...

OriginalL'auteur Matthijs

Vous pouvez modifier légèrement le dessus de SelectCellEditor pour créer différents sélectionnez options pour chaque cellule.

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

Maintenant, il est facile de créer une dynamique déroulant de l'éditeur.

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

OriginalL'auteur Aman Mahajan

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

OriginalL'auteur user3208386

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

Dans slick.editors.js Définir 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 la 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 utiliser l'éditeur tandis que les colonnes de l'initialisation.

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

OriginalL'auteur HeiN

0

Je ne peux pas ajouter de commentaires pour l'instant, mais j'ai besoin d'ajouter quelque chose à l'HeiN réponse.

HeiN réponse fonctionne très bien, mais j'ai des données qui ne correspondent pas à ma sélectionnez options et j'ai besoin de toujours afficher que les données... j'ai donc dû modifier dataItemColumnValueExtractor dans les options. Ce qui permet à mon origine des données à afficher si je n'ai pas une option dans la liste pour le match.
```
        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ère que cela aide quelqu'un plus tard en bas de la ligne.

OriginalL'auteur David

Vous devez vous connecter pour publier un commentaire.