如何使用 jquery 从网络网格的选定行中获取值

我在两个选项卡中显示了两个网络网格。一个用于国家，一个用于城市，两个部分视图对此负责。我的目的是如果我在第一个选项卡的网络网格中选择国家/地区，则相应的城市应显示在第二个选项卡中。我正在使用jquery ajax调用并加载到第二个选项卡的Div标签中。Rite 现在我面临的问题是我无法在第一个网格中传递所选行的主键("id")。如何传递值。以下是我使用的代码。现在 jquery 中的 Rite$(this).val()为空

.webGrid {
margin: 4px;
border-collapse: collapse;
width: 500px;
background-color: #B4CFC3;
}
.header {
background-color: #C1D4E6;
font-weight: bold;
color: #FFF;
}
.webGrid th, .webGrid td {
border: 1px solid #C0C0C0;
padding: 5px;
}
.alt {
background-color: #E4E9F5;
color: #000;
}
.gridHead a:hover {
text-decoration: underline;
}
.description {
width: auto;
}
.select {
background-color: #71857C;
}
</style>
@{
var grid1 = new WebGrid(Model,fieldNamePrefix: "g2", pageFieldName: "p2", canPage: true, rowsPerPage: 5,
selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridSecondContent");
grid1.Pager(WebGridPagerModes.NextPrevious);}
<div id="gridContent">
@grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("id", "id"),
grid.Column("countryname", format: (item) => item.GetSelectLink(item.countryname))
</div>

J查询代码

<script>
function getDepartmentTable(selectedEmpCode) {
$.ajax({
// Get Department PartialView
url: "/Newgridtab/_citygrid",
type: 'GET',
data: { id: selectedEmpCode },
success: function (data) {
jQuery("#tabs-2").html(data);
},
error: function (error) {
alert("Error: Please try again.");
}
});
}
</script>
<script>
jQuery(document).ready(function () {
jQuery("#gridContent").hover(function (index) {
var selectedEmpCode = $(this).val();
getDepartmentTable(selectedEmpCode);
});

});
</script>

更新

如果我var selectedEmpCode硬编码为主键值，即这里的"id"，那么一切正常，我在负责第二个网络网格的操作的 HTTP POST 中获取值，并且它正确显示。所以现在的问题是我没有得到的价值。

更新

我确实喜欢$(this).parent().find('id').text();但根本没有运气

呈现的 HTML 是

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab Header 1</a></li>
<li><a href="#tabs-2">Tab Header 2</a></li>
</ul>
<div id="tabs-1">
<style type="text/css">
.webGrid {
margin: 4px;
border-collapse: collapse;
width: 500px;
background-color: #B4CFC3;
}
.header {
background-color: #C1D4E6;
font-weight: bold;
color: #FFF;
}
.webGrid th, .webGrid td {
border: 1px solid #C0C0C0;
padding: 5px;
}
.alt {
background-color: #E4E9F5;
color: #000;
}
.gridHead a:hover {
text-decoration: underline;
}
.description {
width: auto;
}
.select {
background-color: #71857C;
}
</style>

<div id="gridContent">
<script type="text/javascript">
(function($) {
$.fn.swhgLoad = function(url, containerId, callback) {
url = url + (url.indexOf('?') == -1 ? '?' : '&') + '__swhg=' + new Date().getTime();
$('<div/>').load(url + ' ' + containerId, function(data, status, xhr) {
$(containerId).replaceWith($(this).html());
if (typeof(callback) === 'function') {
callback.apply(this, arguments);
}
});
return this;
}
$(function() {
$('table[data-swhgajax="true"],span[data-swhgajax="true"]').each(function() {
var self = $(this);
var containerId = '#' + self.data('swhgcontainer');
var callback = getFunction(self.data('swhgcallback'));
$(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function() {
$(containerId).swhgLoad($(this).attr('href'), containerId, callback);
return false;
});
})
});
function getFunction(code, argNames) {
argNames = argNames || [];
var fn = window, parts = (code || "").split(".");
while (fn && parts.length) {
fn = fn[parts.shift()];
}
if (typeof (fn) === "function") {
return fn;
}
argNames.push(code);
return Function.constructor.apply(null, argNames);
}
})(jQuery);
</script>
<table class="webGrid" data-swhgajax="true" data-swhgcontainer="gridContent" data-swhgcallback="">
<thead>
<tr class="header">
<th scope="col">
<a data-swhglnk="true" href="/?g1sort=id&amp;g1sortdir=ASC">id</a>            </th>
<th scope="col">
<a data-swhglnk="true" href="/?g1sort=countryname&amp;g1sortdir=ASC">countryname</a>            </th>
<th scope="col">
<a data-swhglnk="true" href="/?g1sort=continent&amp;g1sortdir=ASC">Description</a>            </th>
<th scope="col">
<a data-swhglnk="true" href="/?g1sort=language&amp;g1sortdir=ASC">language</a>            </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a data-swhglnk="true" href="/?g1selectedRow=1">India</a></td>
<td class="continent">Asia</td>
<td>Hindi</td>
</tr>
<tr class="alt">
<td>2</td>
<td><a data-swhglnk="true" href="/?g1selectedRow=2">China</a></td>
<td class="continent">Asia</td>
<td>Mandarin</td>
</tr>
<tr>
<td>3</td>
<td><a data-swhglnk="true" href="/?g1selectedRow=3">England</a></td>
<td class="continent">Europe</td>
<td>English</td>
</tr>
<tr class="alt">
<td>4</td>
<td><a data-swhglnk="true" href="/?g1selectedRow=4">USA</a></td>
<td class="continent">America</td>
<td>English</td>
</tr>
</tbody>
</table>


</div>
<script>
function getDepartmentTable(selectedEmpCode) {
$.ajax({
// Get Department PartialView
url: "/Newgridtab/_citygrid",
type: 'GET',
data: { id: selectedEmpCode },
success: function (data) {
jQuery("#tabs-2").html(data);
},
error: function (error) {
alert("Error: Please try again.");
}
});
}
</script>
<script>
jQuery(document).ready(function () {
jQuery("#gridContent").hover(function (index) {
//var selectedEmpCode = $(this).find("#id").text();
getDepartmentTable(4);
});

});
</script>

</div>
<div id="tabs-2">
</div>

</div>

</body>
</html>

您试图获取 $(this) 的 val() 的问题。

$(this) 将是你悬停在上面的div，而不是 id 的值。

尝试替换此行：

var selectedEmpCode = $(this).val();

有了这个：var selectedEmpCode = $(this).find("#id").text();(或.val()如果渲染的html是一个输入-->我认为它不是)

<script>
jQuery(document).ready(function () {
jQuery("#gridContent a").hover(function (index) {
var selectedEmpCode = $(this).text();
getDepartmentTable(selectedEmpCode);
});

});
</script>

相关内容

最新更新

热门标签：