ag-grid 中的多个下拉选择（链接已附加）答案

【问题标题】：Multiple dropdown selection in ag-grid (link Attached)ag-grid 中的多个下拉选择（链接已附加）
【发布时间】：2016-05-24 02:25:12
【问题描述】：

我需要在 ag-grid 中有一个列，我可以从下拉列表中选择多个值。我刚刚在网上搜索了一下它是否已经实现，但我只能找到一个链接。

https://gist.github.com/gaborsomogyi/00f46f3c0ee989b73c92

谁能告诉我如何实现它。请显示完整的代码作为示例。

这是那里共享的代码。

 function agDropDownEditor(params, optionsName, optionsList) {

    _.set(params.$scope, optionsName+'.optionsList', optionsList);

    var html = '<span style="width:100%; display:inline-block" ng-show="!'+optionsName+'.editing" ng-click="'+optionsName+'.startEditing()">{{data.'+params.colDef.field+'}}</span> ' +
        '<select style="width:100%" ng-blur="'+optionsName+'.editing=false" ng-change="'+optionsName+'.editing=false" ng-show="'+optionsName+'.editing" ng-options="item for item in '+optionsName+'.optionsList" ng-model="data.'+params.colDef.field+'">';

    // we could return the html as a string, however we want to add a 'onfocus' listener, which is not possible in AngularJS
    var domElement = document.createElement("span");
    domElement.innerHTML = html;

    _.set(params.$scope, optionsName+'.startEditing', function() {
        _.set(params.$scope, optionsName+'.editing', true); // set to true, to show dropdown

        // put this into $timeout, so it happens AFTER the digest cycle,
        // otherwise the item we are trying to focus is not visible
        $timeout(function () {
            var select = domElement.querySelector('select');
            select.focus();
        }, 0);
    });

    return domElement;
}

【问题讨论】：

标签： angularjs html drop-down-menu ag-grid

【解决方案1】：

希望这会有所帮助，这只是我的代码的一个 sn-p 我正在做的是我正在使用 map 从数组中获取，然后创建我的对象 col 并返回它这将重复到该数组的最后一个索引。

                        var col = {};
                        col.field = "fieldName";
                        col.headerName = "colName";
                        col.headerCellTemplate = function() {
                            var eCell = document.createElement('span');
                            eCell.field = obj.expr;
                            eCell.headerName = obj.colName;
                            eCell.innerHTML = "<select>"+"<option>"+
                                'Abc'+"</option>" +"<option>"+
                                'Xyz'+"</option>" +"</select>"

                            //$scope.dropDownTemplate;
                            var eselect = eCell.querySelector('select');
                            eselect.focus();

                            return eCell;
                        };



                        return col ;
                    }));

【讨论】：