ag-grid - 我们可以将自定义属性添加到在 ag-grid 编辑模式下创建的文本框中吗？

Question

我们有现有的网格，其中包含下面的文本框。我需要将所有这些属性附加到以 ag-grid 编辑模式 ( <input class="ag-cell-edit-input" type="text">) 创建的文本框。我们怎样才能附上相同的东西？

<input typeaheadval="3" onfocus="fnborderRow(21);" onfocusout="fnborderRow(0);" type="text" id="drpClass21" vendorpaymentid="149962" vendorpaymentdetailid="167679" rowid="21" sortfieldcol="clsSortPayee" value="210 UT - Salt Lake City" selectedid="210" onchange="fnChangeObj(this);" style="border-width: 1px; border-style: solid; border-color: rgb(195, 195, 195); background-color: rgb(255, 255, 255);" class="form-control clsSearch clsClass ui-autocomplete-input clsGLClass149962" autocomplete="off">

标签： ag-grid

Answer 1

当您使用 vanilla js 时，您需要将自定义单元格编辑器创建为函数，然后将所有必需的方法添加到函数原型中。

定义你的列定义：

{ headerName: "Custom Input", field: "customInput", editable: true, cellEditor: 'customTextInputEditor', }

创建你的CustomTextInputEditor函数：

function CustomTextInputEditor() {

}

然后将所有需要的方法添加到CustomTextInputEditor原型中，例如init：

CustomTextInputEditor.prototype.init = function (params) {
    this.container = createElementFromHTML('<input typeaheadval="3" onfocus="fnborderRow(21);" onfocusout="fnborderRow(0);" type="text" id="drpClass21" vendorpaymentid="149962" vendorpaymentdetailid="167679" rowid="21" sortfieldcol="clsSortPayee" value="210 UT - Salt Lake City" selectedid="210" onchange="fnChangeObj(this);" style="border-width: 1px; border-style: solid; border-color: rgb(195, 195, 195); background-color: rgb(255, 255, 255);" class="form-control clsSearch clsClass ui-autocomplete-input clsGLClass149962" autocomplete="off">')

    $(document).mouseup(function (e) {
        var container = $(".clsSearch");

        // if the target of the click isn't the container nor a descendant of the container
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            params.stopEditing();
        }
    });

    var that = this;

    this.container.addEventListener('keydown', function (event) {
        //that.onKeyDown(event)
        if (event.keyCode == 13) {
            //event.stopPropagation();
            params.stopEditing();
        }
    })
}; 

可以在此处找到完整的工作示例。