FlexiGrid を使用して Extjs テーブル効果メソッド Sharing_jquery を実現する

最近、Extjs が非常に人気があります。CRM/HRM を行う企業は現在、Extjs をプロジェクトで使用する方法を考えていますが、その理由は非常に単純です。大きすぎる/大きすぎる/バカだからです。ソースコードはデバッグが困難です。でも、Extjs の美しいテーブルと強力な機能には、本当によだれが出てきます。以前、外国人が Extjs 用に似たような Jquery プラグインを書いていたことを思い出し、Jquery プラグインの海から探してみました（笑）。見つけました。私のJqueryの方が優れているようです。小型でシンプルで、好きなものをDIYできます。全体的な計画では、ネットワーク送信が 80 KB を超えず、500 KB の Extjs と比べてどれだけ速度が小さいかはわかりません。 。 。

ダウンロードアドレス: http://code.google.com/p/flexigrid/

ただし、インターネット上の FlexiGrid に関する情報のほとんどは PHP または Java で書かれているため、兄がそれを修正して Extjs テーブル実装の模倣バージョンを作成しただけです。これが皆さんの役に立つことを願っています。

基本的な使用法:

1 基本的な使用方法は非常に簡単で、テーブルをフォーマットして整形するために Jquery ライブラリと FlexiGrid JS を追加するだけです。

コードをコピーします コードは次のとおりです:

<%----%>
<スクリプトタイプ="text/javascript">
$("ドキュメント").ready(function() {
$('#flexme1').flexigrid();
$('#flexme2').flexigrid();
});

2 フォーマットする必要があるテーブルを追加するだけです

コードをコピー コードは次のとおりです:

     最高の flexigrid 表格 -1

 
     <頭>
        
            
            
            
            
        
    
    
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
    
 

列 1	列 2	列 3 は長いヘッダー名です	列 4
中身が溢れたデータ1です	データ2です	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	This is data 4
This is data 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 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	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	This is data 4
This is data 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	This is data 4
This is data 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	これはデータ 4
これはデータ 1	これはデータ 2	これはデータ 3	This is data 4

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

自定义表头

具体代码实现：

复制代码 代码如下:

<スクリプトタイプ="text/javascript">
     $("ドキュメント").ready(function() {
         $('#flexme1').flexigrid({
             ColModel: [
             { 表示: 'ISO'、名前: 'iso'、幅: 40、並べ替え可能: true、配置: 'center' },
             { 表示: '名前'、名前: '名前'、幅: 180、並べ替え可能: true、整列: '左' },
             { 表示: '印刷可能な名前'、名前: 'printable_name'、幅: 120、並べ替え可能: true、整列: 'left' },
             { 表示: 'ISO3'、名前: 'iso3'、幅: 130、並べ替え可能: true、整列: 'left'、非表示: true },
             { 表示: '数値コード'、名前: 'numcode'、幅: 80、並べ替え可能: true、整列: '右' }
             ]
         });
         $('#flexme2').flexigrid({
             ColModel: [
             { 表示: 'ISO'、名前: 'iso'、幅: 40、並べ替え可能: true、配置: 'center' },
             { 表示: '名前'、名前: '名前'、幅: 180、並べ替え可能: true、整列: '左' },
             { 表示: '印刷可能な名前'、名前: 'printable_name'、幅: 120、並べ替え可能: true、整列: 'left' },
             { 表示: 'ISO3'、名前: 'iso3'、幅: 130、並べ替え可能: true、整列: 'left'、非表示: true },
             { 表示: '数値コード'、名前: 'numcode'、幅: 80、並べ替え可能: true、整列: '右' }
             ]、
             ソート名: "iso",
             並べ替え順序: "asc"、
         });
     });
 

自定义折叠、自定义排序の实现

复制代码代码如下:

<スクリプトタイプ="text/javascript">
     $("ドキュメント").ready(function() {
         $('#flexme1').flexigrid({
             ColModel: [
             { 表示: 'ISO'、名前: 'iso'、幅: 40、並べ替え可能: true、配置: 'center' },
             { 表示: '名前'、名前: '名前'、幅: 180、並べ替え可能: true、整列: '左' },
             { 表示: '印刷可能な名前'、名前: 'printable_name'、幅: 120、並べ替え可能: true、整列: 'left' },
             { 表示: 'ISO3'、名前: 'iso3'、幅: 130、並べ替え可能: true、整列: 'left'、非表示: true },
             { 表示: '数値コード'、名前: 'numcode'、幅: 80、並べ替え可能: true、整列: '右' }
             ]、幅: 700、高さ: 300、usepager: true、showTableToggleBtn: true、タイトル: "点我折叠"
         });
         $('#flexme2').flexigrid({
             ColModel: [
             { 表示: 'ISO'、名前: 'iso'、幅: 40、並べ替え可能: true、配置: 'center' },
             { 表示: '名前'、名前: '名前'、幅: 180、並べ替え可能: true、整列: '左' },
             { 表示: '印刷可能な名前'、名前: 'printable_name'、幅: 120、並べ替え可能: true、整列: 'left' },
             { 表示: 'ISO3'、名前: 'iso3'、幅: 130、並べ替え可能: true、整列: 'left'、非表示: true },
             { 表示: '数値コード'、名前: 'numcode'、幅: 80、並べ替え可能: true、整列: '右' }
             ]、
             検索項目: [
             { 表示: 'ISO'、名前: 'iso' },
             { 表示: '名前'、名前: '名前'、デフォルト: true }
             ]、
             ソート名: "iso",
             並べ替え順序: "asc"、
             タイトル: "我的测试效果",
             幅: 700、
             高さ: 300、
             usepager: true、showTableToggleBtn: true、rp: 10
 
         });
     });
 

高级使用：

1 分間の保存期間

复制代码代码如下:

PROCEDURE [dbo].[spAll_ReturnRows]
を作成します         (
            @SQL nVARCHAR(4000),
            @ページ整数、
            @RecsPerPage int,
            @ID VARCHAR(255),
            @ソート VARCHAR(255)
        )
        AS
        @Str nVARCHAR(4000)
を宣言します         SET @Str='SELECT TOP '
            CAST(@RecsPerPage AS VARCHAR(20))
            ' * FROM (' @SQL ') T WHERE T.'
            @ID
            ' 入っていません (先頭を選択 '
            CAST((@RecsPerPage*(@Page-1)) AS VARCHAR(20))
            「」
            @ID
            ' から ('
            @SQL
            ') T9 注文は '
            @ソート
            ') 注文方法 '
            @ソート
        印刷 @Str
        EXEC sp_ExecuteSql @Str

2 异步JSONデータベース传输实现

复制代码代码如下:

 システムを使用しています;
 System.Collections.Generic を使用;
 System.Configuration を使用します;
 System.Data を使用します;
 System.Data.SqlClient を使用;
 System.Linq を使用する;
 System.Text を使用;
 System.Web を使用する;
 System.Web.Services を使用する;
 Newtonsoft.Json を使用します;
 名前空間 GridDemo
 {
     ///
     /// $codebehindclassname$ の摘要说明
     ///
     [WebService(名前空間 = "http://tempuri.org/")]
     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
     パブリック クラス GetDataSource4 : IHttpHandler
     {
         public void ProcessRequest(HttpContext context)
         {
             context.Response.ContentType = "テキスト/プレーン";
             //当前页
に到達              string CurrentPage = context.Request["ページ"];
             //得られた每页显表示量
             string PageShowLimit = context.Request["rp"];
             //主键に到達
             string TableID = context.Request["sortname"];
             //排序方法に到達
             string OrderMethod = context.Request["sortorder"];
             //必要なワードセグメントを取得
             string FilterField = context.Request["qtype"];
             //必要なコンテンツを取得
             文字列 FilterFieldContext;
             if (context.Request.Form["letter_pressed"] == null)
             {
                 FilterFieldContext = "";
             }
             それ以外
             {
                 FilterFieldContext = context.Request["letter_pressed"];
             }
             //表の実行数を取得
             string TableRowCount = SqlHelper.ExecuteScalar(ConfigurationManager.AppSettings["SQL2"],
                                     CommandType.Text、
                                     「人物.住所からカウント(*)を選択」
                                    ).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";
             }
             それ以外
             {
                 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 = テーブルID;
             SqlParameter Sort = new SqlParameter("@Sort", SqlDbType.VarChar);
             Sort.Value = テーブルID;
             //表に到達
             DataTable returnTable = SqlHelper.ExecuteDataset(ConfigurationManager.AppSettings["SQL2"],
                         CommandType.StoredProcedure、"spAll_ReturnRows"、
                         新しい SqlParameter[]
                             {
                                 SQL、ページ、RecsPerPage、ID、ソート
                             }).Tables[0];
             context.Response.Write(DtToSON2(returnTable, CurrentPage, TableRowCount));
         }
         ///
         /// JSON格式转换
         ///
         /// DataTable表
         /// 当前页
         /// 总计いくら行
         ///
         public static string DtToSON2(DataTable dt, string page, string total)
         {
             StringBuilder jsonString = new StringBuilder();
             jsonString.AppendLine("{");
             jsonString.AppendFormat("ページ: {0},n", page);
             jsonString.AppendFormat("合計: {0},n", 合計);
             jsonString.AppendLine("rows: [");
             for (int i = 0; i              {
                 jsonString.Append("{");
                 jsonString.AppendFormat("id:'{0}',cell:[", dt.Rows[i][0].ToString());
                 for (int j = 0; j                  {
                     if (j == dt.Columns.Count - 1)
                     {
                         jsonString.AppendFormat("'{0}'", dt.Rows[i][j].ToString());
                     }
                     それ以外
                     {
                         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("}");
                 }
                 それ以外
                 {
                     jsonString.AppendLine("},");
                 }
             }
             jsonString.Append("]");
             jsonString.AppendLine("}");
             return jsonString.ToString();
         }
         public bool IsReusable
         {
            
を入手              {
                 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">
 
    
    
    
    
    
    
    
     <スクリプトタイプ="text/javascript">
         $("ドキュメント").ready(function() {
             $("#flex1").flexigrid
             ({
                 URL: 'GetDataSource4.ashx',
                 データ型: 'json',
                 ColModel: [
                 { 表示: '地址ID'、名前: 'AddressID'、幅: 40、並べ替え可能: true、整列: 'center' },
                 { 表示: '特定地址1'、名前: 'AddressLine1'、幅: 140、並べ替え可能: true、整列: 'left' },
               &nb