javascript 使用javascript获取gridview的选定rowIndex
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28265349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get selected rowIndex of gridview using javascript
提问by TFrost
I want to get the selected rowindexfrom the gridview. In the gridviewthere are 5 columns ID, name, model, codeand amount. It also contains an image, which when clicked opens a popup window by which I can assign values in ID,name,modeland code. Problem is that I can't assign proper values in each rows after clicking image and selecting the row in popup window.
For that I need to get the selected index where the image is clicked.
我想rowindex从gridview. 在gridview有5列ID，name，model，code和amount。它还包含一个图像，点击时打开的，我可以在赋值一个弹出窗口，ID，name，model和code。问题是在单击图像并在弹出窗口中选择行后，我无法在每一行中分配正确的值。为此，我需要获取单击图像的选定索引。
Here is the gridview Code.
这是 gridview 代码。
<asp:GridView ID="grvSalesDetails" runat="server" AutoGenerateColumns="False" CellPadding="4"
CssClass="mGrid" ForeColor="#333333" GridLines="None" OnRowDeleting="grvSalesDetails_RowDeleting"
ShowFooter="True" Style="text-align: left" Width="100%" SelectedRowStyle="myselection">
<Columns>
<asp:BoundField DataField="RowNumber" HeaderText="SNo" />
<asp:TemplateField HeaderText="Machine ID">
<ItemTemplate>
<asp:TextBox ID="txtMID" runat="server" Width="30px"></asp:TextBox>
<img class="style1" alt="" src="../Inventory/Images/BrowseIcon.jpg" onclick="SelectMachineCode(this)"
id="imgMachine" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:TextBox ID="txtMName" runat="server" Width="120px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Model">
<ItemTemplate>
<asp:TextBox ID="txtMModel" runat="server" Width="80px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Code">
<ItemTemplate>
<asp:TextBox ID="txtMCode" runat="server" Width="70px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:TextBox ID="txtMAmount" runat="server" Width="90px"></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Button ID="AddNewRow" runat="server" CssClass="btnSearch" OnClick="AddNewRow_Click"
Text="Add New Row" />
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="#102040" CssClass="mGrid" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<EditRowStyle BackColor="#2461BF" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
and this is the javascript
这是javascript
<script type="text/javascript">
var popup;
function SelectMachineCode() {
var grvSalesDetails = document.getElementById('<%=grvSalesDetails.ClientID%>');
popup = window.open("machine_lookup.aspx", "Popup", "width=600,height=300");
popup.focus();
}
function OpenMachineLookUp() {
var _PageUrl = "machine_lookup.aspx";
OpenNewWindow(_PageUrl, "Machine Information", "800", "500");
}
function LookUpMachineValues(ID, Name, Model, Code, Usage, Description) {
var grvSalesDetails = document.getElementById('<%=grvSalesDetails.ClientID%>');
var rowId=;//selected rowindex here
var MID = grvSalesDetails.rows[rowId].cells[1].children[0];
MID.value = ID;
var MName = grvSalesDetails.rows[rowId].cells[2].children[0];
MName.value = Name;
var MModel = grvSalesDetails.rows[rowId].cells[3].children[0];
MModel.value = Model;
var MCode = grvSalesDetails.rows[rowId].cells[4].children[0];
MCode.value = Code;
}
I've tried using hiddenfields, parentnode, childnodebut couldn't get the selected rowindex.
我试过使用hiddenfields, parentnode，childnode但无法获得选定的rowindex.
回答by TFrost
I got a way to fetch rowindexof gridviewwhen clicking an image.
我有一个方法来获取rowindex的gridview点击图像时。
<ItemTemplate>
<asp:TextBox ID="txtMID" runat="server" Width="30px"></asp:TextBox>
<img class="style1" alt="" src="../Inventory/Images/BrowseIcon.jpg" onclick="SelectMachineCode(this)"
id="imgMachine" />
</ItemTemplate>
By passing row's property to javascript functionand storing index in hiddenValueFieldI was able to solve the problem.
通过将行的属性传递给javascript function并将索引存储在hiddenValueField我能够解决问题。
<script type="text/javascript">
var popup;
function SelectMachineCode(row) {
var rowData = row.parentNode.parentNode;
var rowIndex = rowData.rowIndex;
document.getElementById("<%=hdValue.ClientID %>").value = rowIndex;
popup = window.open("/Machinery/lookup/machine_lookup.aspx", "Popup", "width=800");
popup.focus();
}
function LookUpMachineValues(ID, Name, Model, Code, Usage, Description) {
var grvSalesDetails = document.getElementById('<%=grvSalesDetails.ClientID%>');
var rowIndexs = document.getElementById("<%=hdValue.ClientID %>").value;
var ri = parseInt(rowIndexs);
var MID = grvSalesDetails.rows[ri].cells[1].children[0];
MID.value = ID;
var MName = grvSalesDetails.rows[ri].cells[2].children[0];
MName.value = Name;
var MModel = grvSalesDetails.rows[ri].cells[3].children[0];
MModel.value = Model;
var MCode = grvSalesDetails.rows[ri].cells[4].children[0];
MCode.value = Code;
}
</script>
回答by Joe Schmoe
TFrost's solution works but results are inconsistent and depend on whether pager and/or header controls are displayed.
TFrost 的解决方案有效，但结果不一致，取决于是否显示寻呼机和/或标题控件。
Let's say you have a header and a pager controls displayed and click on the first data row. JavaScript will return 2 (0 is pager row, 1 is header).
假设您显示了一个标题和一个寻呼机控件，然后单击第一个数据行。JavaScript 将返回 2（0 是分页行，1 是标题）。
But what if your data set is smaller than page size or you just don't have a pager control at all? In that case pager control will not be displayed and JavaScript will return 1 when you click first data row.
但是如果您的数据集小于页面大小或者您根本没有寻呼机控件怎么办？在这种情况下，当您单击第一个数据行时，将不会显示分页控件并且 JavaScript 将返回 1。
If both pager and header are off JavaScript will return 0 when you click first data row.
如果分页器和标题都关闭，当您单击第一个数据行时，JavaScript 将返回 0。
Approach I ended up using is to have a primary key (ie unique integer number) in grid view as a separate column. Then you save this number in hidden variable in JavaScript. Then in codebehind you iterate via GridView rows and compare values for this column with the number stored in hidden variable. When match is found this is your selected row.
我最终使用的方法是在网格视图中将主键（即唯一整数）作为单独的列。然后将这个数字保存在 JavaScript 的隐藏变量中。然后在代码隐藏中遍历 GridView 行并将此列的值与存储在隐藏变量中的数字进行比较。找到匹配项后，这是您选择的行。
