Я хочу сделать простую таблицу, содержащую пользовательскую кнопку в строке. Когда кнопка нажата, я хочу вывести всплывающее окно с предупреждением. Я прочитал несколько сообщений по этому поводу, например: этот пост а также этот другой пост, и я не понимаю, почему мой код не работает. Кнопки нарисованы, но нажатие на них не дает никакого эффекта.
У меня здесь описаны три попытки.
Версия 1. Нажатие кнопки не срабатывает:
$(document).ready(function(){
jQuery("#simpletable").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status}
],
data:[
{'A':2,'B':100,'status':"<button onclick=\"jQuery('#simpletable').saveRow('1', function(){alert('you are in')});\" >in</button>"},
{'A':1,'B':200,'status':"<button onclick=\"jQuery('#simpletable').saveRow('2', function(){alert('you are in')});\" >in</button>"},
],
caption: "Demo of Custom Clickable Button in Row",
viewrecords:true,
editurl:'clientArray',
});
});
HTML-код:
<table id="simpletable"></table>
РЕДАКТИРОВАТЬ 8/2/12 - Я узнал кое-что со времени моего исходного сообщения, и здесь я описываю еще две попытки.
Версия 2: использую onCellSelect. Это работает, но не позволяет мне разместить более одной кнопки в ячейке. Кроме того, я сделал код лучше, используя вариант формата, предложенный в одном из комментариев к этому сообщению.
function status_button_maker_v2(cellvalue, options, rowObject){
return "<button class=\"ver2_statusbutton\">"+cellvalue+"</button>"
};
jQuery("#simpletablev2").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v2}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
onCellSelect:function(rowid,icol,cellcontent,e){
if (icol==2){
alert('My value in column A is: '+$("#simpletablev2").getRowData(rowid)['A']);
}else{
return true;
}
},
caption: "Demo of Custom Clickable Button in Row, ver 2",
viewrecords:true,
}); //end simpletablev2
Разметка:
<style>.ver2_statusbutton { color:blue;} </style>
<h3>simple table, ver 2:</h3>
<table id="simpletablev2"></table>
Версия 3: я попытался использовать решение для сообщение w4ik, используя" .on "вместо устаревшего" .live ". Это приводит к срабатыванию нажатия кнопки, но я не знаю, как получить идентификатор строки. w4ik тоже боролся с этим, и он написал, что у него получилось, но не как он это сделал. Я могу выбрать последнюю строку, но это всегда будет относиться к предыдущей выбранной строке, потому что кнопка имеет приоритет.
Я бы предпочел это решение, если бы я мог заставить его работать.
jQuery("#simpletablev3").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v3}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
caption: "Demo of Custom Clickable Button in Row, ver 3",
viewrecords:true,
onSelectRow: function(){},
gridComplete: function(){}
}); //end simpletablev3
$(".ver3_statusbutton").on(
{
click: function(){
//how to get the row id? the following does not work
//var rowid = $("#simpletablev3").attr('rowid');
//
//it also does not work to get the selected row
// this is always one click behind:
//$("#simpletablev3").trigger("reloadGrid");
rowid = $("#simpletablev3").getGridParam('selrow');
alert("button pushed! rowid = "+rowid);
}
});
Разметка:
<style>.ver3_statusbutton { color:red;} </style>
<h3>simple table, ver 3:</h3>
<table id="simpletablev3"></table>
Таким образом, я борюсь с проблемой нажатия кнопки в нужное время . В версии 1 строка выбирается, и кнопка никогда не нажимается. Версия 2 вообще не использует "кнопку" - она просто обрабатывает щелчок по ячейке. Verion 3 получает нажатие кнопки перед выбором строки (неправильный порядок).
Любая помощь была бы признательна!
1 ответ
Здесь вы можете использовать средство форматирования действий с каждой строкой и сделать кнопку редактирования и удаления как false в параметрах formatOptions, например:
formatoptions: {editbutton:false,delbutton:false}}
И следите за этими двумя демонстрациями:
http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm
http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm
И при нажатии на эти настраиваемые кнопки отображается ваше предупреждение:
ИЗМЕНИТЬ
var getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
function () {
var iCol = getColumnIndexByName(grid, 'act');
$(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
.each(function() {
$("<div>", {
title: "Custom",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
alert("'Custom' button is clicked in the rowis="+
$(e.target).closest("tr.jqgrow").attr("id") +" !");
}
}
).css({"margin-right": "5px", float: "left", cursor: "pointer"})
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.prependTo($(this).children("div"));
});
}
Если вы проверите этот код, я пытаюсь узнать значение индекса, указав имя столбца как «act», вы можете получить индекс для любого другого столбца, указав другое имя столбца.
var iCol = getColumnIndexByName(grid, 'Demo'); and the rest of the code will be same for you. //demo is the column name where u want to add custom button
И напишите событие нажатия для этой кнопки.
Сообщите мне, работает ли это для вас или нет.
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.