使用 javascript 获取 gridview 的选定 rowIndex

Question

我想从 gridview 中获取选定的 rowindex。在 gridview 中有 5 列 ID、name、model、code 和 amount。它还包含一个图像，单击它会打开一个弹出窗口 window，我可以通过它在 ID、name、model 和 code 中分配值。问题是在单击图像并在弹出 window 中选择行后，我无法在每一行中分配正确的值。为此，我需要获取单击图像的选定索引。

这是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>

这是 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;           
}

我试过使用 hiddenfields、parentnode、childnode，但无法获得所选的 rowindex。

Answer 1

我找到了一种方法，可以在单击图片时获取 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>

通过将行的属性传递给 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>

Answer 2

TFrost 的解决方案有效，但结果不一致，取决于是否显示分页器 and/or header 控件。

假设您有一个 header 和一个显示的分页控件，然后单击第一个数据行。 JavaScript 将 return 2（0 是分页器行，1 是 header）。

但是如果您的数据集小于页面大小或者您根本没有分页器控件怎么办？在这种情况下，将不会显示分页器控件，当您单击第一个数据行时，JavaScript 将 return 1。

如果分页器和 header 都关闭，当您单击第一个数据行时，JavaScript 将 return 0。

我最终使用的方法是在网格视图中将主键（即唯一整数）作为单独的列。然后你将这个数字保存在 JavaScript 中的隐藏变量中。然后在代码隐藏中，您遍历 GridView 行并将此列的值与存储在隐藏变量中的数字进行比较。找到匹配项后，这就是您选择的行。

使用 javascript 获取 gridview 的选定 rowIndex

Get selected rowIndex of gridview using javascript

javascript

c#

asp.net

gridview