|
<< Click to Display Table of Contents >> JQuery - Reordenar ListView |
  
|
|
<< Click to Display Table of Contents >> JQuery - Reordenar ListView |
|
Tela
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-type: none;
margin: 0 auto;
width: 120px;
padding: 5px;
border: 2px solid #669999;
}
#sortable li
{
border: 1px solid silver;
padding: 2px;
font-size: 14px;
margin: 10px;
width: 94px;
cursor: pointer;
font-family: verdana, tahoma, arial;
background-color: #fdffd8;
}
#sortable .destino-vazio
{
background-color: #C1FFC1;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p style="text-align: center">
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
