drop-down-menu - 向 SlickGrid 添加新行

Question

我有一个使用数据 View 的 slickgrid。据我所知，直到第一个新行字段的编辑器完成后才会调用网格的添加新行事件。我正在编辑的字段是一个自定义编辑器，它使用具有自动完成功能的输入框，并将所选项目“值”保存到网格源数据中。问题是在触发网格添加新行事件之前不会创建新的“项目”源。我知道有一种方法可以解决这个问题，只是想知道解决这个问题的最佳方法是什么。

谢谢。

//Add new row event

grid.onAddNewRow.subscribe(function (e, args) {
                       var item = args.item;
                       addnewid = addnewid - 1;
                       item.inventorytransferdetailid = addnewid;                          
                       $.extend(item, args.item);
                       dataView.addItem(item);
                   });

// Custom editor
function Suggest2(args) {
    var $input;
    var defaultValue;
    var scope = this;
    this.init = function () {
        $input = $("<INPUT type=text class='editor-text' />")
        $input.width = args.column.width;
        $input.appendTo(args.container);
        $input.focus();
        $input.bind("keydown.nav", function (e) {
            if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                e.stopImmediatePropagation();
            }
            else if ($input.val().length > 0) {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:11111/GetProducts/" + $input.val(),
                    dataType: "json",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        $input.autocomplete({
                            source: data,
                            select: function (event, ui) {
                                var v = ui.item.value;
                                var l = ui.item.label;
                                //Set "display" field with label  
                                args.item[args.column.field] = l;
                                this.value = l;
                                //Set "hidden" id field with value
                                args.item["productid"] = v;
                                return false;
                            }
                        });
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }
        }) 
    }; 
    this.destroy = function () {
        $input.remove();
    }; 

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



    this.getValue = function () {
        return $input.val();
    };



    this.setValue = function (val) {
        $input.val(val);
    };

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



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


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



    this.isValueChanged = function () {
        return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
    };



    this.validate = function () {
        if (args.column.validator) {
            var validationResults = args.column.validator($input.val());
            if (!validationResults.valid) {
                return validationResults;
            }
        }



        return {
            valid: true,
            msg: null
        };
    };
    this.init();
}

Answer 1

您可以尝试下面的代码。

function add_new_row(){
item = {
      "id": (Math.round(Math.random()*-10000))
    };
data_view.insertItem(0, item);
}

然后，用按钮绑定(bind)。

<button onclick="add_new_row()">Add Row</button>