Я использую ASP.NET для создания страницы с GridView, которая легко редактируется для конечного пользователя. По сути, все строки содержат текстовые поля (вместо статического текста), которые пользователь может редактировать в любое время. Никакой обратной передачи не происходит, кроме случаев, когда он нажимает кнопку «Сохранить» внизу страницы. Затем я просматриваю каждую строку в сетке, извлекаю значения в элементах управления в каждой строке и сохраняю их обратно в базу данных.
Теперь я пытаюсь реализовать замену двух строк (для перемещения строки вверх или вниз) в Javascript, и для этого мне нужен способ получить предыдущую и следующую строки в таблице.
На данный момент мой GridView содержит HiddenField в качестве первого столбца, который содержит уникальный идентификатор элемента данных (мне нужно это, чтобы конечно сохранить его обратно в базу данных). Для других целей (удаление строки) я выяснил, как получить этот идентификатор, а именно:
var itemHf = $(this).parent().parent().parent().find(':input');
Существует так много «родительских» вызовов, потому что это происходит в событии щелчка изображения, которое находится внутри LinkButton, который находится внутри последнего столбца моей сетки. Итак, первый родительский элемент - это LinkButton, следующий - ячейка таблицы и, наконец, строка таблицы. Затем, я полагаю, функция find (': input')
возвращает первый элемент ввода в этой строке (который в моем случае является скрытым полем, содержащим идентификатор).
Итак, используя тот же методом я могу получить текущую строку:
var row = $(this).parent().parent().parent();
Но как мне получить предыдущую и следующую строки?
Кроме того, как только у меня появятся эти строки, мне нужно будет получить значения из большего количества входных элементов. Я знаю, что могу найти первый, используя find (': input')
, но как мне найти второй и третий входные элементы в этой строке таблицы?
EDIT
В настоящее время у меня нет HTML-кода, но вот разметка ASP.NET для сетки:
<asp:GridView runat="server" ID="grid" AutoGenerateColumns="False"
onrowcommand="grid_RowCommand" onrowdeleting="grid_RowDeleting">
<Columns>
<!-- Move Up button -->
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton runat="server" OnClientClick="return false;">
<asp:Image ImageUrl="~/Images/moveUp.png" AlternateText="moveUp" runat="server" CssClass="moveUp" ID="moveUp" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<!-- Move Down button -->
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton runat="server" OnClientClick="return false;">
<asp:Image ImageUrl="~/Images/moveDown.png" AlternateText="moveDown" runat="server" CssClass="moveDown" ID="moveDown" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<!-- ID Hidden Field -->
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "Id") %>' />
</ItemTemplate>
</asp:TemplateField>
<!-- Name textbox field -->
<asp:TemplateField HeaderText="Naam">
<ItemTemplate>
<asp:TextBox runat="server" Width="200px" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>' />
</ItemTemplate>
</asp:TemplateField>
<!-- Price textbox field -->
<asp:TemplateField HeaderText="Prijs">
<ItemTemplate>
<asp:TextBox runat="server" Width="50px" Text='<%# DataBinder.Eval(Container.DataItem, "Price") %>' />
</ItemTemplate>
</asp:TemplateField>
<!-- Delete button -->
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton runat="server" OnClientClick="return false;">
<asp:Image ImageUrl="~/Images/delete.png" AlternateText="delete" runat="server" CssClass="delete" ID="delete" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
А вот пример jQuery, который я использую:
$(document).ready(function () {
$('table td img.delete').click(function () {
var id = $(this).closest('tr').find(':input').val();
alert(id);
});
});