JQuery - Reordenar ListView

<< Click to Display Table of Contents >>

Navigation:  jQuery >

JQuery - Reordenar ListView

Previous pageReturn to chapter overviewNext page

Tela

 

reorder4

 

 

aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CSASPNETDragItemInListView.Default" %>

 

<!DOCTYPE html>

 

<html lang="pt-br">

<head runat="server">

    <title></title>

    <link href="js/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

    <script src="js/jquery-ui.js" type="text/javascript"></script>

 

    <style type="text/css">

        #sortable

        {

            list-style-typenone;

            margin0 auto;

            width120px;

            padding5px;

            border2px solid #669999;

        }

 

            #sortable li

            {

                border1px solid silver;

                padding2px;

                font-size14px;

                margin10px;

                width94px;

                cursorpointer;

                font-familyverdanatahomaarial;

                background-color#fdffd8;

            }

 

        #sortable .destino-vazio

        {

            background-color#C1FFC1;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

        <p style="text-aligncenter">

            Arraste os itens abaixo para trocá-los de lugar

        </p>

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

        <asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">

            <LayoutTemplate>

                <ul id="sortable">

                    <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>

                </ul>

            </LayoutTemplate>

            <ItemTemplate>

                <li>

                    <asp:Label ID="lbId" runat="server"></asp:Label>

                    <asp:Label ID="lbNome" runat="server"></asp:Label>

                </li>

            </ItemTemplate>

        </asp:ListView>

    </form>

 

    <script>

        self.sendUpdatedIndex = function ($item) {

            var startIndex = $item.data("startindex") + 1;

            var newIndex = $item.index() + 1;

 

            // mudou a posição de algum item?

            if (newIndex != startIndex) {

                var matriz = '';

 

                // vamos percorrer todos os li dentro de sortable

                $('#sortable li').each(function (i, li) {

 

                    // para cada li, procuramos o label (span) dentro dele que contenha atributo "codigo"

                    $(li).find('span').each(function (j, span) {

                        if ($(span).attr("codigo") != undefined) {

                            matriz += $(span).attr("codigo") + "=";

                        }

                    })

                    // no objeto li temos a nova posição (como começa com zero, eu acrescentei 1)

                    matriz += ($(li).index() + 1) + ',';

                });

 

                // envia novo "mapa" de posições para a funcao

                PageMethods.GravarPosicao(matriz, onSucess, onError);

 

                function onSucess(result) {

                    console.log(result);

                }

 

                function onError(result) {

                    alert('Algo deu errado.');

                }

            }

        }

 

        $(function () {

            $("#sortable").sortable({

                cursor: 'move',

                placeholder: "destino-vazio",

                opacity: 0.4,

                start: function (event, ui) {

                    // "grava" informação da posição atual

                    $(ui.item).data("startindex", ui.item.index());

 

                    // seta o tamanho do lugar destino igual do lugar de origem

                    var h = $(ui.item).height();

                    ui.placeholder.height(h);

                },

                stop: function (event, ui) {

                    // chama outra funcao

                    self.sendUpdatedIndex(ui.item);

                }

            });

            $("#sortable").disableSelection();

        });

    </script>

</body>

</html>

 

cs

 

using System;

using System.Data;

using System.Web.Services;

using System.Web.UI.WebControls;

 

namespace CSASPNETDragItemInListView

{

    public partial class Default : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                ListView1.DataSource = Dados.GetDados();

                ListView1.DataBind();

            }

        }

 

        [WebMethod]

        public static string GravarPosicao(string matriz)

        {

            // matriz = 2=1,3=2,4=3,5=4,6=5,7=6,8=7,9=8,10=9,11=10,12=11,13=12,1=13,

            // onde a sintaxe é   codigo=posicao

            string[] items = matriz.Split(',');

            

            // basta percorrer a tal lista e fazer update na base, exemplo:

            string sql = string.Empty;

            foreach (string item in items)

            {

                if (!string.IsNullOrEmpty(item))

                sql += string.Format("update tabela set posicao={1} where codigo={0};\n\r", item.Split('=')[1], item.Split('=')[0]);

            }

 

            return sql;

        }

 

        protected void ListView1_ItemDataBound(object sender, System.Web.UI.WebControls.ListViewItemEventArgs e)

        {

            if (e.Item.ItemType == ListViewItemType.DataItem)

            {

                // pega o dataItem corrente

                ListViewDataItem currentItem = (ListViewDataItem)e.Item;

 

                Label lbNome = (Label)e.Item.FindControl("lbNome");

                Label lbId = (Label)e.Item.FindControl("lbId");

 

                DataRowView drv = (DataRowView)currentItem.DataItem;

 

                lbNome.Text = drv["nome"].ToString();

                lbId.Text = drv["codigo"].ToString() + "-";

                lbNome.Text = drv["nome"].ToString();

 

                // grava atributos

                lbNome.Attributes["codigo"] = drv["codigo"].ToString();

            }

        }

    }

}

 

Dados.cs  -   apenas como fonte de dados teste

 

using System;

using System.Data;

 

public class Dados

{

    public Dados()

    {

    }

 

    private static void Novo(DataTable tab, int codigo, string nome, int ordem)

    {

        // função auxiliar para ajudar a inserir dados

        DataRow dr = tab.NewRow();

        dr["Codigo"] = codigo;

        dr["Nome"] = nome;

        dr["Ordem"] = ordem;

        tab.Rows.Add(dr);

    }

 

    public static DataTable GetDados()

    {

        DataTable tabela = new DataTable();

 

        // cria as colunas e tipos

        tabela.Columns.Add(new DataColumn("Codigo"Type.GetType("System.Int32")));

        tabela.Columns.Add(new DataColumn("Nome"Type.GetType("System.String")));

        tabela.Columns.Add(new DataColumn("Ordem"Type.GetType("System.Int32")));

 

        // insere dados

        Novo(tabela, 1, "Lara", 9);

        Novo(tabela, 2, "Angelina", 8);

        Novo(tabela, 3, "Zelda", 7);

        Novo(tabela, 4, "Peach", 6);

        Novo(tabela, 5, "Jessica", 5);

        Novo(tabela, 6, "Julia", 4);

        Novo(tabela, 7, "Scarlet", 3);

        Novo(tabela, 8, "Ana", 2);

        Novo(tabela, 9, "Iris", 1);

 

        // ordena por Grupo / Nome

        DataView v = tabela.DefaultView;

        v.Sort = "ordem asc";

        tabela = v.ToTable();

 

        // retorna

        return tabela;

    }

}

 

Projeto

 

reorder5