如何在右键单击时获取 ASP.NET GridView在jQuery中的单元格ID
How to get cell ID of ASP.NET GridView in jQuery on right Click?
我的应用程序中有一个 GridView。我需要为用户提供一些功能来编辑某些单元格或删除行。当用户右键单击某个单元格时,我需要显示上下文菜单。当用户单击"编辑"时,我需要显示一些帮助信息,并将此单元格置于编辑模式并将焦点放在它上面。这是我的代码:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#myMenu").hide();
$("#helpRow").hide();
$("table[id$='gvListOfMatters'] > tbody > tr > td").bind('contextmenu', function (e) {
$("#myMenu").hide();
e.preventDefault();
$(this).css("cursor", "pointer");
iColIndex = $(this).closest("tr td").prevAll("tr td").length;
iRowIndex = $(this).closest("tr").prevAll("tr").length;
rowid = $(this).parent().children()[0].innerHTML;
if (!isNaN(rowid)) {
//call context menu here
$("#myMenu").css({
top: e.pageY + "px",
left: e.pageX + "px",
position: 'absolute'
});
$("#myMenu").show(100);
}
});
});
//hide when left mouse is clicked
$(document).bind('click', function (e) {
$("#myMenu").hide(100);
});
var rowid = 0;
function fnEdit() {
var lnkEdit = document.getElementById('<%=lnkEdit.ClientID %>');
var hiddenField = document.getElementById('<%=fldRowID.ClientID %>');
hiddenField.value = rowid;
lnkEdit.click();
};
function fnDelete() {
var lnkDelete = document.getElementById('<%=lnkDelete.ClientID %>');
var hiddenField = document.getElementById('<%=fldRowID.ClientID %>');
hiddenField.value = rowid;
lnkDelete.click();
};
</script>
<div id="helpRow">
</div>
<asp:GridView ID="gvHelpRow" runat="server" AutoGenerateColumns="true" CssClass="helpRow" ShowHeader="false" Visible="false"></asp:GridView>
<br />
<div id="SourceGrid" class="table responsive">
<asp:GridView ID="gvListOfMatters" runat="server"
SOME Tamplate COLUMNS…
</asp:GridView>
</div>
<asp:LinkButton ID="lnkEdit" runat="server" Style="display: none" OnClick="lnkEdit_Click" />
<asp:LinkButton ID="lnkDelete" runat="server" Style="display: none" OnClick="lnkDelete_Click" />
<asp:HiddenField ID="fldRowID" runat="server" />
<%--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ContextMenu↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓--%>
<div id="myMenu" class="contextMenu">
<table style='width: 100%;'>
<tr>
<td onclick="fnEdit();">- Edit
</td>
</tr>
<tr>
<td onclick="fnDelete();">- Delete
</td>
</tr>
</table>
</div>
<%--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ContextMenu↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑--%>
</asp:Content>
第一个问题是如何获取所选单元格的ID?我提到了我的代码中问题所在的地方。
我在代码隐藏中有 edit.click() 和 delete.click() 的事件处理程序。在edit.click()中,我将数据源绑定到helpRow GridView。
我的第二个问题是如何在单击的行下方显示此帮助行网格视图?我找不到如何为这个网格设置正确位置的方法......我知道它应该是绝对位置和 X 和 Y 位置......
所以整个想法:用户右键单击某个单元格。我需要显示上下文菜单("编辑"和"删除"),此时存储 rowID 和 cellID(我得到了 rowid,但 cellid 是问题所在......当用户单击编辑时,我需要根据 rowid 将一些数据(它存储在会话中)绑定到 helpRow 网格视图。然后我需要在所选行的正下方显示这个 helRow(位置:绝对和......如何获得正确的位置???)并在编辑模式下选择单元格并将焦点设置为此单元格。
我找到了自己的方式!首先,我将函数绑定到td
而不是tr
$("table[id$='gvListOfMatters'] > tbody > tr > td").bind('contextmenu', function (e) {
$("#myMenu").hide();
e.preventDefault();
$(this).css("cursor", "pointer");
iColIndex = $(this).closest("tr td").prevAll("tr td").length;
iRowIndex = $(this).closest("tr").prevAll("tr").length;
rowid = $(this).parent().children()[0].innerHTML;
if (!isNaN(rowid)) {
//call context menu here
$("#myMenu").css({
top: e.pageY + "px",
left: e.pageX + "px",
position: 'absolute'
});
$("#myMenu").show(100);
}
});
现在,我可以获取行ID,单元格ID以及此行中每个单元格内的所有文本。我将用最新更新更新我的原始问题
相关文章:
- 使用Jquery查找asp.net GridView中的所有复选框
- Jquery函数不适用于gridview中动态添加的行
- 如何在右键单击时获取 ASP.NET GridView在jQuery中的单元格ID
- 如何禁用和启用删除按钮,如果未在 GridView 中选中复选框由 Jquery
- 在 GridView 中调用 jQuery 函数
- 使用 jQuery mobile 和 ASP.NET Gridview 的响应式表
- 使用 jquery 为 gridview 文本框赋值
- JQuery 最接近的元素,来自 GridView 中的文本框
- Jquery获取表格gridview中所有选中行的值
- 修改jQuery进度条's基于Gridview列的颜色
- Gridview TH中未引发jQuery事件
- 如何使用Jquery访问GridView中选定的列值
- 如何使用javascript或jquery清除gridview
- 如何在GridView中使用jQuery倒计时插件
- 在asp.net web应用程序中使用jQuery表替换GridView
- 使用Jquery sortable和gridview更新排序顺序
- 如何使用JavaScript或JQuery在GridView中找到LinkButton
- 如何将GridView id和其他控件传递给jQuery函数
- 如何在JavaScript或JQuery中获取和设置Gridview下拉列表Selectedvalue
- 如何避免重复选择的项目下拉,这是在gridview使用javascript/jquery