SlickGrid chọn trình soạn thảo

Question

Tôi muốn tạo một html động được chọn cho một ô chọn. Tôi trích xuất một số thông tin từ một cơ sở dữ liệu khác nhau cho mỗi mục hàng. Vấn đề là trình soạn thảo mất dữ liệu ban đầu và tôi không biết cách giữ một số dữ liệu cho một ô cụ thể. Có ai đó đã làm điều này trước đây không?

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

Một câu hỏi tương tự đã được yêu cầu here (điều này tuy nhiên không được gắn thẻ slickgrid).

Tôi đã chọn SelectEditor, với phạm vi tùy chọn linh hoạt tùy thuộc vào cột chúng tôi đang ở. Lý do suy nghĩ ở đây là kiểu dữ liệu của giá trị bạn chỉnh sửa trong cột sẽ xác định lựa chọn hợp lệ cho trường này.

Để làm điều này bạn có thể thêm một tùy chọn thêm các định nghĩa cột của bạn (ví dụ gọi là tùy chọn) như thế này:

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

]

và truy cập rằng việc sử dụng args.column.options trong phương thức init của đối tượng SelectEditor của riêng bạn như sau:

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

Bạn có thể sửa đổi một chút SelectCellEditor ở trên để tạo các tùy chọn chọn khác nhau cho mỗi ô.

function SelectCellEditor(args) { 

    ..... 

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

Giờ đây, thật dễ dàng để tạo trình chỉnh sửa thả xuống động.

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

thay

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

với

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

nếu nó không được làm việc cho bạn

Answer 4

Vui lòng thử đoạn code dưới đây.

Trong slick.editors.js, Xác định trình chỉnh sửa mới.

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

Sau đó, sửa đổi tùy chọn lưới của bạn

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

};

Và sử dụng trình chỉnh sửa trong khi khởi tạo cột.

{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

Tôi chưa thể thêm nhận xét, nhưng tôi cần thêm gì đó vào câu trả lời của HeiN.

Câu trả lời của HeiN hoạt động rất tốt, nhưng tôi có dữ liệu đến không khớp với các tùy chọn đã chọn và tôi vẫn cần hiển thị dữ liệu đó ... vì vậy tôi phải sửa đổi dataItemColumnValueExtractor trong các tùy chọn. Điều này cho phép dữ liệu gốc của tôi hiển thị nếu tôi không có tùy chọn trong danh sách để khớp.

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

Hy vọng điều này sẽ giúp ai đó sau đó.