0
У меня есть две вебгриды, отображаемые на двух вкладках. для страны - один для страны и один для города и два частичных мнения. Мое намерение было, если я выбираю страну в webgrid первой вкладки, соответствующие города должны отображаться на второй вкладке. Я использую jquery ajax calls и загружаюсь в тег Div второй вкладки. Rite теперь проблема, с которой я столкнулся, - я не могу передать первичный ключ («id») выбранной строки в первой сетке. Как я могу передать значение. Следующим является код, который я использовал. Теперь обратитесь в jquery $(this).val(). нульКак получить значение из выбранной строки webgrid с помощью jquery
.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>
Jquery код
<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>
UPDATE
Если я жёстко var selectedEmpCode к значению первичного ключа т.е. здесь 'идентификатор', то все работает нормально, я получаю значение POST HTTP действия r для второй webgrid, и отображается правильно. Таким образом, проблема теперь значение Val я не получаю ..
UPDATE
я сделал, как $(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&g1sortdir=ASC">id</a> </th>
<th scope="col">
<a data-swhglnk="true" href="/?g1sort=countryname&g1sortdir=ASC">countryname</a> </th>
<th scope="col">
<a data-swhglnk="true" href="/?g1sort=continent&g1sortdir=ASC">Description</a> </th>
<th scope="col">
<a data-swhglnk="true" href="/?g1sort=language&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>
фактический HTML-код сетки был бы более полезен, чем выражение '@ grid.GetHtml'. –
@ Roamer-1888, если кто-то может дать метод получения значения значения столбца таблицы, например $ (this) .find ("# id"). Text(); то мы можем закрыть этот вопрос – peter
@ Roamer-1888 i обновил свой вопрос – peter