2012-09-06 116 views
0

我一直想實現沿 Slickgrid, column with a drop down select list?SlickGrid下拉框編輯器不工作

我的代碼是東西線; slick.editors.js;

(function ($) { 
    // register namespace 
    $.extend(true, window, { 
    "Slick": { 
     "Editors": { 
     "Text": TextEditor, 
     "Integer": IntegerEditor, 
     "Date": DateEditor, 
     "YesNoSelect": YesNoSelectEditor, 
     "Checkbox": CheckboxEditor, 
     "PercentComplete": PercentCompleteEditor, 
     "LongText": LongTextEditor, 
     "SelectOption": SelectCellEditor 
     } 
    } 
    }); 

與futher向下定義的函數,

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

然後在我CSHTML

var columns = [ 

    { id: "color", name: "Color", field: "color", options: "Red,Green,Blue,Black,White", editor: Slick.Editors.SelectOption }, 
    { id: "lock", name: "Lock", field: "lock", options: "Locked,Unlocked", editor: Slick.Editors.SelectOption }, 
    ]; 


    var options = { 
     enableCellNavigation: true, 
     enableColumnReorder: false 
    }; 

    $(function() { 
     var data = []; 
     for (var i = 0; i < 20; i++) { 
      data[i] = { 
      color: "Red", 
      lock: "Locked" 
      }; 
    } 

網格顯示和彩色顯示爲如果其在細胞中常規文本中,但沒有下拉?

+0

你在你的HTML中包含了'slick.editors.js'嗎? – ganeshk

+0

是的,那裏是.. – chris

+1

只有當你編輯該單元格時,下拉菜單纔會出現。你說編輯單元格時沒有下拉菜單,對嗎? – ganeshk

回答

2

只有在編輯該單元格時,纔會顯示下拉列表。添加editable: true到您的電網選項應該工作,我認爲。