是否可以使用网格视图转到下一行和上一行?

时间:2015-03-20 17:05:18

标签: c# jquery asp.net

如果我有两个名为Next和Previous的按钮,有没有办法在行之间导航并获取行数据。通过单击“下一步”按钮,我将获得下一行数据,并在“上一步”按钮上突出显示行和上一行数据。

我正在使用ASP.NET 2.0 GridView

4 个答案:

答案 0 :(得分:4)

int CurrentIndex = GridView1.SelectedIndex;
if (CurrentIndex != GridView1.Rows.Count - 1){
  int NextRowIndex = GridView1.Rows[GridView1.SelectedIndex + 1].RowIndex;
  GridView1.SelectedIndex = NextRowIndex;
  //get info
}

尝试那样

答案 1 :(得分:1)

您如何绑定数据? (object datsource,sql datasource,datasource / databind等)如果你想要用于绑定gridview的实际数据,你需要从数据源获取它。

gv.Rows[row].Cells[col]

将为您提供所选gridview行中显示的内容,但这将包括您的模板显示的内容,而不仅仅是数据。

一种解决方案是将主键作为gridview中选择按钮的命令参数传递,然后当您选择gridview时,它会在数据表中搜索该记录,然后您可以在文本框中显示该数据等。 / p>

将select btn col添加到gridview:

<asp:TemplateField>
    <ItemTemplate>
        <asp:Button runat="server" ID="btnSelect" Text="Select" CommandName="Select" CommandArgument='<%#Eval("Month")%>'/>
    </ItemTemplate>
</asp:TemplateField>

添加到gridview:

OnRowCommand="gvReport_OnRowCommand"

文本框:

<asp:TextBox runat="server" ID="txtPerson" />

代码隐藏: 在此示例中,“Month”在我的数据中是唯一的,SessionDataTbl是我用来绑定gridview的数据表。

protected void gvReport_OnRowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Select")
    {
        //Find row data
        foreach (DataRow row in SessionDataTbl.Rows)
        {
            if (row["Month"].Equals(e.CommandArgument))
            {
                txtPerson.Text = row["Person"].ToString();
                //other text boxes, etc.
                break;
            }
        }
        //Add row color change
        Button btn = e.CommandSource as Button;
        if (btn != null)
        {
            System.Web.UI.Control field = btn.Parent;
            if (field != null)
            {
                GridViewRow row = field.Parent as GridViewRow;
                if (row != null)
                {
                    const string backColor = "background-color";
                    //Remove any previous backcolor
                    foreach (GridViewRow rw in gvReports.Rows)
                    {
                        rw.Style.Remove(backColor);
                    }
                    row.Style.Add(backColor, "yellow");
                }
            }
        }
    }
}

此示例使用手动数据绑定,但这也可以使用objectdatasource等来完成,但您必须在对象数据源Selected事件中捕获数据表(如果需要可以提供示例)

注意:必须为此示例启用gridview viewstate

答案 2 :(得分:1)

你可以使用javascript来实现它,这非常快,因为每次更改行时页面都不会回发。

假设页面的简单版本:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true">
</asp:GridView>
<asp:Button ID="btnPrevious" runat="server" Text="Prev" OnClientClick="changeSelectedRow(-1)" />
<asp:Button ID="btnNext" runat="server" Text="Next" OnClientClick="changeSelectedRow(1)" />
<br />
<br />
Sample form with 2 boxes:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

然后这个简单的JavaScript将完成工作:

<script type="text/javascript">

    var selectedRow;

    $(document).ready(function () {
        var rows = $('#' + '<%= GridView1.ClientID %>').find('tr');
        // select first row by default
        rows.get(1).style.backgroundColor = '#0000AA';
        selectedRow = 1;
        document.getElementById('<%= TextBox1.ClientID %>').value = rows.get(selectedRow).childNodes[0].innerText;
        document.getElementById('<%= TextBox2.ClientID %>').value = rows.get(selectedRow).childNodes[1].innerText;
    });

    function changeSelectedRow(step) {
        var rows = $('#' + '<%= GridView1.ClientID %>').find('tr');

        var newSelectedRow = selectedRow + step;

        if (newSelectedRow > 0 && newSelectedRow < rows.length) {
            rows.get(selectedRow).style.backgroundColor = '#ffffff';
            rows.get(newSelectedRow).style.backgroundColor = '#0000aa';
            selectedRow = newSelectedRow;

            document.getElementById('<%= TextBox1.ClientID %>').value = rows.get(newSelectedRow).childNodes[0].innerText;
            document.getElementById('<%= TextBox2.ClientID %>').value = rows.get(newSelectedRow).childNodes[1].innerText;
        }

        // stop postback
        event.returnValue = false;
        return false;
    }
</script>

上面要求jquery工作。您可以将'className'设置为highlighet / normal行类,而不是背景颜色。

答案 3 :(得分:1)

我会尝试这样的事情,

//variables used
int currentrow = 0;
int maxrow = dataGridView1.Rows.Count-1;

//on gridview fill
for(int i=0;i<dataGridView1.Rows.Count;i++)
{
dataGridView1.Rows[i].Visible = false; 
}
currentrow=0;
ataGridView1.Rows[0].Visible = true; 


//button next
if (currentrow < maxrow) 
{
dataGridView1.Rows[currentrow].Visible = false;
currentrow++;
dataGridView1.Rows[currentrow].Visible = true; 
retrieveData();
}

//button previous
if (currentrow > 0)
{
dataGridView1.Rows[currentrow].Visible = false;
currentrow--;
dataGridView1.Rows[currentrow].Visible = true;
retrieveData();
}

//retrieveData(); would be calling the void 
//that fills the textboxes with the dataGridView data;

我认为像这样的东西应该可以循环遍历行,我不能保证它们都不是100%正确输入,因为其中一些是在文本框中的SO上键入的。