在jqGrid的行中添加自定义按钮? [英] Adding a custom button in row in jqGrid?
问题描述
我想制作一个简单的表格，其中包含一行中的自定义按钮.按下按钮时，我想弹出一个警报"框.我已经阅读了一些关于此的帖子，例如:这篇文章和其他帖子，我不明白为什么我的代码不工作.按钮已绘制，但按下按钮无效.
我在这里描述了三种尝试.
版本 1. 按钮单击永远不会触发:
$(document).ready(function(){jQuery("#simpletable").jqGrid({数据类型:本地"，colNames:['A','B','状态'],col型号:[{名称:'A'，索引:'A'}，{名称:'B'，索引:'B'}，{名称:'状态'，索引:状态}],数据:[{'A':2,'B':100,'status':"<button onclick="jQuery('#simpletable').saveRow('1', function(){alert('你在')});" >in</button>"},{'A':1,'B':200,'status':"<button onclick="jQuery('#simpletable').saveRow('2', function(){alert('你在')});" >in</button>"},],标题:行中自定义可点击按钮的演示"，查看记录:真实，编辑网址:'clientArray'，});});HTML代码:
<table id="simpletable"></table>编辑 2012 年 8 月 2 日 -- 自从我的原始帖子以来，我学到了一些东西，在这里我描述了另外两次尝试.
版本 2:我使用 onCellSelect.这可行，但它不允许我在一个单元格中放置多个按钮.此外，我通过使用这篇文章的评论之一建议的格式选项使代码更好.
function status_button_maker_v2(cellvalue, options, rowObject){return "标记:
<style>.ver2_statusbutton { color:blue;} </style><h3>简单表，版本 2:</h3><table id="simpletablev2"></table>版本 3:我尝试使用解决方案 w4ik 的帖子，使用.on"而不是已弃用的.live".这会导致按钮单击触发，但我不知道如何检索 rowid.w4ik 也为此苦苦挣扎，他发布说他解决了这个问题，但没有说明他是如何做到的.我可以选择最后一行，但这将始终引用选择的上一行，因为按钮优先.
如果我能让它工作，我更喜欢这个解决方案.
jQuery("#simpletablev3").jqGrid({数据类型:本地"，colNames:['A','B','状态'],col型号:[{名称:'A'，索引:'A'}，{名称:'B'，索引:'B'}，{name:'status',index:status,editable:true,formatter:status_button_maker_v3}],数据:[{'A':2,'B':100,'status':"In"},{'A':1,'B':200,'status':"Out"}],标题:行中的自定义可点击按钮演示，版本 3"，查看记录:真实，onSelectRow:函数(){}，网格完成:函数(){}});//结束simpletablev3$(".ver3_statusbutton").on({点击:函数(){//如何获取行ID?以下不起作用//var rowid = $("#simpletablev3").attr('rowid');////获取选中的行也不行//这总是一键点击://$("#simpletablev3").trigger("reloadGrid");rowid = $("#simpletablev3").getGridParam('selrow');alert("按钮按下了！rowid = "+rowid);}});标记:
<style>.ver3_statusbutton { color:red;} </style><h3>简单表，版本 3:</h3><table id="simpletablev3"></table>总之，我正在努力解决让我的按钮在正确的时间被按下的问题.在版本 1 中，该行被选中并且按钮永远不会被按下.版本 2 根本不使用按钮"——它只处理单元格点击.版本 3 在行选择之前获得按钮点击(错误的顺序).
任何帮助将不胜感激！
您可以在此处对每一行使用操作格式化程序，并在 formatOptions 中将编辑和删除按钮设置为 false，如下所示:
格式选项:{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;对于 (i = 0; i < l; i++) {if (cm[i].name === columnName) {返回我；//返回索引}}返回-1；},功能 () {var iCol = getColumnIndexByName(grid, 'act');$(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")").每个(函数(){$("", {标题:自定义"，鼠标悬停:函数(){$(this).addClass('ui-state-hover');},鼠标移出:函数(){$(this).removeClass('ui-state-hover');},点击:函数(e){alert("'自定义'按钮在 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');其余的代码对你来说都是一样的.//demo 是你要添加自定义按钮的列名
并为此按钮编写您的点击事件.
让我知道这是否适合你.
I want to make a simple table that contains a custom button in a row. When the button is pushed, I want to pop up an 'alert' box. I have read some posts on this, for example:
this post
and
this other post, and I don't understand why my code is not working. The buttons are drawn, but pushing them has no effect.
I have three attempts described here.
Version 1. The button click never fires:
$(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 Code:
<table id="simpletable"></table>
EDIT 8/2/12 -- I've learned some things since my original post and here I describe two more attempts.
Version 2: I use onCellSelect. This works, but it would not allow me to put more than one button in a cell. Additionally, I made the code nicer by using the format option suggested by one of the comments to this post.
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
Markup:
<style>.ver2_statusbutton { color:blue;} </style>
<h3>simple table, ver 2:</h3>
<table id="simpletablev2"></table>
Version 3: I tried to use the solution to w4ik's post, using ".on" instead of deprecated ".live". This causes the button click to fire, but I don't know how to retrieve the rowid. w4ik also struggled with this, and he posted that he worked it out, but not how he did it. I can get the last row selected, but this will always refer to the previous row selected because the button is taking priority.
I would prefer this solution if I could get it to work.
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);
}
});
Markup:
<style>.ver3_statusbutton { color:red;} </style>
<h3>simple table, ver 3:</h3>
<table id="simpletablev3"></table>
In summary, I'm struggling with the issue of getting my button to be pushed at the right time. In version 1, the row gets selected and the button never gets pushed. Version 2 does not use the "button" at all -- It just handles the cell click. Verion 3 gets the button click before the row select (wrong order).
Any help would be appreciated!
解决方案 You can use action formatter here with each row and make edit and delete button as false in formatOptions like this:
formatoptions: {editbutton:false,delbutton:false}}
And follow these two demos:
http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm
http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm
And on click event of these custom buttons show your alert:
EDIT
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"));
});
}
If you check this code, I'm trying to find out index value by giving column name as 'act', you can get index on any other column by giving a different column name.
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
and write your click event for this button.
Let me know if this works for you or not.
这篇关于在jqGrid的行中添加自定义按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
