Extjs erfreut sich in letzter Zeit großer Beliebtheit. Unternehmen, die CRM/HRM betreiben, denken jetzt darüber nach, wie sie es in Projekten einsetzen können, aber ich traue mich nicht. Der Grund ist ganz einfach: zu groß/zu groß. Der Quellcode ist schwer zu debuggen. Aber die schönen Tabellen und leistungsstarken Funktionen von Extjs lassen mich wirklich sabbern. Ich erinnere mich, dass ein Ausländer einmal ein ähnliches JQuery-Plug-In für ExtJs geschrieben hat, also habe ich im Meer von JQuery-Plug-Ins danach gesucht habe es gefunden. Es scheint, dass mein Jquery kleiner und einfacher ist, ich kann alles selbst basteln, was ich will. Der Gesamtplan überschreitet bei der Netzwerkübertragung nicht 80 KB, und ich weiß nicht, wie viel geringer die Geschwindigkeit ist als bei den 500 KB Extjs. . .

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

Da die meisten Informationen zu FlexiGrid im Internet jedoch in PHP oder Java geschrieben sind, hat mein Bruder sie einfach geändert und eine Nachahmerversion der Extjs-Tabellenimplementierung erstellt. Ich hoffe, dass sie für alle hilfreich sein wird.

Grundlegende Verwendung:

1 Die grundlegende Verwendung ist sehr einfach. Sie müssen lediglich die Jquery-Bibliothek und FlexiGrid JS hinzufügen, um die Tabelle zu formatieren und zu verschönern.

Code kopieren Der Code lautet wie folgt:

<%----%>

2 Fügen Sie einfach die Tabelle hinzu, die formatiert werden muss

Code kopieren Der Code lautet wie folgt:

最简单的flexigrid表格-1

Spalte 1	Spalte 2	Spalte 3 ist ein langer Headername	Spalte 4
Dies ist Daten 1 mit überquellendem Inhalt	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	This is data 4
This is data 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	This is data 4
This is data 1	This is data 2	This is data 3	This is data 4
This is data 1	This is data 2	This is data 3	This is data 4

最简单的flexigrid表格-2

Col 1	Col 2	Col 3 is a long header name	Col 4
This is data 1 with overflowing content	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	This is data 4
This is data 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	This is data 4
This is data 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	Das sind Daten 4
Das sind Daten 1	Das sind Daten 2	Das sind Daten 3	This is data 4

为了增加FlexiGrid的基本使用效果，我们可以通过参数对其进行基本的调整

自定义表头

具体代码实现：

复制代码代码如下:

自定义折叠，自定义排序的实现

复制代码代码如下:

高级使用：

1 分页用到的存储过程

复制代码代码如下:

Erstellen Sie PROCEDURE [dbo].[spAll_ReturnRows]
        (
            @SQL nVARCHAR(4000),
            @Page int,
            @RecsPerPage int,
            @ID VARCHAR(255),
            @Sort VARCHAR(255)
        )
        WIE
        DECLARE @Str nVARCHAR(4000)
        SET @Str='SELECT   TOP '
            CAST(@RecsPerPage AS VARCHAR(20))
            ' * FROM (' @SQL ') T WHERE T.'
            @ID
            ' NICHT IN (SELECT   TOP '
            CAST((@RecsPerPage*(@Page-1)) AS VARCHAR(20))
            ' '
            @ID
            ' VON ('
            @SQL
            ') T9 ORDER BY '
            @Sortieren
            ') ORDER BY '
            @Sortieren
        DRUCKEN @Str
        EXEC sp_ExecuteSql @Str

2 异步JSON数据传输实现

复制代码代码如下:

mit System;
mit System.Collections.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
{
     ///
     /// $codebehindclassname$ 的摘要说明
     ///
     [WebService(Namespace = "http://tempuri.org/")]
     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
     öffentliche Klasse GetDataSource4: IHttpHandler
     {
         public void ProcessRequest(HttpContext context)
         {
             context.Response.ContentType = "text/plain";
             //得到当前页
             string CurrentPage = context.Request["page"];
             //得到每页显示多少
             string PageShowLimit = context.Request["rp"];
             //得到主键
             string TableID = context.Request["sortname"];
             //得到排序方法
             string OrderMethod = context.Request["sortorder"];
             //得到要过滤的字段
             string FilterField = context.Request["qtype"];
             //得到要过滤的内容
             string FilterFieldContext;
             if (context.Request.Form["letter_pressed"] == null)
             {
                 FilterFieldContext = "";
             }
             sonst
             {
                 FilterFieldContext = context.Request["letter_pressed"];
             }
             //得到表的总行数
             string TableRowCount = SqlHelper.ExecuteScalar(ConfigurationManager.AppSettings["SQL2"],
                                     CommandType.Text,
                                     „select count(*) from Person.Address“
                                    ).ToString();
             //得到主SQL
             SqlParameter SQL = new SqlParameter("@SQL", SqlDbType.NVarChar);
             //SQL.Value = "SELECT * FROM Person.Address";
             if (FilterFieldContext.Length == 0 || FilterField.Length == 0)
             {
                 SQL.Value = "SELECT AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Address";
             }
             sonst
             {
                 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(PageShowLimit);
             SqlParameter ID = new SqlParameter("@ID", SqlDbType.VarChar);
             ID.Value = TableID;
             SqlParameter Sort = new SqlParameter("@Sort", SqlDbType.VarChar);
             Sort.Value = TableID;
             //得到表
             DataTable returnTable = SqlHelper.ExecuteDataset(ConfigurationManager.AppSettings["SQL2"],
                         CommandType.StoredProcedure, „spAll_ReturnRows“,
                         neuer SqlParameter[]
                             {
                                 SQL,Seite,RecsPerPage,ID,Sort
                             }).Tables[0];
             context.Response.Write(DtToSON2(returnTable, CurrentPage, TableRowCount));
         }
         ///
         /// JSON格式转换
         ///
         /// DataTable表
         /// 当前页
         /// 总计多少行
         ///
         öffentlicher statischer String DtToSON2(DataTable dt, String-Seite, String-Gesamt)
         {
             StringBuilder jsonString = new StringBuilder();
             jsonString.AppendLine("{");
             jsonString.AppendFormat("page: {0},n", page);
             jsonString.AppendFormat("total: {0},n", total);
             jsonString.AppendLine("rows: [");
             for (int i = 0; i < dt.Rows.Count; i )
             {
                 jsonString.Append("{");
                 jsonString.AppendFormat("id:'{0}',cell:[", 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());
                     }
                     sonst
                     {
                         jsonString.AppendFormat("'{0}',", dt.Rows[i][j].ToString());
                     }
                     if (j == dt.Columns.Count - 1)
                     {
                         jsonString.AppendFormat(",'{0}'", "");
                     }
                 }
                 jsonString.Append("]");
                 if (i == dt.Rows.Count - 1)
                 {
                     jsonString.AppendLine("}");
                 }
                 sonst
                 {
                     jsonString.AppendLine("},");
                 }
             }
             jsonString.Append("]");
             jsonString.AppendLine("}");
             gib jsonString.ToString();
zurück          }
         public bool IsReusable
         {
             bekommen
             {
                 return false;
             }
         }
     }
}

3 页面实现

复制代码代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Complex-8.aspx.cs" Inherits="GridDemo.Complex_8" %>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

Neueste Artikel des Autors