Teilen Sie die Methode zur Implementierung des ExtJS -Tabelleneffekts mithilfe von Flexigrid

Autor：Eve Cole Aktualisierungszeit：2025-04-29 05:48:02

In jüngster Zeit war EXTJS sehr beliebt. Solange es sich um ein CRM/HRM-Unternehmen handelt, überlegt es nun darüber, wie man es in Projekten einsetzt, aber ich wage es nicht. Der Grund ist sehr einfach: Es ist zu groß/zu dumm/Der Quellcode ist schwer zu debuggen. Aber die schönen Tische und Funktionen von ExtJs machen mich wirklich zum Speicheln. Ich erinnere mich, dass ein ausländischer Kameraden ein ähnliches JQuery-Plug-In für ExtJs geschrieben hat, also habe ich im Ozean des Jquery-Plug-In danach gesucht. Haha, ich habe es wirklich gefunden. Es scheint, dass mein jQuery besser ist. Es ist klein und einfach, wie ein guter Automotor. Ich kann was auch immer ich will. Es ist wirklich bequem. Die Gesamtlösung überschreitet die Netzwerkübertragung nicht über 80 KB und die Geschwindigkeit ist kleiner als die von ExtJs mit einer Größe von 500 KB. . .

Download Adresse: http://code.google.com/p/flexigrid/

Da die meisten Informationen über Flexigrid im Internet jedoch in PHP oder Java geschrieben sind, habe ich sie einfach geändert und eine Nachahmerversion der ExtJS -Tabellenimplementierung erstellt, in der Hoffnung, dass es für alle hilfreich sein wird.

Grundnutzung:

1 Grundsätzlich ist die Verwendung sehr einfach. Sie müssen nur die JQuery -Bibliothek und die JS von Flexigrid hinzufügen, um den Tisch zu formatieren und zu verschönern.

Die Codekopie lautet wie folgt:

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

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

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

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

});

</script>

2 Fügen Sie einfach das Formular hinzu, das formatiert werden muss

Die Codekopie lautet wie folgt:

<h1>

Die einfachste Flexigrid-Tabelle 1 </h1>

<kopf>

<tr>

<Th>

COL 1

</th>

<Th>

COL 2

</th>

<Th>

Col 3 ist ein langer Header -Name

</th>

<Th>

COL 4

</th>

</tr>

</head>

<tbody>

<tr>

<td>

Dies ist Daten 1 mit überfüllten Inhalten

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

</tbody>

</table>

<p>

</p>

<h1>

Die einfachste Flexigrid Tabelle-2 </h1>

<kopf>

<tr>

<Th>

COL 1

</th>

<Th>

COL 2

</th>

<Th>

Col 3 ist ein langer Header -Name

</th>

<Th>

COL 4

</th>

</tr>

</head>

<tbody>

<tr>

<td>

Dies ist Daten 1 mit überfüllten Inhalten

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

<tr>

<td>

Dies sind Daten 1

</td>

<td>

Dies sind Daten 2

</td>

<td>

Dies sind Daten 3

</td>

<td>

Dies ist Data 4

</td>

</tr>

</tbody>

</table>

Um den grundlegenden Nutzungseffekt von Flexigrid zu erhöhen, können wir grundlegende Anpassungen durch Parameter vornehmen

Benutzerdefinierte Header

Spezifische Code -Implementierung:

Die Codekopie lautet wie folgt:

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

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

Colmodel: [

{Anzeige: 'ISO', Name: 'ISO', Breite: 40, sortierbar: true, ausgerichtet: 'Center'},

{display: 'name', name: 'name', width: 180, sortable: true, align: 'links'},

{display: 'druckbarer name', name: 'druckable_name', width: 120, sortierbar: true, align: 'links'},

{Anzeige: 'ISO3', Name: 'ISO3', Breite: 130, sortierbar: true, ausgerichtet: 'links', hide: true},

{Anzeige: 'Zahlencode', Name: 'Numcode', Breite: 80, sortierbar: true, align: 'rechts'}

]

});

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

Colmodel: [

{Anzeige: 'ISO', Name: 'ISO', Breite: 40, sortierbar: true, ausgerichtet: 'Center'},

{display: 'name', name: 'name', width: 180, sortable: true, align: 'links'},

{display: 'druckbarer name', name: 'druckable_name', width: 120, sortierbar: true, align: 'links'},

{Anzeige: 'ISO3', Name: 'ISO3', Breite: 130, sortierbar: true, ausgerichtet: 'links', hide: true},

{Anzeige: 'Zahlencode', Name: 'Numcode', Breite: 80, sortierbar: true, align: 'rechts'}

Sortname: "ISO",

Sorder: "ASC",

});

</script>

Benutzerdefinierte Falten, benutzerdefinierte Sortierungsimplementierung

Die Codekopie lautet wie folgt:

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

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

Colmodel: [

{Anzeige: 'ISO', Name: 'ISO', Breite: 40, sortierbar: true, ausgerichtet: 'Center'},

{display: 'name', name: 'name', width: 180, sortable: true, align: 'links'},

{display: 'druckbarer name', name: 'druckable_name', width: 120, sortierbar: true, align: 'links'},

{Anzeige: 'ISO3', Name: 'ISO3', Breite: 130, sortierbar: true, ausgerichtet: 'links', hide: true},

{Anzeige: 'Zahlencode', Name: 'Numcode', Breite: 80, sortierbar: true, align: 'rechts'}

], Breite: 700, Höhe: 300, usepager: true, showtabletoggleBtn: true, title: "klicken Sie aufzubrechen, um zusammenzubrechen"

});

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

Colmodel: [

{Anzeige: 'ISO', Name: 'ISO', Breite: 40, sortierbar: true, ausgerichtet: 'Center'},

{display: 'name', name: 'name', width: 180, sortable: true, align: 'links'},

{display: 'druckbarer name', name: 'druckable_name', width: 120, sortierbar: true, align: 'links'},

{Anzeige: 'ISO3', Name: 'ISO3', Breite: 130, sortierbar: true, ausgerichtet: 'links', hide: true},

{Anzeige: 'Zahlencode', Name: 'Numcode', Breite: 80, sortierbar: true, align: 'rechts'}

SearchItems: [

{Anzeige: 'ISO', Name: 'ISO'},

{display: 'name', name: 'name', isDefault: true}

Sortname: "ISO",

Sorder: "ASC",

Titel: "Meine Testergebnisse",

Breite: 700,

Höhe: 300,

usepager: true, showtabletoggleBtn: true, rp: 10

});

</script>

Erweiterte Verwendung:

1. Das für die Paginierung verwendete gespeicherte Verfahren

Die Codekopie lautet wie folgt:

Prozedur erstellen [DBO]. [SPALL_RETURNROWS]

(

@SQL Nvarchar (4000),

@Page int,

@-RecsperPage int,

@Id varchar (255),

@SORT VARCHAR (255)

)

ALS

Deklarieren @SR nvarchar (4000)

Setzen Sie @str = 'Wählen Sie Top'+

Cast (@recsperPage as varchar (20))+

' * Von ('+@sql+') t won t.'+

@Id+

'Nicht in (Wählen Sie Top'+

Cast ((@recSperPage*(@page-1)) als varchar (20))+

''+

@Id+

' AUS ('

+@SQL+

') T9 order von'+

@Sort+

') Bestellen von'+

@Sortieren

Drucken @SR

Exec sp_executesql @str

2 Asynchronous JSON -Datenübertragungsimplementierung

Die Codekopie lautet wie folgt:

mit System verwenden;

mit System.Collectionss.generic;

mit System.Configuration;

mit System.data;

mit System.data.sqlclient;

mit System.linq;

mit System.text;

mit System.Web;

mit System.Web.Services;

mit newtonsoft.json;

Namespace Griddemo

{

/// <summary>

/// Zusammenfassungsbeschreibung von $ codebehindClassName $ $

/// </summary>

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

[WebServiceBinding (conformsto = wsiprofiles.BasicProfile1_1)]]]

öffentliche Klasse getDataSource4: ihttphandler

{

public void processRequest (HTTPContext -Kontext)

{

context.Response.contentType = "text/plain";

// Erhalten Sie die aktuelle Seite

String currentPage = context.request ["Seite"];

// Erhalten Sie, wie viel pro Seite angezeigt wird

String pageshowlimit = context.request ["rp"];

// Holen Sie sich den Primärschlüssel

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

// die Sortiermethode abrufen

String orderMethod = context.request ["sortOrder"];

// Lassen Sie die Felder gefiltert werden

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

// Lassen Sie den Inhalt gefiltert werden

String filterfieldContext;

if (context.request.form ["Letter_pressed"] == NULL)

{

FilterfieldContext = "";

}

anders

{

FilterfieldContext = context.request ["Letter_pression"];

}

// Erhalten Sie die Gesamtzahl der Zeilen der Tabelle

String tablerowCount = sqlhelper.executescalar (configurationManager.Appsettings ["SQL2"],

Commandtype.text,

"Wählen Sie Graf (*) von Person.address" aus "

) .ToString ();

// Holen Sie sich den Haupt -SQL

SQLParameter SQL = New SQLParameter ("@SQL", SQLDBTYPE.NVARCHAR);

//Sql.value = "aus person.address";

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

{

Sql.value = "adressId, adressline1, adressline2, postalcode, Stadt von Person.address";

}

anders

{

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

Sql.value = "adressId, addressline1, adressline2, postalcode, Stadt von Person.Address Wobei" + tmp [0] + "wie '" + filterfieldContext + "%'";

}

SQLParameter Seite = neuer 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;

// den Tisch bekommen

DataTable returnTable = SQLHElper.executedataset (configurationManager.Appsettings ["SQL2"],

Commandtype.StoredProcedure, "spall_returnrows",

neuer SQLParameter []

{

SQL, Page, RecspsperPage, ID, Sortieren

}). Tabellen [0];

context.Response.write (dttoson2 (Rückkehr, aktuelle Seite, tablerowCount));

}

/// <summary>

/// JSON -Formatkonvertierung

/// </summary>

/// <param name = "dt"> DataTable Tabelle </param>

/// <param name = "page"> aktuelle Seite </param>

/// <param name = "Gesamt"> Wie viele Zeilen in Total </param>

/// <zurückgegeben> </returns>

public static String dttoson2 (DataTable DT, String -Seite, String Gesamt)

{

StringBuilder jSonstring = new StringBuilder ();

jSonstring.Appendline ("{");

jSonstring.AppendFormat ("Seite: {0},/n", Seite);

jSonstring.AppendFormat ("Gesamt: {0},/n", insgesamt);

Jserstring.Appendline ("Zeilen: [");

für (int i = 0; i <dt.rows.count; i ++)

{

JSonstring.Append ("{");

jSonstring.AppendFormat ("id: '{0}', cell: [", dt.rows [i] [0] .ToString ());

für (int j = 0; j <dt.columns.count; j ++)

{

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

{

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

}

anders

{

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

}

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

{

jSonstring.AppendFormat (", '{0}'", "<Eingabe type =/" button/"value =/" view/"id =/" ss/"onclick =/" ss (" + dt.rows [i] [0] .toString () +")/"/>");

}

Jserstring.Append ("]");

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

{

Jserstring.Appendline ("}");

}

anders

{

Jserstring.Appendline ("},");

}

Jserstring.Append ("]");

Jserstring.Appendline ("}");

return JSonstring.toString ();

}

öffentlich bool isreusable

{

erhalten

{

false zurückgeben;

}

3 Seitenimplementierung

Die Codekopie lautet wie folgt:

< %@ Page Language = "C#" AutoEventwireUp = "True" codeBehind = "komplex-8.aspx.cs" inherits = "griddemo.complex_8" %>

<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">

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

$ ("#flex1"). Flexigrid

({{

URL: 'getDataSource4.ashx',

Datentyp: 'JSON',

Colmodel: [

{display: 'adressId', name: 'adressId', width: 40, sortierbar: true, align: 'center'},

{Anzeige: 'Spezifische Adresse 1', Name: 'Addressline1', Breite: 140, sortierbar: true, align: 'links'},

{Anzeige: 'Spezifische Adresse 2', Name: 'Addressline2', Breite: 80, sortierbar: true, align: 'links'},

{Anzeige: 'Zip -Code', Name: 'Postalcode', Breite: 80, sortierbar: true, align: 'links'},

{Anzeige: 'City', Name: 'City', Breite: 80, sortierbar: true, ausgerichtet: 'links'},

{Anzeige: 'opt', Name: 'opt', width: 80, sortierbar: true, align: 'links'}

Knöpfe: [

{Name: 'a', Onpress: sortalpha},

{Name: 'B', Onpress: sortalpha},

{Name: 'C', Onpress: sortalpha},

{Name: 'D', Onpress: sortalpha},

{Name: 'E', Onpress: sortalpha},

{Name: 'F', Onpress: sortalpha},

{Name: 'G', Onpress: sortalpha},

{Name: 'H', Onpress: sortalpha},

{Name: 'I', Onpress: sortalpha},

{Name: 'J', Onpress: sortalpha},

{Name: 'K', Onpress: sortalpha},

{Name: 'L', Onpress: sortalpha},

{Name: 'M', Onpress: sortalpha},

{Name: 'n', Onpress: sortalpha},

{Name: 'O', Onpress: sortalpha},

{Name: 'P', Onpress: sortalpha},

{Name: 'q', Onpress: sortalpha},

{Name: 'R', Onpress: sortalpha},

{Name: 's', Onpress: sortalpha},

{Name: 'T', Onpress: sortalpha},

{Name: 'u', Onpress: sortalpha},

{Name: 'V', Onpress: sortalpha},

{Name: 'W', Onpress: sortalpha},

{Name: 'x', Onpress: sortalpha},

{Name: 'y', Onpress: sortalpha},

{Name: 'Z', Onpress: sortalpha},

{Name: '%', Onpress: sortalpha}

SearchItems: [

{Anzeige: 'City', Name: 'City', isDefault: true},

{Anzeige: 'ZIP -Code', Name: 'Postalcode'}

usepager: true,

Titel: 'Kundeninformationen',

UserP: true,

RP: 10,

showtabletoggleBtn: true,

Breite: 700,

Höhe: 200,

RPOPTIONS: [10, 15, 20, 25, 40, 60], // Die Anzahl der Ergebnisse kann pro Seite ausgewählt werden

ProcMSG: "Bitte warten Sie, bis die Daten geladen werden ...", // Eingabeaufforderung zur Verarbeitung von Nachricht

Resizierbar: Falsch, // Ist es skalierbar?

sortName: "adressId",

// Sortorder: "ASC", // Diese Spalte kann aufgrund gespeicherter Prozeduren nicht verwendet werden

});

Funktion sortalpha (com) {

jQuery ('#flex1'). flexOptions ({newp: 1, params: [{name: 'letter_pressed', value: com}, {name: 'qtype', value: $ ('select [name = qType]'). Val ()}]});

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

}

Funktion SSS (Daten)

{

var temp = eval (Daten);

// jQuery.faceBox (temp);

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

}

</script>

</head>

<body>

</table>

</body>

</html>