jqGrid

Question

我已经设置了一个自定义按钮，我希望点击事件用该特定单元格的工具提示值的值替换单元格值的值。再次单击该按钮会将更改恢复为正常。

这可能吗？

网格看起来像...

$("#grid").jqGrid({
        url: "/Controller/ActionMethod",
        datatype: 'json',
        mtype: 'Get',
        //postData: { mId: getParameterByName('mId') },
        colNames: [Id', 'M-Val', Date' 'H1', 'H2', 'H3'],
        colModel: [
            { key: true, name: 'Id', index: 'Id', editable: true },
            { key: false, name: 'M-Val', index: 'M-Val', editable: true },
            {
                key: false, name: 'DateField', index: 'DateField', editable: true, formatter: 'date', width: 150,
                formatoptions: { srcFormat: 'ISO8601Long', newformat: 'd/m/Y ' }, searchoptions: { sopt: ['eq', 'ne', 'lt', 'gt'] }
            },
            { key: false, name: 'H1', index: 'H1', editable: true, width: 60, formatter: colorCode, cellattr: colorCodeCell },
            { key: false, name: 'H2', index: 'H2', editable: true, width: 60, formatter: colorCode, cellattr: colorCodeCell },
            { key: false, name: 'H3', index: 'H3', editable: true, width: 60, formatter: colorCode, cellattr: colorCodeCell },        ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: '',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        shrinkToFit: false,
        multiselect: false
    }).navGrid('#pager', { edit: false, add: false, del: false, search: true, refresh: true }, {}, {}, {}, { multipleSearch: true, searchOnEnter: true, closeOnEscape: true }, {})
        //Button to view Tiers
        .jqGrid('navButtonAdd', '#pager', {
            caption: "", buttonicon: "ui-icon-info",
            onClickButton: function () {
                //TODO:
            }, position: "last", title: "View Tier Info", cursor: "pointer"
        });
    //$("#grid").jqGrid('groupingGroupBy', ['Id', 'M-Val', 'DateField']);
});

Answer 1

只是演示一下你的意思：

document.querySelector(".swap").addEventListener("click", function(){
  var element = this.parentElement.parentElement.children[0]; //td
  var tooltip = element.title;
  var content = element.textContent;
  
  //swap the values
  element.title = content;
  element.textContent = tooltip;
}, false)

<table>
  <tr>
    <td title="Tooltip">regular</td><td><button class="swap">swap</button></td>
  </tr>
</table>

Answer 2

按以下方式计算：

.jqGrid('navButtonAdd', '#pager', {
        caption: "", buttonicon: "ui-icon-info",
        onClickButton: function () {

            var grid = jQuery("#grid"), rows = grid[0].rows, cRows = rows.length,
            iRow, rowId, row, cellsOfRow;

            for (iRow = 0; iRow < cRows; iRow++) {
                row = rows[iRow];
                if ($(row).hasClass("jqgrow")) {
                    cellsOfRow = row.cells;

                    for (var i = 0; i < cellsOfRow.length; i++) {
                        var title = cellsOfRow[i].title;
                        var innerHTML = cellsOfRow[i].innerHTML
                        cellsOfRow[i].innerHTML = title;
                        cellsOfRow[i].title = innerHTML;
                    }
                }
            }

        }, position: "last", title: "View Info", cursor: "pointer"
    });

现在，每当我单击指定按钮时，单元格标题值和 innerHTML DOM 值就会交换。

row-cell 迭代的代码片段是从 answer to this question。

希望这对其他人有帮助！

jqGrid - onClickButton 用工具提示值替换单元格值，反之亦然

jqGrid - onClickButton replace cell values with tooltip value and vice versa

javascript

jquery

tooltip