在 Gridview 中顯示行索引

Question

我一直在查看 Stack Overflow，似乎找不到與我的問題相關的任何內容。

我有一個顯示結果的 gridview，我在每一行都有一些按鈕可以向上或向下移動該行。

單擊按鈕后，我希望它更改行索引，所以說第 1 行轉到第 2 行，然后我希望新的第 2 行顯示 2 而不是 1。

所以行索引沒有更新並保持其原始行索引。

我希望在按下 html 按鈕后更新行索引。 我將顯示用於上下移動行的當前代碼。

最好，我想將它集成到我已經完成的 javascript 代碼中，但如果其他代碼有效，我將使用它。

這是我的第一篇文章，所以請 go 對我放松，並在下面提出任何問題，我會盡快回答。

謝謝。

Answer 1

像這樣的東西不會起作用嗎？

$('table').change(function(){
    let allrows = $('tr', this);
    for(let i = 0; i < allrows.length; i++){
        $('td.index', $(allrows[i])).val(i+1);
    }
});

我只是寫了這個，並沒有調試/測試它，所以你可能會發現一個錯誤，但這應該為你指明正確的方向

Answer 2

下面將拖放工作是相同的代碼

GridView 行重新排序的過程，即在 ASP.Net 中使用 jQuery 對 GridView 行進行拖放排序。 GridView 行的拖放排序將使用 jQuery UI Sortable Plugin 執行。

<asp:GridView ID="gvLocations" runat="server" AutoGenerateColumns="false">
<Columns>
    <asp:TemplateField HeaderText="Id" ItemStyle-Width="30">
        <ItemTemplate>
            <%# Eval("Id") %>
            <input type="hidden" name="LocationId" value='<%# Eval("Id") %>' />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-Width="150" />
    <asp:BoundField DataField="Preference" HeaderText="Preference" ItemStyle-Width="100" />
</Columns>

代碼背后

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    string query = "SELECT Id, Location, Preference FROM HolidayLocations ORDER BY Preference";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvLocations.DataSource = dt;
                    gvLocations.DataBind();
                }
            }
        }
    }
}

JS部分

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=gvLocations]").sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'pointer',
        axis: 'y',
        dropOnEmpty: false,
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            ui.item.removeClass("selected");
        },
        receive: function (e, ui) {
            $(this).find("tbody").append(ui.item);
        }
    });
});
</script>


**Code to save same in in DB**


protected void UpdatePreference(object sender, EventArgs e)
{
    int[] locationIds = (from p in Request.Form["LocationId"].Split(',')
                            select int.Parse(p)).ToArray();
    int preference = 1;
    foreach (int locationId in locationIds)
    {
        this.UpdatePreference(locationId, preference);
        preference += 1;
    }

    Response.Redirect(Request.Url.AbsoluteUri);
}

private void UpdatePreference(int locationId, int preference)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("UPDATE HolidayLocations SET Preference = @Preference WHERE Id = @Id"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@Id", locationId);
                cmd.Parameters.AddWithValue("@Preference", preference);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
}

完整的文章在這里