En los últimos tiempos, EXTJS ha sido realmente muy popular. Mientras sea una empresa relacionada con CRM/HRM, ahora está pensando en cómo usarlo en proyectos, pero no me atrevo. La razón es muy simple: es demasiado grande/demasiado estúpido/El código fuente es difícil de depurar. Pero las hermosas mesas y funciones de los extjs realmente me hacen salivar. Recuerdo que un compañero extranjero escribió un complemento JQuery similar para ExtJs, así que lo busqué en el Océano de JQuery Plug-in. Jaja, realmente lo encontré. Parece que mi jQuery es mejor. Es pequeño y simple, como un buen motor de automóvil. Puedo hacer bricolaje lo que quiera. Es realmente conveniente. La solución general no excede los 80 kb en la transmisión de la red, y la velocidad es menor que la de ExtJS con un tamaño de 500 kb. . .
Descargar dirección: http://code.google.com/p/flexigrid/
Sin embargo, dado que la mayor parte de la información sobre Flexigrid en Internet está escrita en PHP o Java, simplemente la modifiqué e hice una versión imitadora de la implementación de la tabla EXTJS, con la esperanza de que sea útil para todos.
Uso básico:
1 Básicamente, el uso es muy simple. Solo necesita agregar la biblioteca jQuery y los js de Flexigrid para formatear y embellecer la tabla.
La copia del código es la siguiente:
<link rel = "stylesheet" type = "text/css" href = "css/flexigrid/flexigrid.css">
<script type = "text/javaScript" src = "lib/jQuery/jQuery-1.2.6.min.js"> </script>
<script type = "text/javaScript" src = "flexigrid.pack.js"> </script>
<%-<script type = "text/javaScript" src = "lib/jQuery/jQuery-1.2.6-vsdoc-cn.js"> </script>-%>
<script type = "text/javaScript">
$ ("documento"). Ready (function () {
$ ('#FlexMe1'). Flexigrid ();
$ ('#FlexMe2'). Flexigrid ();
});
</script>
2 Simplemente agregue el formulario que debe formatearse
La copia del código es la siguiente:
<h1>
La tabla flexigrida más fácil-1 </h1>
<Tabla id = "FlexMe1">
<Evista>
<tr>
<th>
Col 1
</th>
<th>
Col 2
</th>
<th>
Col 3 es un nombre de encabezado largo
</th>
<th>
Col 4
</th>
</tr>
</ablo>
<Tbody>
<tr>
<TD>
Estos son los datos 1 con contenido desbordante
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
</tbody>
</table>
<p>
</p>
<h1>
La tabla Flexigrid más fácil de Flexigrid </h1>
<Tabla id = "FlexMe2">
<Evista>
<tr>
<th>
Col 1
</th>
<th>
Col 2
</th>
<th>
Col 3 es un nombre de encabezado largo
</th>
<th>
Col 4
</th>
</tr>
</ablo>
<Tbody>
<tr>
<TD>
Estos son los datos 1 con contenido desbordante
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
<tr>
<TD>
Estos son los datos 1
</td>
<TD>
Estos son datos 2
</td>
<TD>
Estos son datos 3
</td>
<TD>
Estos son datos 4
</td>
</tr>
</tbody>
</table>
Para aumentar el efecto de uso básico de Flexigrid, podemos hacer ajustes básicos a través de los parámetros
Encabezado personalizado
Implementación del código específico:
La copia del código es la siguiente:
<script type = "text/javaScript">
$ ("documento"). Ready (function () {
$ ('#FlexMe1'). Flexigrid ({
Colmodel: [
{Display: 'ISO', Nombre: 'ISO', Ancho: 40, Strayable: True, Align: 'Center'},
{Display: 'Nombre', Nombre: 'Nombre', Ancho: 180, Strayable: True, Align: 'Left'},
{Display: 'Nombre imprimible', nombre: 'imprimable_name', width: 120, sortable: true, align: 'izquierda'},
{Display: 'ISO3', Nombre: 'ISO3', Ancho: 130, Ordenable: True, Align: 'Left', Hide: True},
{visualización: 'código de número', nombre: 'numcode', width: 80, sortable: true, align: 'right'}
]
});
$ ('#FlexMe2'). Flexigrid ({
Colmodel: [
{Display: 'ISO', Nombre: 'ISO', Ancho: 40, Strayable: True, Align: 'Center'},
{Display: 'Nombre', Nombre: 'Nombre', Ancho: 180, Strayable: True, Align: 'Left'},
{Display: 'Nombre imprimible', nombre: 'imprimable_name', width: 120, sortable: true, align: 'izquierda'},
{Display: 'ISO3', Nombre: 'ISO3', Ancho: 130, Ordenable: True, Align: 'Left', Hide: True},
{visualización: 'código de número', nombre: 'numcode', width: 80, sortable: true, align: 'right'}
]
sortName: "ISO",
sortOrder: "ASC",
});
});
</script>
Implementación de clasificación personalizada de plegado personalizado
La copia del código es la siguiente:
<script type = "text/javaScript">
$ ("documento"). Ready (function () {
$ ('#FlexMe1'). Flexigrid ({
Colmodel: [
{Display: 'ISO', Nombre: 'ISO', Ancho: 40, Strayable: True, Align: 'Center'},
{Display: 'Nombre', Nombre: 'Nombre', Ancho: 180, Strayable: True, Align: 'Left'},
{Display: 'Nombre imprimible', nombre: 'imprimable_name', width: 120, sortable: true, align: 'izquierda'},
{Display: 'ISO3', Nombre: 'ISO3', Ancho: 130, Ordenable: True, Align: 'Left', Hide: True},
{visualización: 'código de número', nombre: 'numcode', width: 80, sortable: true, align: 'right'}
], ancho: 700, altura: 300, usePager: true, showtableToggleBtn: Verdadero, Título: "Haga clic para colapsar"
});
$ ('#FlexMe2'). Flexigrid ({
Colmodel: [
{Display: 'ISO', Nombre: 'ISO', Ancho: 40, Strayable: True, Align: 'Center'},
{Display: 'Nombre', Nombre: 'Nombre', Ancho: 180, Strayable: True, Align: 'Left'},
{Display: 'Nombre imprimible', nombre: 'imprimable_name', width: 120, sortable: true, align: 'izquierda'},
{Display: 'ISO3', Nombre: 'ISO3', Ancho: 130, Ordenable: True, Align: 'Left', Hide: True},
{visualización: 'código de número', nombre: 'numcode', width: 80, sortable: true, align: 'right'}
]
SearchItems: [
{Display: 'ISO', Name: 'ISO'},
{Display: 'Name', Name: 'Name', IsDefault: True}
]
sortName: "ISO",
sortOrder: "ASC",
Título: "Resultados de mi prueba",
Ancho: 700,
Altura: 300,
UsePager: true, showtableToggleBtn: True, RP: 10
});
});
</script>
Uso avanzado:
1. El procedimiento almacenado utilizado para la paginación
La copia del código es la siguiente:
Crear procedimiento [DBO]. [Spall_returnrows]
(
@SQL nvarchar (4000),
@Page int,
@Recsperpage int,
@Id Varchar (255),
@Sort Varchar (255)
)
COMO
Declarar @str nvarchar (4000)
Set @str = 'select top'+
Cast (@RecsperPage como Varchar (20))+
' * De ('+@sql+') t donde t.'+
@ID+
'No en (seleccione Top'+
Cast ((@recsperpage*(@page-1)) como varchar (20))+
''+
@ID+
' DE ('
+@Sql+
') T9 orden por'+
@Sort+
') Orden de'+
@Clasificar
Imprimir @str
Ejec sp_executesql @str
2 Implementación asíncrona de la transmisión de datos JSON
La copia del código es la siguiente:
usando el sistema;
usando System.Collections.Generic;
utilizando System.Configuración;
usando System.Data;
usando System.Data.SqlClient;
usando System.Linq;
usando System.Text;
usando System.web;
usando System.Web.Services;
usando newtonsoft.json;
espacio de nombres griddemo
{
/// <summary>
/// Descripción resumida de $ CodeBeHindClassName $
/// </summary>
[WebService (Namespace = "http://tempuri.org/")]]
[WebServiceBinding (conformsto = wsiprofiles.basicprofile1_1)]
clase pública getDataSource4: ihttphandler
{
Public void ProcessRequest (contexto httpContext)
{
context.Response.ContentType = "Text/Plain";
// Obtener la página actual
String CurrentPage = context.Request ["Page"];
// Obtener cuánto se muestra por página
cadena pageshowlimit = context.request ["rp"];
// Obtener la clave principal
String tableID = context.Request ["sortName"];
// Obtener el método de clasificación
string ordenmethod = context.request ["sortorder"];
// consigue que se filtren los campos
string filtrefield = context.request ["Qtype"];
// Obtener el contenido para filtrar
String FilterFieldContext;
if (context.request.form ["Letter_pressed"] == NULL)
{
FilterFieldContext = "";
}
demás
{
FilterFieldContext = context.Request ["Letter_pressed"];
}
// Obtener el número total de filas de la tabla
String TABLEROWCOUNT = SQLHELPER.EXECUSECALAR (ConfigurationManager.appsettings ["SQL2"],
Comandype.text,
"Seleccione Count (*) de la persona.
) .ToString ();
// Obtén el SQL principal
SqlParameter sql = new SqlParameter ("@sql", sqldbtype.nvarchar);
//Sql.value = "Seleccionar * de Person.Address";
if (filterFieldContext.length == 0 || Filterfield.length == 0)
{
Sql.value = "Seleccione DirectionId, Directline1, Directline2, PostalCode, City de Person.Address";
}
demás
{
string [] tmp = filtrefield.split (',');
Sql.value = "Seleccione DirectionId, Directline1, Directline2, PostalCode, City de Person.Address Where" + TMP [0] + "Like '" + FilterFieldContext + "%'";
}
Sqlparameter página = new SqlParameter ("@page", sqldbtype.int);
Page.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 = tableID;
Sqlparameter sort = new SqlParameter ("@sort", sqldbtype.varchar);
Sort.value = tableID;
// consigue la mesa
DataTable ReturnTable = SQLHELPER.EXECUTUTATATAset (ConfigurationManager.appsettings ["SQL2"],
CommandType.StoredProcedure, "spall_returnrows",
Nuevo sqlparameter []
{
SQL, Página, RecsperPage, ID, ordenación
}). Tablas [0];
context.Response.Write (dttoson2 (returnTable, currentPage, tablewCount));
}
/// <summary>
/// conversión de formato JSON
/// </summary>
/// <param name = "dt"> tabla dataTable </param>
/// <param name = "Page"> Página actual </param>
/// <param name = "total"> cuántas filas en total </param>
/// <mirante> </return>
Cadena publicitaria pública DTTOSON2 (DataTable DT, Página de cadena, Total de cadena)
{
StringBuilder jSonstring = new StringBuilder ();
jsonstring.appendline ("{");
jsonstring.appendformat ("Page: {0},/n", página);
jsonstring.appEdFormat ("Total: {0},/n", total);
jsonstring.appendline ("filas: [");
para (int i = 0; i <dt.rows.count; i ++)
{
jsonstring.append ("{");
JSonstring.AppEdFormat ("id: '{0}', celular: [", dt.rows [i] [0] .ToString ());
para (int j = 0; j <dt.columns.count; j ++)
{
if (j == dt.columns.cuent - 1)
{
JSonstring.AppEdFormat ("'{0}'", dt.rows [i] [j] .ToString ());
}
demás
{
JSonstring.AppEdFormat ("'{0}',", dt.rows [i] [j] .ToString ());
}
if (j == dt.columns.cuent - 1)
{
JSonstring.AppEdFormat (", '{0}'", "<input type =/" button/"value =/" ver/"id =/" ss/"onclick =/" ss (" + dt.rows [i] [0] .ToString () +")/"/>");
}
}
jsonstring.append ("]");
if (i == dt.rows.count - 1)
{
jsonstring.appendline ("}");
}
demás
{
jsonstring.appendline ("},");
}
}
jsonstring.append ("]");
jsonstring.appendline ("}");
return jsonstring.ToString ();
}
Público bool isreusable
{
conseguir
{
devolver falso;
}
}
}
}
Implementación de 3 páginas
La copia del código es la siguiente:
< %@ Página lenguaje = "c#" autoeventwireUp = "true" codeBeHind = "complejo-8.aspx.cs" heredes = "griddemo.complex_8" %>
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "servidor">
<title> </title>
<link rel = "stylesheet" type = "text/css" href = "/css/flexigrid/flexigrid.css"/>
<script type = "text/javaScript" src = "/lib/jQuery/jQuery.js"> </script>
<script type = "text/javaScript" src = "flexigrid.js"> </script>
<Link type = "text/css" rel = "stylesheet" href = "facebox/faceBox.css"/>
<link type = "text /css" rel = "stylesheet" href = "body.css" />
<script type = "text/javaScript" src = "facebox/faceBox.js"> </script>
<script type = "text/javaScript">
$ ("documento"). Ready (function () {
$ ("#Flex1"). Flexigrid
({
URL: 'getDataSource4.ashx',
DataType: 'json',
Colmodel: [
{Display: 'DirectionId', Name: 'DirectionId', Width: 40, Sortable: True, Align: 'Center'},
{Display: 'Dirección específica 1', Nombre: 'DirectionLine1', Width: 140, Strayable: True, Align: 'Left'},
{Display: 'Dirección específica 2', Nombre: 'DirectionLine2', Width: 80, Strayable: True, Align: 'Left'},
{Display: 'Zip Code', Name: 'PostalCode', Width: 80, Sortable: True, Align: 'Left'},
{Display: 'City', Nombre: 'Ciudad', Ancho: 80, Ordenable: True, Align: 'Left'},
{Display: 'Opt', Name: 'Opt', Width: 80, Sortable: True, Align: 'Left'}
]
Botones: [
{nombre: 'a', onpress: sortalpha},
{nombre: 'b', onpress: sortalpha},
{nombre: 'c', onpress: sortalpha},
{nombre: 'd', onpress: sortalpha},
{nombre: 'e', onpress: sortalpha},
{nombre: 'f', onpress: sortalpha},
{nombre: 'g', onpress: sortalpha},
{Nombre: 'H', Onpress: Sortalpha},
{Nombre: 'I', Onpress: Sortalpha},
{nombre: 'j', onpress: sortalpha},
{nombre: 'k', onpress: sortalpha},
{nombre: 'l', onpress: sortalpha},
{nombre: 'm', onpress: sortalpha},
{nombre: 'n', onpress: sortalpha},
{Nombre: 'O', Onpress: Sortalpha},
{Nombre: 'P', Onpress: Sortalpha},
{nombre: 'Q', Onpress: Sortalpha},
{nombre: 'r', onpress: sortalpha},
{nombre: 's', onpress: sortalpha},
{nombre: 't', onpress: sortalpha},
{nombre: 'u', onpress: sortalpha},
{nombre: 'V', onpress: sortalpha},
{Nombre: 'W', Onpress: Sortalpha},
{nombre: 'x', onpress: sortalpha},
{nombre: 'y', onpress: sortalpha},
{nombre: 'z', onpress: sortalpha},
{nombre: '%', onpress: sortalpha}
]
SearchItems: [
{Display: 'City', Name: 'City', IsDefault: True},
{Display: 'Zip Code', Name: 'PostalCode'}
]
UsePager: Verdadero,
Título: 'Información del cliente',
UserP: Verdadero,
RP: 10,
showtableToggleBtn: verdadero,
Ancho: 700,
Altura: 200,
RPOptions: [10, 15, 20, 25, 40, 60], // El número de resultados se puede seleccionar por página
PROCMSG: 'Espere a que los datos se carguen ...', // mensaje de inmediato que se procesa
RESIZABLE: FALSO, // ¿Es escalable?
sortName: "DirectionId",
// sortOrder: "ASC", // Esta columna no se puede usar debido a los procedimientos almacenados
});
});
función sortalpha (com) {
jQuery ('#flex1'). FlexOptions ({newp: 1, params: [{name: 'lett_pressed', valor: com}, {name: 'Qtype', valor: $ ('select [name = Qtype]'). Val ()}]});
jQuery ("#Flex1"). FlexReload ();
}
función SSS (datos)
{
var temp = eval (datos);
// jQuery.faceBox (temp);
jQuery.faceBox ({Ajax: 'default.aspx? id ='+temp})
}
</script>
</ablo>
<Body>
<Table>
</table>
</body>
</html>