Показать индекс строки в Gridview

Question

Я просматривал Stack Overflow и не могу найти ничего, связанного с моей проблемой.

У меня есть сетка, отображающая результаты, и у меня есть несколько кнопок в каждой строке, чтобы переместить эту строку вверх или вниз.

После того, как я нажму кнопку, я бы хотел, чтобы он изменил индекс строки, так что строка 1 переходит в строку 2, затем я хочу новую строку 2 отображать 2 вместо 1.

Таким образом, индекс строки не обновляется и сохраняет свой исходный индекс строки.

Я бы хотел, чтобы индекс строки обновляется после нажатия кнопки html. Я покажу текущий код для перемещения вверх и вниз по строкам.

Предпочтительно, я хотел бы интегрировать его в код javascript, который я уже сделал, но если другой код работает, я буду его использовать.

Это мой первый пост, поэтому, пожалуйста, go, просто ответьте на любые вопросы ниже, и я отвечу как можно быстрее.

Спасибо.

Answer 1

Будет перетаскивать работу ниже, это код для того же

этого процесса переупорядочения строк GridView, т. Е. Перетаскивания порядка строк GridView с использованием jQuery в ASP. Net. Порядок перетаскивания строк 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();
            }
        }
    }
}

Полная статья здесь

Answer 2

Разве это не похоже на эту работу?

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

Я просто написал это и не отлаживал и не проверял, чтобы вы могли найти ошибку, но это должно указать вам верное направление