如何使用javascript在上下文菜单中通过gridview获取选定行的值 [英] how to get the selected row's value in gridview by context menu, using javascript

问题描述

我正在使用asp.net mvc，我有一个通过jason从控制器获取数据的gridview，我想使用JavaScript在上下文菜单中通过gridview获取所选行的值.这是我的索引

I''m working with asp.net mvc, i have a gridview that get data from controller by jason, i want to get the selected row''s value in gridview by context menu, using javascript. this is my index

<script type="text/javascript">

jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '../../Home/Example/123',
datatype: 'json',
myType: 'GET',
colNames: ['Id', 'Name', 'Description'],
colModel: [
{ name: 'id', index: 'id', width: 55, resizable: true },
{ name: 'name', index: 'name', width: 90, resizable: true },
{ name: 'description', index: 'description', width: 120, resizable: true}],
pager: $('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
multiselect: true,
multikey: "ctrlKey",
imgpath: '../Scripts/themes/redmond/images',
caption: 'My first grid'
});
//this is what i was trying to do to get row value
$("#mycontextmenu").val( '|id: ' + menu_id + '|name: ' + menu_name + '|description: ' + menu_description );
$("#list").contextMenu("#mycontextmenu")
});
</script>
<div id="mycontextmenu" class="contextmenu"></div>
<!-- the grid definition in html is a table tag with class 'scroll' -->
<table id="list" class="scroll" cellpadding="0" cellspacing="0">
</table>
<!-- pager definition. class scroll tells that we want to use the same theme as grid -->
<div id="pager" class="scroll" style="text-align: center;">
</div>
</asp:Content>


//HomeController
public ActionResult example(int id, string sidx, string sord, int page, int rows)
{
var result = new
{
total = 1,
page = page,
records = 3,
rows = new[]
{
new{id = 11, cell = new[]{"11","Blue","I'll be blue if this doesnt work"}},
new{id = 12, cell = new[]{"12","Blue","I'll be blue if this doesnt work"}},
new{id = 13, cell = new[]{"13","Blue","I'll be blue if this doesnt work"}}
}
};
return Json(result, JsonRequestBehavior.AllowGet);
}


//master site
<%--my plugins--%>
<link rel="stylesheet" type="text/css" href="../../Scripts/themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" href="../../Scripts/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="../../Scripts/jqcontexmenu/jquery.contextMenu.css" />
<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/jquery-1.3.2.js") %>"></script>
<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/js/i18n/grid.locale-en.js") %>"></script>
<%--<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/js/jquery.jqGrid.min.js") %>"></script>
<script type="text/javascript" src="<%= this.ResolveClientUrl("http://localhost:2523/Scripts/js/jquery-1.2.6.js") %>"></script>--%>
<%--<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/js/grid.base.js") %>"></script>--%>
<script type="text/javascript" src="http://localhost:55423/Scripts/js/grid.base.js"></script>
<%--<script type="text/javascript" src="../../Scripts/jqcontexmenu/jquery.contextMenu.js"></script>--%>
<script type="text/javascript" src="../../Scripts/rightclick/jquery.contextmenu.r2.js"></script>

推荐答案

('#pager')， rowNum:10， rowList:[10，20，30]， sortname:'id'， 排序顺序:"desc"， 观看记录:是的， 单选:true， 多键:"ctrlKey"， imgpath:"../Scripts/themes/redmond/images"， 标题:我的第一个网格" }); //这是我要获取行值所要执行的操作

('#pager'), rowNum: 10, rowList: [10, 20, 30], sortname: 'id', sortorder: 'desc', viewrecords: true, multiselect: true, multikey: "ctrlKey", imgpath: '../Scripts/themes/redmond/images', caption: 'My first grid' }); //this is what i was trying to do to get row value

(#mycontextmenu").val('| id:'+ menu_id +'| name:'+ menu_name + '|描述:'+ menu_description);

("#mycontextmenu").val( '|id: ' + menu_id + '|name: ' + menu_name + '|description: ' + menu_description );

(#list").contextMenu(#mycontextmenu") }); < /script > < div =" mycontextmenu" class contextmenu" > < /div > <！- html中的网格定义是带有类的表标签'scroll' -> < 表 =" list" class scroll" 单元格填充 =" 0" 单元格间距 0" < /table > <！- 寻呼机定义.类滚动表明我们要使用与网格相同的主题 -> < div =" pager" 类 滚动" 样式 =" 文本对齐:居中；" < /div > < /asp:Content > //HomeController 公共ActionResult示例(int id，字符串sidx，字符串sord，int页面，int行) { var结果=新 { 总数= 1 页面=页面， 记录= 3， 行=新[] { new {id = 11，cell = new [] {"11"，"Blue"，如果不起作用，我会变成蓝色的"}}， new {id = 12，cell = new [] {"12"，"Blue"，如果不起作用，我会变成蓝色的"}}， new {id = 13，cell = new [] {"13"，"Blue"，如果不起作用，我会变成蓝色"}} } }; 返回Json(result，JsonRequestBehavior.AllowGet); } //主站点 <％-我的插件-％> < 链接 =" 样式表" 类型 文本/css " href ../../Scripts/themes/redmond/jquery-ui-1.7.1.custom.css" / > < 链接 =" 样式表" 类型 文本/css " href ../../Scripts/themes/ui.jqgrid.css" / < 链接 =" 样式表" 类型 文本/css " href ../../Scripts/jqcontexmenu/jquery.contextMenu.css" / < 脚本 =" 文本/javascript" src <％ = 此.ResolveClientUrl(" 〜/Scripts/jquery-1.3.2.js") > < /script > < 脚本 =" 文本/javascript" src <％ = 此.ResolveClientUrl(" 〜/Scripts/js/i18n/grid.locale-en.js") > < /script > <％-<脚本 类型 =" src =" <％ = " )％> " </ > < 脚本 =" 文本/javascript" src <％ = 此.ResolveClientUrl(" http://localhost:2523/Scripts/js/jquery-1.2.6.js") < > -％> <％-<脚本 类型 =" src =" <％ = " )％> " > </ 脚本 > -％> < 脚本 =" 文本/javascript" src http ://localhost:55423/Scripts/js/grid.base.js" < /script > <％-<脚本 类型 =" src =" > </ 脚本 > -％> < 脚本 =" 文本/javascript" src . ./../Scripts/rightclick/jquery.contextmenu.r2.js"> < /script >

("#list").contextMenu("#mycontextmenu") }); </script> <div id="mycontextmenu" class="contextmenu"></div> <!-- the grid definition in html is a table tag with class 'scroll' --> <table id="list" class="scroll" cellpadding="0" cellspacing="0"> </table> <!-- pager definition. class scroll tells that we want to use the same theme as grid --> <div id="pager" class="scroll" style="text-align: center;"> </div> </asp:Content> //HomeController public ActionResult example(int id, string sidx, string sord, int page, int rows) { var result = new { total = 1, page = page, records = 3, rows = new[] { new{id = 11, cell = new[]{"11","Blue","I'll be blue if this doesnt work"}}, new{id = 12, cell = new[]{"12","Blue","I'll be blue if this doesnt work"}}, new{id = 13, cell = new[]{"13","Blue","I'll be blue if this doesnt work"}} } }; return Json(result, JsonRequestBehavior.AllowGet); } //master site <%--my plugins--%> <link rel="stylesheet" type="text/css" href="../../Scripts/themes/redmond/jquery-ui-1.7.1.custom.css" /> <link rel="stylesheet" type="text/css" href="../../Scripts/themes/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" href="../../Scripts/jqcontexmenu/jquery.contextMenu.css" /> <script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/jquery-1.3.2.js") %>"></script> <script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/js/i18n/grid.locale-en.js") %>"></script> <%--<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/js/jquery.jqGrid.min.js") %>"></script> <script type="text/javascript" src="<%= this.ResolveClientUrl("http://localhost:2523/Scripts/js/jquery-1.2.6.js") %>"></script>--%> <%--<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/js/grid.base.js") %>"></script>--%> <script type="text/javascript" src="http://localhost:55423/Scripts/js/grid.base.js"></script> <%--<script type="text/javascript" src="../../Scripts/jqcontexmenu/jquery.contextMenu.js"></script>--%> <script type="text/javascript" src="../../Scripts/rightclick/jquery.contextmenu.r2.js"></script>

这篇关于如何使用javascript在上下文菜单中通过gridview获取选定行的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！