JQGRID-如何在内联/表单编辑中从不同的列发送/读取值? [英] JQGRID - How to Send/Read Values from Different Columns in Inline / Form edit?

问题描述

我有3个复选框列和相应的日期列.所以我要实现的是，当用户在内联编辑期间单击复选框并按回车时，今天的日期将被发送为指定列中另一个单元格的值.如何实现?我从OLEG那里收到了关于在表单编辑上执行此操作的先前指示，但是我想在内联编辑期间执行此操作.我都启用了，但是在内联编辑期间只有复选标记是可编辑的.除了复选框列之外，我还禁用了所有其他字段.任何想法将不胜感激.

I have 3 checkbox columns with corresponding date column. So what I am trying to achieve is when user clicks on checkbox during inline-edit and hits enter, today's date will be sent set as the value for another cell in a specified column. How to achieve? I recieved prior direction from OLEG on doing this with on form-edit but I would like to do this during inline edit instead. I have both enabled but only checkmarks will be editable during inline edit. I have all other fields disabled but the checkboxes columns. Any ideas would be greatly appreciated.

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

UPDATE Okay so I solved with the below code. Thanks Oleg for the help.

当前日期功能:

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)) : "");} }]}}

推荐答案

要在dataEvents中定义的某些事件处理程序中寻址另一个编辑字段，您需要使用相应的名称转换不同的编辑模式使用的ID.

To be able to address another editing field inside of some event handler defined in dataEvents you need uses the corresponding name conversion for ids used by different editing mode.

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

Form editing creates editing elements with id attribute the same as the name property in colModel. Inline editing allows to edit multiple rows at the same time. So it uses another rule for building id values: the rowid value will be appended by _ and then appended with the value of name property in colModel. During cell editing jqGrid allows to edit one cell only. So accessing of another editing field inside of some event handler defined in dataEvents have no sense.

答案提供了一个检测dataEvents事件处理程序内部编辑模式的示例.

The answer provide an example of detection of editing mode inside of event handler of dataEvents.

让我们拥有列{ name: "appc", formatter: "checkbox", editable: true, edittype: "checkbox", ...}，您需要为该列定义change事件处理程序.让我们有另一个文本列{ name: "appdate", editable: true, ...}，并且要在选中/取消选中appc列中的复选框时更改appdate列的edit字段的值.在这种情况下，您可以执行以下操作:

Let us you have column { name: "appc", formatter: "checkbox", editable: true, edittype: "checkbox", ...} and you need to define change event handler for the column. Let us you have another text column { name: "appdate", editable: true, ...} and you want change the value of the the edit field of appdate column on checking/unchecking of the checkbox in appc column. In the case you can do the following:

{ 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");
            } 
        }]
    }
}

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

UPDATED: One can modify the code from your question to the following:

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项的附加属性. fn: checkBoxChange中使用的事件处理程序checkBoxChange可以通过用法e.data.dateColumn访问data.通过这种方式，可以轻松地为多个列共享相同的事件处理程序.

One can see that we use data: { dateColumn: "devdate" } or data: { dateColumn: "appdate" } as additional property of dataEvents items. The event handler checkBoxChange used in fn: checkBoxChange can access the data by usage e.data.dateColumn. In the way one can easy share the same event handler for multiple columns.

这篇关于JQGRID-如何在内联/表单编辑中从不同的列发送/读取值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！