Question

我有3个复选框列，其中包含相应的日期列。所以我想要实现的是当用户在内联编辑和点击输入期间点击复选框时，今天的日期将被设置为指定列中另一个单元格的值。怎么实现？我收到了OLEG之前关于表单编辑的指示，但我希望在内联编辑时执行此操作。我已启用，但在内联编辑期间只能编辑检查标记。我禁用了所有其他字段，但复选框列。任何想法将不胜感激。

更新好的，所以我用以下代码解决了。感谢Oleg的帮助。

当前日期功能：

var date = new Date(Date.now());
console.log(todayDate(date));
function todayDate(date){
return (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
    }

检查列代码：

        { name: "devc", index: "devc",width: 25, align: "right", formatter: "checkbox", 
    editable: true, edittype: "checkbox",editoptions: {value: "Yes:No",defaultValue: "No",
dataEvents: [{type: "change", fn: function (e) {var $this = $(e.target), columnName = "devdate", rowid, cellId;
                                if ($this.hasClass("FormElement")) {
                                    // form editing
                                    cellId = columnName;
                                } else if ($this.closest("td").hasClass("edit-cell")) {
                                    // cell editing
                                    return; // no other editing field exist - nothing to do
                                } else {
                                    // inline editing
                                    rowid = $this.closest("tr.jqgrow").attr("id");
                                    cellId = rowid + "_" + columnName;
                                }
                                $("#" + $.jgrid.jqID(cellId)).val($this.is(":checked") ?
                                    (todayDate(date)) : "");} }]}}

Answer 1

为了能够在dataEvents中定义的某个事件处理程序中解决另一个编辑字段，您需要对不同编辑模式使用的ID使用相应的名称转换。

表单编辑创建的编辑元素的id属性与name中的colModel属性相同。内联编辑允许同时编辑多个行。因此，它使用另一个规则来构建id值：rowid值将附加_，然后在name中附加colModel属性的值。在单元格编辑期间，jqGrid只允许编辑一个单元格。因此，访问dataEvents中定义的某个事件处理程序中的另一个编辑字段是没有意义的。

The answer提供了在dataEvents的事件处理程序中检测编辑模式的示例。

让我们为列{ name: "appc", formatter: "checkbox", editable: true, edittype: "checkbox", ...}，您需要为列定义change事件处理程序。让我们为您提供另一个文本列{ name: "appdate", editable: true, ...}，并且您希望在appdate列中选中/取消选中复选框时更改appc列的修改字段的值。如果您可以执行以下操作：

{ name: "appdate", editable: true, ...},
{ name: "appc", formatter: "checkbox", editable: true, edittype: "checkbox",
    editoptions: {
        dataEvents: [{
            type: "change",
            fn: function (e) {
                var $this = $(e.target), columnName = "appdate", rowid, cellId;
                if ($this.hasClass("FormElement")) {
                    // form editing
                    cellId = columnName;
                } else if ($this.closest("td").hasClass("edit-cell")) {
                    // cell editing
                    return; // no other editing field exist - nothing to do
                } else {
                    // inline editing
                    rowid = $this.closest("tr.jqgrow").attr("id");
                    cellId = rowid + "_" + columnName;
                }

                // set the value of another edit field
                // we use below $.jgrid.jqID(cellId) instead of cellId
                // only to be sure that the next line work correctly
                // even in case of columnName contains special meta-charackters
                // like space or !"#$%&'()*+,./:;<=>?@[\]^`{|}~
                $("#" + $.jgrid.jqID(cellId)).val($this.is(":checked") ?
                    "CheckedText": "UncheckedText");
            } 
        }]
    }
}

更新：可以将问题中的代码修改为以下内容：

var date = new Date(Date.now()),
    todayDate = function (date) {
        return (date.getMonth() + 1) + "/" + date.getDate() +
            "/" + date.getFullYear();
    },
    checkBoxChange = function (e) {
        var $this = $(e.target), columnName = e.data.dateColumn,
            rowid, cellId;

        if ($this.hasClass("FormElement")) {
            // form editing
            cellId = columnName;
        } else if ($this.closest("td").hasClass("edit-cell")) {
            // cell editing
            return; // no other editing field exist - nothing to do
        } else {
            // inline editing
            rowid = $this.closest("tr.jqgrow").attr("id");
            cellId = rowid + "_" + columnName;
        }
        $("#" + $.jgrid.jqID(cellId)).val($this.is(":checked") ?
            (todayDate(date)) : "");
    };

...
...
{ name: "appdate", editable: true, ...},
{ name: "appc", formatter: "checkbox", editable: true,
    edittype: "checkbox",
    editoptions: {
        dataEvents: [{
            type: "change",
            data:  { dateColumn: "appdate" },
            fn: checkBoxChange
        }]
    }},
{ name: "devdate", editable: true, ...},
{ name: "devc", formatter: "checkbox", editable: true,
    edittype: "checkbox",
    editoptions: {
        dataEvents: [{
            type: "change",
            data:  { dateColumn: "devdate" },
            fn: checkBoxChange
        }]
    }}

我们可以看到我们使用data: { dateColumn: "devdate" }或data: { dateColumn: "appdate" }作为dataEvents项的附加属性。 checkBoxChange中使用的事件处理程序fn: checkBoxChange可以按使用data访问e.data.dateColumn。通过这种方式，您可以轻松地为多个列共享相同的事件处理程序。

JQGRID - 如何在内联/表单编辑中从不同列发送/读取值？

1 个答案: