Question

设置select2 ajax控件的初始值时遇到问题。我在这种情况下使用CI和淘汰赛。我的代码在按下时会向表体添加一行，我在表格单元格中使用select2 ajax。

我的HTML：

<tbody data-bind="foreach: rows">
<tr>
    <td><input name="id_item[]" class="form-control big-drop" type="hidden" data-bind="value: id_item,select2: { minimumInputLength: 1, query: $root.list_item,formatResult: $root.itemFormatResult,formatSelection: $root.itemFormatSelection, allowClear: true}"></td>
    <td><input placeholder="qty" name="qty[]" class="form-control number text-right" data-bind="value: qty,number: qty, numberOptions: {value: true, number_of_comma: 0}, valueUpdate: 'afterkeydown'"></td>
    <td><input placeholder="price" name="price[]" class="form-control number text-right" data-bind="value: price,number: price, numberOptions: {value: true, number_of_comma: 2}, valueUpdate: 'afterkeydown', formatNoMatches: no_match_format"></td>  
    <td><button data-bind="click: $root.removeRow" class="btn btn-danger"><i class="fa fa-minus"></i></button></td>
</tr>
</tbody>

我的KO型号：

function Row(id_item, qty, price) {
    var self = this;
    self.id_item = ko.observable(id_item);
    self.qty = ko.observable(qty);
    self.price = ko.observable(price);

    ko.computed(function () {
        var item = self.id_item();

        get_satuan(item).done(function (data) {
            if (!isNaN(data.price)){
                self.harga(format_number(data.price, ''));
            }
        });
    });
}

var RowModel = function(rows) {
    var self = this;

    var default_array = ko.observableArray();
    if (detail.length > 0){
        $.each(detail, function(key, value){
            default_array.push(new Row(value.id_item, value.qty, value.price));
        });
    }

    self.rows = default_array;
    self.addRow = function() {
        self.rows.push(new Row('TUT',"","1"));
    };

    self.removeRow = function(row) { self.rows.remove(row) }

    self.list_item = function (query) {
        $.ajax({
            url: 'link to get json',
            type: 'POST',
            dataType: 'json',
            data: {q: query.term},
            success: function (data) {
                query.callback({
                    results: data
                });
            }
        });
    };
    self.itemFormatResult = function(item) {
        var markup = "<table class='movie-result'><tr><td><div class='movie-title'>";
        markup += "<b>" + item.id + "</b>";
        markup += "<br>" + item.item_name;
        markup += "<br>" + item.unit;
        markup += "</div></td></tr></table>";
        return markup;
    }
    self.itemFormatSelection = function (item) {
        return item.item_name;
    };
};

ko.applyBindings(new RowModel());

一切运作良好： 1.添加新行 2.使用select2选择项目工作正常 3.选择项目后，价格会根据项目选择而变化，工作正常

问题在于此代码：

self.addRow = function() {
        self.rows.push(new Row('TUT',"","1"));
};

设置select2的值后，选择2不显示基于 itemFormatSelection 的item_name。请帮助我，非常感谢。抱歉我的英文不好

Answer 1

问题解决了，我使用select2的initSelection来做到这一点。调用initSelection时，执行ajax调用以获取JSON中的值。

这是我的JS代码：

self.init_item = function (id_item, callback) {
    var id = $(id_item).val();
    $.ajax({
        url: 'link to get JSON',
        type: 'POST',
        dataType: 'json',
        data: {id: id},
        success: function (data) {
            callback(data);
        }
    });
};

添加此select2 data-bind：

initSelection: $root.init_item

全部

用knockout设置select2 ajax的初始值

1 个答案: