slickgrid 自定义下拉编辑器

Question

我正在 slickgrid 上工作，其中一个单元格需要显示一个下拉列表（选择列表），其中的值来自一个安静的服务。每一行的这些值都不同。

我应该能够从此列表（下拉列表）中选择一个值，并且它应该将该值保留在单元格中。

如果有人可以帮助解决这个问题，我会很高兴。

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>