使用javascript获取gridview的选定rowIndex

时间:2015-02-01 17:08:55

标签: javascript c# asp.net gridview

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

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

我已尝试使用hiddenfieldsparentnodechildnode但无法获取所选的rowindex

2 个答案:

答案 0 :(得分:4)

点击图片时,我有办法获取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>

答案 1 :(得分:0)

TFrost的解决方案有效,但结果不一致,取决于是否显示了寻呼机和/或标题控件。

假设您显示了标题并显示了寻呼机控件,然后单击第一个数据行。 JavaScript将返回2(0是寻呼机行,1是标题)。

但是,如果您的数据集小于页面大小或者您根本没有寻呼机控件,该怎么办?在这种情况下,当您单击第一个数据行时,将不会显示寻呼机控件,并且JavaScript将返回1。

如果pager和header都关闭,当您单击第一个数据行时,JavaScript将返回0。

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