0

ドロップダウンから複数の値を選択できる ag-grid に列が必要です。すでに実装されているかどうかを確認するためにオンラインでグーグル検索しましたが、リンクは1つしか見つかりませんでした。

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

1 に答える 1

0

これが役に立てば幸いです。これは、マップを使用して配列からフェッチし、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 ;
                    }));
于 2016-03-04T12:35:40.297 に答える