Edytor wyboru SlickGrid

Question

Chcę utworzyć dynamicznie wypełniany html select dla wybranej komórki. Wyodrębniam niektóre informacje z bazy danych, która jest inna dla każdego elementu wiersza. Problem polega na tym, że edytor traci początkowe dane i nie wiem, jak zachować dane dla konkretnej komórki. Czy ktoś wcześniej to zrobił?

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

Podobny queations został poproszony here (ten jest jednak nie slickgrid oznaczone).

Zrobiłem SelectEditor, z elastycznym zakresem opcji w zależności od kolumny, w której jesteśmy. Powodem myślenia tutaj jest to, że typ danych wartości edytowanej w kolumnie określi prawidłowe wybory dla tego pola.

W tym celu można dodać dodatkową opcję do definicji kolumn (np zwanych opcji) tak:

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

]

i dostępu że używanie args.column.options w metodzie init własnego obiektu SelectEditor:

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

Możesz nieznacznie zmodyfikować powyższy SelectCellEditor aby utworzyć różne opcje wyboru dla każdej komórki.

function SelectCellEditor(args) { 

    ..... 

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

Teraz łatwo jest utworzyć dynamiczny edytor listy rozwijanej.

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

zastąpić

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

z

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

jeśli to nie działa dla Ciebie

Answer 4

Spróbuj poniższy kod.

W pliku slick.editors.js, Zdefiniuj nowego edytora.

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

Następnie zmodyfikować opcje siatki

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

};

Używaj edytora podczas inicjalizacji kolumn.

{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

Nie mogę jeszcze dodawać komentarzy, ale muszę dodać coś do odpowiedzi HeiN.

Odpowiedź HeiN działa świetnie, ale mam dane przychodzące, które nie pasują do moich wybranych opcji i muszę nadal wyświetlać te dane ... więc musiałem zmodyfikować dataItemColumnValueExtractor w opcjach. To pozwala na wyświetlanie moich oryginalnych danych, jeśli nie ma opcji na liście do dopasowania.

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

Mam nadzieję, że pomoże to komuś w dalszej kolejności.