javascript - 使用javascript获取gridview的选定rowIndex

Question

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

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

我有一种方法可以在单击图像时获取 gridview 的 rowindex。

<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 函数 并将索引存储在 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>