Столкнувшись с проблемой перетаскивания в ASP.NET GridView с помощью jQuery - PullRequest
Новая
       20

Столкнувшись с проблемой перетаскивания в ASP.NET GridView с помощью jQuery

1 голос
/ 12 мая 2011

Я надеюсь, что кто-то поможет мне в решении этой проблемы.У меня есть вид сетки ASP.NET, где у DataKeyName есть первичный ключ для вида сетки.

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

$(document).ready(function () {
            $("#GridView1").tableDnD();
        });

Но я сталкиваюсь с проблемой получения обновленного порядка очередей для обновления этого порядка в базе данных.т.е. когда я использую tableDnD tableDnDSerialize(), он всегда возвращает null onDrop: 

function (table, row) {
   alert($('#GridView1').tableDnDSerialize());
}

возвращает: GridView1[]=&GridView1[]=

Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 18 декабря 2014

Вам необходимо предоставить идентификатор строки значений вашего ключа в GridView. Это легко сделать в событии OnRowDataBound. Свяжите свои файлы JavaScript в своей голове. Jquery.tablednd.js от 30 октября 2014 года 

<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>

Написать страницу JavaScript. Замените gvDevConfig на имя вашего GridView. Используйте свою собственную подпрограмму ajax, чтобы обновить вашу базу данных новым порядком. Замените ctl00_indexPH_gvDevConfig на идентификатор сервера вашего GridView. Если не внутри PlaceHolder, вы можете предупредить ($. TableDnD.serialize ()); чтобы увидеть, что сериализация проходит, и замените все, кроме числовых значений, разделенных точкой с запятой. 

<script type="text/javascript" language="javascript">
    function ActivateGrid() {
        $("#<%=gvDevConfig.ClientID%>").tableDnD({
            onDragClass: "highlight",
            onDrop: function (table, row) {
                $(row).animate({ backgroundColor: "#ffff99" }, 1000).animate({ backgroundColor: "white" }, 3500);
                var values = $.tableDnD.serialize().replace(/&/gi, ";").replace(/%5B%5D/gi, "").replace(/ctl00_indexPH_gvDevConfig=/gi, "");
                $.ajax({ type: "GET", url: "xml/ajax_spacers.aspx", async: true, data: "DevOrder=" + values, success: function (t) {
                    $(".jqOrderResults").html("Order Saved");
                } 
                });
            }
        });
    }
</script>

Добавьте класс в верхние и нижние колонтитулы, чтобы предотвратить перетаскивание на свою позицию. Создайте событие OnRowDataBound, чтобы активировать эту функцию, и назначьте ключ для каждой строки. Обратите внимание, что этот GridView содержится в UpdatePanel и имеет на странице asp: ScriptManager. Используйте свой собственный SqlDataSource или процесс для заполнения GridView. 

<asp:GridView ID="gvDevConfig" runat="server" DataSourceID="dsDevConfig" DataKeyNames="DevConfigurationID"
    Width="795" CssClass="gvDevCfg" BorderStyle="None" GridLines="None" AutoGenerateColumns="false"
    UseAccessibleHeader="false" OnRowDataBound="gvDevConfig_RDB" ShowFooter="true"
    OnRowCommand="AddNewRecord">
    <HeaderStyle CssClass="dgHead nodrop nodrag" />
    <RowStyle VerticalAlign="Top" />
    <AlternatingRowStyle VerticalAlign="Top" />
    <FooterStyle CssClass="NewMaterialEntry nodrop nodrag" VerticalAlign="Top" HorizontalAlign="Center" />
    <Columns>
        <asp:Your Columns Here />
    </Columns>
</asp:GridView>

Код позади для OnRowDataBound. Обновите DevConfigurationID для вашего ключевого поля. Когда сетка отображает свои данные и достигает нижнего колонтитула, вызывается JavaScript для инициализации функций DnD 

protected void gvDevConfig_RDB(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (!((e.Row.RowState & DataControlRowState.Edit) > 0))
        {
            e.Row.Attributes.Add("id", DataBinder.Eval(e.Row.DataItem, "DevConfigurationID").ToString());
            e.Row.Attributes["ondblclick"] = ClientScript.GetPostBackClientHyperlink(((LinkButton)(e.Row.FindControl("lbEdit"))), "", false);
        }
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
        ScriptManager.RegisterStartupScript(((GridView)sender), this.GetType(), "ResetGrid", "<script type='text/javascript'>ActivateGrid();</script>", false);
    }
}

Вот моя подпрограмма ajax, которая увеличивает порядок, используя значения ключей в моей таблице для обновления. Вам нужно будет настроить это в соответствии с вашей логикой и, безусловно, больше проверять ошибки и значения в строке запроса. 

private void UpdateDevOrder()
{
    string keyValues = ValueOf.QueryString("DevOrder");

    try
    {
        string[] RowData = keyValues.Split(";".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
        int NewOrder = 1;

        for (int i = 0; i < RowData.Length; i++)
        {
            string DevConfigurationID = RowData[i];
            DB.Update("DevelopmentConfig", "DisplayOrder=" + NewOrder.ToString(), "DevConfigurationID=" + DevConfigurationID);
            NewOrder++;
        }
        Response.Write("Order Saved");
    }
    catch (Exception ex)
    {
        audit.Audit(ex.Message, "Exception Error", Request.Url.AbsolutePath, "Xml Command", "UpdateDevOrder()");
        Response.Write("Failed");
    }
}
...