2

私はslickgridで作業しており、1つのセルにRESTfulサービスからの値を含むドロップダウン（選択リスト）を表示する必要があります。これらの値は行ごとに異なります。

このリスト（ドロップダウン）から1つの値を選択できるはずであり、セル内の値を保持する必要があります。

誰かがこの問題を手伝ってくれたら嬉しいです。

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

1 に答える 1

1

この質問に対する私の答えを見ましたか？

ページの生成中に各行のRESTサービスからオプションを取得できる場合は、クライアント側で私のソリューションを使用できます...

あなたのコメントから理解しているように、問題は、ユーザーがいくつかのフィールドを変更した後にグリッドで行われた変更をポストバックする方法です...

次のコードを追加してこれを解決しました。フォーム送信の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>
于 2012-09-20T13:35:08.193 に答える