slickgrid定製下拉編輯

Question

我在slickgrid一個小區需要顯示一個下拉（選擇列表的）從RESTful服務未來價值的工作一個。這些值對於每一行都是不同的。

我應該能夠選擇從該列表（下拉列表）一個值，它應該堅持在單元格的值。

我會很高興，如果有人可以幫助解決這個問題。

this.productColumns = [ 
      { 
       id: 'statusid', 
       name: 'Status', 
       field: 'statusid', 
       width: 65, 
       sortable: true 
      }, 
      { 
       id: 'grade', 
       name: 'Grade', 
       field: 'grade', 
       width: 80, 
       sortable: true 
      }, 
      { 
       id: 'position', 
       name: 'Position', 
       field: 'originalPosition', 
       width: 80, 
       sortable: true 
      }, 
      { 
       id: 'tyresize', 
       name: 'Tyre Size', 
       field: 'tyreSize', 
       editable: true, 
       width: 140, 
       sortable: true 
      }, 
      { 
       id: 'tyredetail', 
       name: 'Tyre Detail', 
       field: 'tyredetail', 
       editable: true, 
       width: 125, 
       editor: this.selectRangeEditor 

      } 
    ] 

     selectRangeEditor: function (args) { 

     var $select = $(""); 
     var defaultValue = ""; 
     var scope = this; 
     this.init = function() { 
      var tyreOptionsList = new TyreOptionsModel(args.item.id); 
      tyreOptionsList.deferred.done(function() { 
       var opt_values = tyreOptionsList.toJSON(); 
       var count = 0; 
       for (var cnt in opt_values) { 
        if (opt_values.hasOwnProperty(cnt)) { 
         count++; 
        } 
       } 
       option_str = "" 
       var i ; 
       for (i = 0; i < count-1; i++) { 
        val = opt_values[i].tyreOptionId; 
        txt = opt_values[i].tyreDetail; 
        option_str += "<OPTION value='" + val + "'>" + txt + "</OPTION>"; 
       } 
       $select = $("<SELECT tabIndex='0' class='editor-select'>" + option_str + "</SELECT>"); 
       $select.appendTo(args.container); 
       $select.focus(); 
      }); 
     }; 

     this.destroy = function() { 
      $(args.container).empty(); 
     }; 

     this.focus = function() { 
      $select.focus(); 
     }; 

     this.serializeValue = function() { 
      return $select.val(); 
     }; 

     this.applyValue = function (item, state) { 
      item.attributes[args.column.field] = state; 
     }; 

     this.loadValue = function (item) { 
      defaultValue = item.attributes[args.column.field]; 
      $select.val(defaultValue); 
     }; 

     this.isValueChanged = function() { 
      return ($select.val() != defaultValue); 
     }; 

     this.validate = function() { 
      return { 
       valid: true, 
       msg: null 
      }; 
     }; 

     this.init(); 
     return $select.val(); 
     } 

Answer 1

您是否看到我的回答this question？

如果你能得到休息的服務選項的每一行而產生的頁面，你可以用我的解決方案在客戶端...

當我從理解你對此有何評論，問題是如何回發用戶更改了一些字段後在網格中所做的更改...

我解決了這個問題，通過添加下面的一段代碼，注意表單提交的JS代碼，處理這個傳入數據在服務器使用RESTfull服務來保存它。

<div id="myGrid" style="width:90%;height:250px;"></div> 
<form action="" method="POST"> 
    <input id="save_grid_changes" disabled="disabled" type="submit" value="Save changes to {{obj_type}}(s)"> 
    <input type="hidden" name="obj_type" value="{{obj_type}}"> 
    <input type="hidden" name="data" value=""> 

</form> 

<script> 
$(document).ready(function() { 

    grid = new Slick.Grid($("#myGrid"), griddata, columns, options); 

    $("form").submit(
     function() { 
     // commit the last edit ... 
     grid.getEditController().commitCurrentEdit(); 
     grid.resetCurrentCell(); 
     $("input[name='data']").val($.toJSON(griddata)); 
     // ("input[name='data']").val($.param(data)); 
    }); 
    }); 
</script>