我已经设置了自定义按钮,我希望点击事件将单元格值的值替换为该特定单元格的工具提示值。再次单击该按钮可将更改恢复为正常。
这一切都可能吗?
网格看起来像......
$("#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']);
});
答案 0 :(得分: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>
&#13;
答案 1 :(得分:1)
以下列方式解决:
.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值都会交换。
从行获取行细胞迭代的代码片段 answer to this question。
希望这有助于其他人!