Ces derniers temps, EXTJS a vraiment été très populaire. Tant qu'il s'agit d'une entreprise liée au CRM / HRM, elle réfléchit maintenant à la façon de l'utiliser dans des projets, mais je n'ose pas. La raison est très simple: elle est trop grande / trop stupide / Le code source est difficile à déboguer. Mais les belles tables et fonctions des extjs me font vraiment saliver. Je me souviens qu'un camarade étranger a écrit un plug-in de jQuery similaire pour Extjs, alors je l'ai cherché dans le plug-in de jQuery Ocean of JQuery. Haha, je l'ai vraiment trouvé. Il semble que ma jQuery soit meilleure. Il est petit et simple, comme un bon moteur de voiture. Je peux bricoler ce que je veux. C'est vraiment pratique. La solution globale ne dépasse pas 80 Ko dans la transmission du réseau, et la vitesse est plus petite que celle des extjs d'une taille de 500 Ko. . .
Télécharger l'adresse: http://code.google.com/p/flexigrid/
Cependant, comme la plupart des informations sur Flexigrid sur Internet sont écrites en PHP ou Java, je l'ai simplement modifiée et fait une version Copycat de la mise en œuvre de la table EXTJS, en espérant qu'elle sera utile à tout le monde.
Utilisation de base:
1 Fondamentalement, l'utilisation est très simple. Il vous suffit d'ajouter la bibliothèque JQuery et le JS de Flexigrid pour formater et embellir la table.
La copie de code est la suivante:
<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">
$ ("document"). Ready (function () {
$ ('# flexme1'). flexigrid ();
$ ('# flexme2'). flexigrid ();
});
</cript>
2 Il suffit d'ajouter le formulaire qui doit être formaté
La copie de code est la suivante:
<h1>
Le Table-1 Flexigrid le plus simple </H1>
<table id = "flexme1">
<adal>
<tr>
<h>
Col 1
</th>
<h>
Col 2
</th>
<h>
COL 3 est un nom à longs en-tête
</th>
<h>
Col 4
</th>
</tr>
</ head>
<tbody>
<tr>
<TD>
Ceci est des données 1 avec du contenu débordant
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
</tbody>
</ table>
<p>
</p>
<h1>
Le Table-2 Flexigrid le plus simple </H1>
<table id = "flexme2">
<adal>
<tr>
<h>
Col 1
</th>
<h>
Col 2
</th>
<h>
COL 3 est un nom à longs en-tête
</th>
<h>
Col 4
</th>
</tr>
</ head>
<tbody>
<tr>
<TD>
Ceci est des données 1 avec du contenu débordant
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
<tr>
<TD>
Ce sont des données 1
</td>
<TD>
Ce sont des données 2
</td>
<TD>
Ce sont des données 3
</td>
<TD>
Ce sont des données 4
</td>
</tr>
</tbody>
</ table>
Afin d'augmenter l'effet d'utilisation de base de Flexigrid, nous pouvons y faire des ajustements de base à travers des paramètres
En-tête personnalisé
Implémentation de code spécifique:
La copie de code est la suivante:
<script type = "text / javascript">
$ ("document"). Ready (function () {
$ ('# flexme1'). flexigrid ({{
Colmodel: [
{affichage: 'iso', nom: 'iso', largeur: 40, sortable: true, align: 'Center'},
{affichage: 'name', nom: 'name', largeur: 180, triable: true, align: 'gauche'},
{affichage: 'name imprimable', nom: 'imprimable_name', largeur: 120, sortable: true, align: 'gauche'},
{affichage: 'ISO3', nom: 'ISO3', largeur: 130, triable: true, align: 'gauche', masquer: true},
{Affichage: 'Number Code', nom: 'numcode', largeur: 80, triable: true, align: 'droite'}
]]
});
$ ('# flexme2'). flexigrid ({
Colmodel: [
{affichage: 'iso', nom: 'iso', largeur: 40, sortable: true, align: 'Center'},
{affichage: 'name', nom: 'name', largeur: 180, triable: true, align: 'gauche'},
{affichage: 'name imprimable', nom: 'imprimable_name', largeur: 120, sortable: true, align: 'gauche'},
{affichage: 'ISO3', nom: 'ISO3', largeur: 130, triable: true, align: 'gauche', masquer: true},
{Affichage: 'Number Code', nom: 'numcode', largeur: 80, triable: true, align: 'droite'}
],
SortName: "ISO",
Sordeorder: "ASC",
});
});
</cript>
Implémentation de tri personnalisée personnalisée
La copie de code est la suivante:
<script type = "text / javascript">
$ ("document"). Ready (function () {
$ ('# flexme1'). flexigrid ({{
Colmodel: [
{affichage: 'iso', nom: 'iso', largeur: 40, sortable: true, align: 'Center'},
{affichage: 'name', nom: 'name', largeur: 180, triable: true, align: 'gauche'},
{affichage: 'name imprimable', nom: 'imprimable_name', largeur: 120, sortable: true, align: 'gauche'},
{affichage: 'ISO3', nom: 'ISO3', largeur: 130, triable: true, align: 'gauche', masquer: true},
{Affichage: 'Number Code', nom: 'numcode', largeur: 80, triable: true, align: 'droite'}
], largeur: 700, hauteur: 300, usepager: true, showtabletogglebtn: true, titre: "cliquez sur moi pour s'effondrer"
});
$ ('# flexme2'). flexigrid ({
Colmodel: [
{affichage: 'iso', nom: 'iso', largeur: 40, sortable: true, align: 'Center'},
{affichage: 'name', nom: 'name', largeur: 180, triable: true, align: 'gauche'},
{affichage: 'name imprimable', nom: 'imprimable_name', largeur: 120, sortable: true, align: 'gauche'},
{affichage: 'ISO3', nom: 'ISO3', largeur: 130, triable: true, align: 'gauche', masquer: true},
{Affichage: 'Number Code', nom: 'numcode', largeur: 80, triable: true, align: 'droite'}
],
SearchItems: [
{affichage: 'iso', nom: 'iso'},
{display: 'name', nom: 'name', iSdefault: true}
],
SortName: "ISO",
Sordeorder: "ASC",
Titre: "Mes résultats de test",
Largeur: 700,
hauteur: 300,
usepager: true, showTableToggleBtn: true, rp: 10
});
});
</cript>
Utilisation avancée:
1. La procédure stockée utilisée pour la pagination
La copie de code est la suivante:
Créer une procédure [dbo]. [Spall_returnrows]
(
@Sql nvarchar (4000),
@Page int,
@Recsperpage int,
@Id varchar (255),
@Sort varchar (255)
)
COMME
DÉCLARE @STR NVARCHAR (4000)
Set @ str = 'select top' +
Cast (@recsperpage comme varchar (20)) +
'* De (' + @ sql + ') t où t.' +
@ Id +
'Pas dans (sélectionnez TOP' +
Cast ((@ recsperpage * (@ page-1)) comme varchar (20)) +
'' +
@ Id +
' DEPUIS ('
+ @ SQL +
') T9 Ordre par' +
@ Trie +
') Ordre par' +
@Trier
Imprimer @str
Exec sp_exectuesql @str
2 Implémentation de transmission de données JSON asynchrone
La copie de code est la suivante:
Utilisation du système;
Utilisation de System.Collections. GENENERIER;
Utilisation de System.Configuration;
Utilisation de System.Data;
Utilisation de System.Data.SqlClient;
Utilisation de System.Linq;
Utilisation de System.Text;
Utilisation de System.Web;
Utilisation de System.Web.Services;
Utilisation de Newtonsoft.json;
Espace de noms Griddemo
{
/// <résumé>
/// Résumé Description de $ codeBehindClassName $
/// </summary>
[WebService (namespace = "http://tempuri.org/")]
[WebServiceBinding (conformsto = wsiprofiles.basicProfile1_1)]]
classe publique getDatasource4: ihttphandler
{
public void processRequest (contexte httpcontext)
{
context.Response.contentType = "Text / Plain";
// Obtenez la page actuelle
String currentPage = context.Request ["page"];
// Obtenez la quantité affichée par page
String pAgeShOwliMit = context.Request ["rp"];
// Obtenez la clé principale
String TableId = context.Request ["SortName"];
// Obtenez la méthode de tri
String OrderMethod = context.Request ["SortOrder"];
// faire filtrer les champs
String FilterField = context.Request ["Qtype"];
// Faites filtrer le contenu
String filterFieldContext;
if (context.request.form ["Letter_preressed"] == null)
{
FilterFieldContext = "";
}
autre
{
FilterFieldContext = context.Request ["Letter_preressed"];
}
// Obtenez le nombre total de lignes de la table
String TableRoWCount = Sqlhelper.ExECUTESCALAR (ConfigurationManager.AppSettings ["SQL2"],
CommandType.Text,
"Sélectionnez Count (*) FROM Person.address"
) .ToString ();
// Obtenez le principal SQL
SQLParameter SQL = new SQLParameter ("@ SQL", SQLDBTYPE.NVARCHAR);
//Sql.value = "select * from Person.address";
if (filterFieldContext.length == 0 || filterField.length == 0)
{
Sql.value = "SELECT Address, Addressline1, Addressline2, postalcode, ville de Person.address";
}
autre
{
String [] tmp = filterField.split (',');
Sql.value = "SELECT AddressId, AddressLine1, AddressLine2, Postalcode, City From Person.address Where" + Tmp [0] + "Like '" + FilterFieldContext + "%'";
}
SqlParameter Page = new SqlParameter ("@ page", sqldbtype.int);
Page.value = convert.toint32 (currentPage);
SqlParameter recsperpage = new sqlParameter ("@ recsperpage", sqldbtype.int);
Recsperpage.value = convert.toint32 (pageshowmit);
SqlParameter id = new SqlParameter ("@ id", sqldbtype.varchar);
Id.value = tableId;
SQLParAmètre Sort = new SqlParAmètre ("@ Sort", SQLDBTYPE.VARCHAR);
Tri.value = tableId;
// Obtenez la table
DataTable returntable = sqlhelper.executedataset (configurationManager.AppSettings ["SQL2"],
CommandType.StoredProcedure, "spall_returnrows",
Nouveau sqlparamètre []
{
SQL, page, recsperpage, id, tri
}). Tables [0];
context.Response.write (dttoson2 (returntable, currentpage, tableRowCount));
}
/// <résumé>
/// Conversion de format JSON
/// </summary>
/// <param name = "dt"> table de données </ param>
/// <param name = "page"> Page actuelle </ param>
/// <param name = "Total"> Combien de lignes en total </param>
/// <retourne> </ retourne>
String statique public DTTOSON2 (DTABLE DT, page de chaîne, Total de chaîne)
{
StringBuilder jSontring = new StringBuilder ();
jsonstring.appendLine ("{");
jsonstring.appendFormat ("page: {0}, / n", page);
jsonstring.appendFormat ("total: {0}, / n", total);
JSONSTRING.APPENDLINE ("Rows: [");
pour (int i = 0; i <dt.Rows.Count; i ++)
{
jsonstring.append ("{");
jsonstring.appendFormat ("id: '{0}', cellule: [", dt.rows [i] [0] .toString ());
pour (int j = 0; j <dt.columns.Count; j ++)
{
if (j == dt.columns.Count - 1)
{
jsonstring.appendFormat ("'{0}'", dt.rows [i] [j] .toString ());
}
autre
{
jsonstring.appendFormat ("'{0}',", dt.rows [i] [j] .toString ());
}
if (j == dt.columns.Count - 1)
{
jsonstring.appendFormat (", '{0}'", "<input type = /" bouton / "value = /" View / "id = /" ss / "onclick = /" ss ("+ dt.rows [i] [0] .toString () +") / "/>");
}
}
jsonstring.append ("]");
if (i == dt.Rows.Count - 1)
{
jsonstring.appendLine ("}");
}
autre
{
jsonstring.appendLine ("},");
}
}
jsonstring.append ("]");
jsonstring.appendLine ("}");
return jSontring.toString ();
}
Bool public isreusable
{
obtenir
{
retourne false;
}
}
}
}
Implémentation de 3 pages
La copie de code est la suivante:
<% @ Page Language = "C #" AutoEventWireUp = "True" CodeBehind = "complex-8.aspx.cs" Hérites = "Griddemo.Complex_8"%>
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<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">
$ ("document"). Ready (function () {
$ ("# flex1"). flexigrid
({
URL: «getDatasource4.Ashx»,
Type de données: «JSON»,
Colmodel: [
?
{affichage: 'Adresse spécifique 1', nom: 'Addressline1', largeur: 140, triable: true, align: 'gauche'},
{affichage: 'Adresse spécifique 2', nom: 'AddressLine2', largeur: 80, triable: true, align: 'gauche'},
{affichage: «code postal», nom: «postalcode», largeur: 80, sortable: true, align: «Left»},
{Affichage: «ville», nom: «ville», largeur: 80, triable: true, align: «gauche»},
{affichage: 'opt', nom: 'opt', largeur: 80, triable: true, align: 'gauche'}
],
Boutons: [
{nom: 'a', onPress: sortalpha},
{name: 'b', onPress: sortalpha},
{name: 'c', onPress: sortalpha},
{name: 'd', onPress: sortalpha},
{name: 'e', onPress: sortalpha},
{nom: 'f', onPress: sortalpha},
{nom: 'g', onPress: sortalpha},
{nom: 'h', onPress: sortalpha},
{name: 'i', onPress: sortalpha},
{name: 'j', onPress: sortalpha},
{nom: 'k', onPress: sortalpha},
{name: 'l', onPress: sortalpha},
{nom: 'm', onPress: sortalpha},
{name: 'n', onPress: sortalpha},
{nom: 'o', onPress: sortalpha},
{nom: 'p', onPress: sortalpha},
{nom: 'q', onPress: sortalpha},
{nom: 'r', onPress: sortalpha},
{name: 's', onPress: sortalpha},
{name: 't', onPress: sortalpha},
{nom: 'u', onPress: sortalpha},
{name: 'v', onPress: sortalpha},
{name: 'w', onPress: sortalpha},
{name: 'x', onPress: sortalpha},
{nom: 'y', onPress: sortalpha},
{nom: 'z', onPress: sortalpha},
{nom: '%', onPress: sortalpha}
],
SearchItems: [
{Affichage: 'City', Nom: 'City', Isdefault: True},
{Affichage: 'Zip Code', nom: 'postalcode'}
],
usepager: true,
Titre: «Informations client»,
userp: true,
RP: 10,
showTableToggleBtn: true,
Largeur: 700,
taille: 200,
rpoptions: [10, 15, 20, 25, 40, 60], // Le nombre de résultats peut être sélectionné par page
Procmsg: 'Veuillez attendre que les données se chargent ...', // Message rapide en cours de traitement
Resizable: false, // est-il évolutif?
sortName: "AddressId",
// Sordeorder: "ASC", // Cette colonne ne peut pas être utilisée en raison de procédures stockées
});
});
fonction sortalpha (com) {
jQuery ('# flex1'). flexOptions ({newp: 1, params: [{name: 'Letter_preressed', value: com}, {name: 'qtype', value: $ ('select [name = qtype]'). Val ()}]});
jQuery ("# flex1"). flexReload ();
}
fonction SSS (données)
{
var temp = eval (data);
// jQuery.FaceBox (TEMP);
jQuery.faceBox ({ajax: 'default.aspx? id =' + temp})
}
</cript>
</ head>
<body>
<ballage>
</ table>
</docy>
</html>