Compartilhe o método para implementar o efeito da tabela ExtJS usando o flexigrid

Autor：Eve Cole Data da Última Atualização：2025-04-29 05:48:02

Nos últimos tempos, o EXTJS tem sido realmente muito popular. Desde que seja uma empresa relacionada ao CRM/HRM, agora está pensando em como usá-lo em projetos, mas eu não ouso. O motivo é muito simples: é muito grande/muito estúpido/o código -fonte é difícil de depurar. Mas as belas mesas e funções dos extjs realmente me fazem salvar. Lembro que um camarada estrangeiro escreveu um plug-in jQuery semelhante para extjs, então procurei no oceano do plug-in jQuery. Haha, eu realmente encontrei. Parece que meu jQuery é melhor. É pequeno e simples, como um bom motor de carro. Eu posso DIY o que eu quiser. É realmente conveniente. A solução geral não excede 80 KB na transmissão de rede e a velocidade é menor que a dos extjs com um tamanho de 500kb. . .

Endereço para download: http://code.google.com/p/flexigrid/

No entanto, como a maioria das informações sobre o Flexigrid na Internet está escrita em PHP ou Java, eu simplesmente as modifiquei e fiz uma versão imitadora da implementação da tabela ExtJS, esperando que seja útil para todos.

Uso básico:

1 Basicamente, o uso é muito simples. Você só precisa adicionar o JQuery Library e o Flexigrid JS para formatar e embelezar a tabela.

A cópia do código é a seguinte:

<%-<script type = "text/javascript" src = "lib/jQuery/jQuery-1.2.6-vsdoc-cn.js"> </script>-%>

$ ("documento"). Ready (function () {

$ ('#flexme1'). flexigrid ();

$ ('#flexme2'). flexigrid ();

});

</script>

2 Basta adicionar o formulário que precisa ser formatado

A cópia do código é a seguinte:

<H1>

O Flexigrid mais fácil Tabela 1 </h1>

<head>

<tr>

<th>

Col 1

</th>

<th>

Col 2

</th>

<th>

Col 3 é um nome de cabeçalho longo

</th>

<th>

Col 4

</th>

</tr>

</head>

<Tbody>

<tr>

<Td>

Estes são dados 1 com conteúdo transbordante

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

</tbody>

</tabela>

<p>

</p>

<H1>

O Flexigrid mais fácil Tabela 2 </h1>

<head>

<tr>

<th>

Col 1

</th>

<th>

Col 2

</th>

<th>

Col 3 é um nome de cabeçalho longo

</th>

<th>

Col 4

</th>

</tr>

</head>

<Tbody>

<tr>

<Td>

Estes são dados 1 com conteúdo transbordante

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

<tr>

<Td>

Este é o Data 1

</td>

<Td>

Este é o Data 2

</td>

<Td>

Este é o Data 3

</td>

<Td>

Estas são dados 4

</td>

</tr>

</tbody>

</tabela>

Para aumentar o efeito de uso básico do Flexigrid, podemos fazer ajustes básicos através de parâmetros

Cabeçalho personalizado

Implementação específica de código:

A cópia do código é a seguinte:

$ ("documento"). Ready (function () {

$ ('#flexme1'). Flexigrid ({

Colmodel: [

{display: 'iso', nome: 'iso', largura: 40, classificável: true, alinhar: 'centro'},

{Display: 'Name', Nome: 'Name', Largura: 180, classificável: true, alinhe: 'esquerda'},

{display: 'Nome imprimível', nome: 'Printable_name', largura: 120, classificável: true, alinhe: 'esquerda'},

{display: 'iso3', nome: 'iso3', largura: 130, classificável: true, alinhe: 'esquerda', hide: true},

{Display: 'Number Code', Nome: 'NumCode', Largura: 80, classificável: true, alinhe: 'Right'}

]

});

$ ('#flexme2'). Flexigrid ({

Colmodel: [

{display: 'iso', nome: 'iso', largura: 40, classificável: true, alinhar: 'centro'},

{Display: 'Name', Nome: 'Name', Largura: 180, classificável: true, alinhe: 'esquerda'},

{display: 'Nome imprimível', nome: 'Printable_name', largura: 120, classificável: true, alinhe: 'esquerda'},

{display: 'iso3', nome: 'iso3', largura: 130, classificável: true, alinhe: 'esquerda', hide: true},

{Display: 'Number Code', Nome: 'NumCode', Largura: 80, classificável: true, alinhe: 'Right'}

SortName: "ISO",

Sortorder: "ASC",

});

</script>

Implementação de classificação de dobragem personalizada e personalizada

A cópia do código é a seguinte:

$ ("documento"). Ready (function () {

$ ('#flexme1'). Flexigrid ({

Colmodel: [

{display: 'iso', nome: 'iso', largura: 40, classificável: true, alinhar: 'centro'},

{Display: 'Name', Nome: 'Name', Largura: 180, classificável: true, alinhe: 'esquerda'},

{display: 'Nome imprimível', nome: 'Printable_name', largura: 120, classificável: true, alinhe: 'esquerda'},

{display: 'iso3', nome: 'iso3', largura: 130, classificável: true, alinhe: 'esquerda', hide: true},

{Display: 'Number Code', Nome: 'NumCode', Largura: 80, classificável: true, alinhe: 'Right'}

], Largura: 700, Altura: 300, UsePager: True, ShowTableToggleBtn: True, Título: "Clique em mim para entrar em colapso"

});

$ ('#flexme2'). Flexigrid ({

Colmodel: [

{display: 'iso', nome: 'iso', largura: 40, classificável: true, alinhar: 'centro'},

{Display: 'Name', Nome: 'Name', Largura: 180, classificável: true, alinhe: 'esquerda'},

{display: 'Nome imprimível', nome: 'Printable_name', largura: 120, classificável: true, alinhe: 'esquerda'},

{display: 'iso3', nome: 'iso3', largura: 130, classificável: true, alinhe: 'esquerda', hide: true},

{Display: 'Number Code', Nome: 'NumCode', Largura: 80, classificável: true, alinhe: 'Right'}

SearchItems: [

{display: 'iso', nome: 'iso'},

{Display: 'Name', Name: 'Name', ISDefault: True}

SortName: "ISO",

Sortorder: "ASC",

Título: "meus resultados de teste",

Largura: 700,

Altura: 300,

UsePager: true, ShowTableToggleBtn: true, rp: 10

});

</script>

Uso avançado:

1. O procedimento armazenado usado para paginação

A cópia do código é a seguinte:

Criar procedimento [DBO]. [SPALL_RETURNROWS]

(

@Sql nvarchar (4000),

@Page int,

@Recsperpage int,

@Id Varchar (255),

@Sort Varchar (255)

)

COMO

Declarar @str nvarchar (4000)

Set @str = 'selecione Top'+

Fundido (@recsperpage como varchar (20))+

' * De ('+@sql+') t onde t.'+

@Id+

'Não está em (selecione Top'+

Fund (@@recsperpage*(@página-1)) como varchar (20))+

''+

@Id+

' DE ('

+@Sql+

') T9 Ordem por'+

@Sort+

') Ordem por'+

@Organizar

Imprima @str

EXEC sp_executesql @str

2 Implementação assíncrona de transmissão de dados JSON

A cópia do código é a seguinte:

usando o sistema;

usando system.collections.generic;

usando System.Configuration;

usando System.data;

usando System.Data.SQLClient;

usando System.Linq;

usando System.Text;

usando System.Web;

usando System.Web.Services;

usando newtonsoft.json;

namespace griddemo

{

/// <summary>

/// Descrição do resumo de $ codeBeHindClassName $

/// </summary>

[WebService (namespace = "http://tempuri.org/")]

[WebServiceBinding (conformsto = wsiprofiles.basicprofile1_1)]

classe pública getDataSource4: ihttphandler

{

Public void ProcessRequest (contexto httpContext)

{

context.Response.ContentType = "Text/Plain";

// Obtenha a página atual

string currentPage = context.request ["página"];

// Obtenha quanto é exibido por página

string pagesHesHImit = context.request ["rp"];

// Obtenha a chave primária

String tableId = context.request ["SortName"];

// Obtenha o método de classificação

string orderMethod = context.request ["sortorder"];

// Faça com que os campos sejam filtrados

String filterfield = context.request ["Qtype"];

// Obtenha o conteúdo a ser filtrado

String filterfieldContext;

if (context.request.form ["letter_pressed"] == null)

{

FiltrofieldContext = "";

}

outro

{

FilterfieldContext = context.request ["letter_pressed"];

}

// Obtenha o número total de linhas da tabela

String tablerowCount = sqlhelper.executescalar (ConfigurationManager.AppSettings ["SQL2"],

CommandType.text,

"Selecione a contagem (*) de Person.address"

) .ToString ();

// Obtenha o SQL principal

SqlParameter sql = new sqlparameter ("@sql", sqldbtype.nvarchar);

//Sql.value = "Selecione * de Person.address";

if (filterfieldContext.length == 0 || filterfield.length == 0)

{

Sql.value = "Selecione AddressID, endereço1, linha de endereço2, código postalcode, cidade de pessoa.address";

}

outro

{

string [] tmp = filterfield.split (',');

Sql.value = "Selecione AddressID, endereço1, linear de endereço2, código postalcode, cidade de pessoa.address onde" + tmp [0] + "como '" " + filterfieldContext +"%' ";

}

Página sqlparameter = new sqlparameter ("@página", sqldbtype.int);

Página.value = convert.toint32 (CurrentPage);

SqlParameter recsperpage = new sqlParameter ("@recsperpage", sqldbtype.int);

Recsperpage.value = convert.toint32 (PagesHowlImit);

Sqlparameter id = new sqlparameter ("@id", sqldbtype.varchar);

Id.value = tabelaId;

SqlParameter Sort = new SqlParameter ("@sort", sqldbtype.varchar);

Sort.value = tabelaId;

// pegue a tabela

Datatable returnTable = sqlhelper.executedataset (ConfigurationManager.AppSettings ["SQL2"],

CommandType.StoredProcedure, "Spall_RETURNNROWS",

Novo SqlParameter []

{

Sql, página, recsperpage, id, classificação

}). Tabelas [0];

Context.Response.Write (Dttoson2 (retorntable, CurrentPage, TablerowCount));

}

/// <summary>

/// conversão de formato json

/// </summary>

/// <param name = "dt"> tabela datAtable </amp>

/// <param name = "Page"> página atual </amul>

/// <param name = "total"> quantas linhas no total </amp>

/// <Trackns> </lorpns>

public static string dttoson2 (datatable dt, página de string, string total)

{

StringBuilder JSonstring = new StringBuilder ();

jSonstring.appendLine ("{");

jSonstring.appendFormat ("página: {0},/n", página);

jSonstring.appendFormat ("Total: {0},/n", total);

jSonstring.appendLine ("linhas: [");

for (int i = 0; i <dt.rows.count; i ++)

{

jSonstring.append ("{");

jSonstring.appendFormat ("id: '{0}', célula: [", dt.rows [i] [0] .toString ());

for (int j = 0; j <dt.columns.count; j ++)

{

if (j == dt.columns.count - 1)

{

jSonstring.appendFormat ("'{0}'", dt.Rows [i] [j] .toString ());

}

outro

{

jSonstring.appendFormat ("'{0}',", dt.rows [i] [j] .toString ());

}

if (j == dt.columns.count - 1)

{

jSonstring.AppendFormat (", '{0}'", "<entrada de entrada =/" botão/"value =/" View/"id =/" ss/"onclick =/" ss (" + dt.Rows [i] [0] .tostring () +")/"/>");

}

jSonstring.append ("]");

if (i == dt.rows.count - 1)

{

jSonstring.appendLine ("}");

}

outro

{

jSonstring.appendLine ("}");

}

jSonstring.append ("]");

jSonstring.appendLine ("}");

return jSonstring.toString ();

}

public bool isreusable

{

pegar

{

retornar falso;

}

Implementação de 3 páginas

A cópia do código é a seguinte:

< %@ Página de página = "c#" autoeventwireup = "true" codeBehind = "complex-8.aspx.cs" herits = "griddemo.complex_8" %>

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">

$ ("documento"). Ready (function () {

$ ("#flex1"). Flexigrid

({

URL: 'getDataSource4.ashx',

Datatype: 'JSON',

Colmodel: [

{Display: 'ADDEREDID', NOME: 'Endereço', Largura: 40, classificável: true, alinhe: 'Center'},

{Display: 'Endereço específico 1', Nome: 'endereço1', largura: 140, classificável: true, alinhe: 'esquerda'},

{Display: 'Endereço específico 2', Nome: 'EndereçoLine2', Largura: 80, classificável: true, alinhe: 'esquerda'},

{Display: 'Zip Code', Nome: 'PostalCode', Largura: 80, classificável: true, alinhe: 'esquerda'},

{Display: 'City', Nome: 'City', Largura: 80, classificável: verdadeiro, alinhe: 'esquerda'},

{Display: 'Opt', Nome: 'Opt', Largura: 80, STRESELBLE: TRUE, ALIFL: 'LEFT'}

Botões: [

{nome: 'a', onpress: Sortalpha},

{Nome: 'B', OnPress: Sortalpha},

{Nome: 'C', Onpress: Sortalpha},

{nome: 'd', onpress: Sortalpha},

{nome: 'e', onpress: Sortalpha},

{Nome: 'f', onpress: Sortalpha},

{Nome: 'g', onpress: Sortalpha},

{Nome: 'H', Onpress: Sortalpha},

{Nome: 'i', onpress: Sortalpha},

{Nome: 'J', Onpress: Sortalpha},

{Nome: 'K', Onpress: Sortalpha},

{Nome: 'L', Onpress: Sortalpha},

{nome: 'm', onpress: Sortalpha},

{Nome: 'n', onpress: Sortalpha},

{Nome: 'O', Onpress: Sortalpha},

{Nome: 'P', Onpress: Sortalpha},

{Nome: 'q', onpress: Sortalpha},

{nome: 'r', onpress: Sortalpha},

{name: 'S', OnPress: Sortalpha},

{nome: 't', onpress: Sortalpha},

{nome: 'u', onpress: Sortalpha},

{Nome: 'V', Onpress: Sortalpha},

{Nome: 'W', Onpress: Sortalpha},

{nome: 'x', onpress: Sortalpha},

{Nome: 'y', onpress: Sortalpha},

{Nome: 'Z', Onpress: Sortalpha},

{Nome: '%', Onpress: Sortalpha}

SearchItems: [

{display: 'city', nome: 'cidade', isdefault: true},

{Display: 'Zip Code', Nome: 'PostalCode'}

usePager: true,

Título: 'Informações do cliente',

Userp: true,

RP: 10,

ShowTableToggleBtn: true,

Largura: 700,

Altura: 200,

RPOPTIONS: [10, 15, 20, 25, 40, 60], // O número de resultados pode ser selecionado por página

Procmsg: 'Por favor, aguarde que os dados estejam carregando ...', // Mensagem imediata sendo processada

Redicável: Falso, // é escalável?

SortName: "ADDEREDID",

// Sortorder: "ASC", // Esta coluna não pode ser usada devido a procedimentos armazenados

});

função Sortalpha (com) {

jQuery ('#flex1'). FlexOptions ({newp: 1, params: [{name: 'letter_pressed', valor: com}, {name: 'qtype', valor: $ ('select [name = Qtype]'). val ()}]});

jQuery ("#flex1"). FlexReload ();

}

Função SSS (dados)

{

var temp = avaliar (dados);

// jQuery.faceBox (temp);

jQuery.faceBox ({ajax: 'default.aspx? id ='+temp})

}

</script>

</head>

<Body>

</tabela>

</body>

</html>