最近、Extjs が非常に人気があります。CRM/HRM を行う企業は現在、Extjs をプロジェクトで使用する方法を考えていますが、その理由は非常に単純です。大きすぎる/大きすぎる/バカだからです。ソースコードはデバッグが困難です。でも、Extjs の美しいテーブルと強力な機能には、本当によだれが出てきます。以前、外国人が Extjs 用に似たような Jquery プラグインを書いていたことを思い出し、Jquery プラグインの海から探してみました（笑）。見つけました。私のJqueryの方が優れているようです。小型でシンプルで、好きなものをDIYできます。全体的な計画では、ネットワーク送信が 80 KB を超えず、500 KB の Extjs と比べてどれだけ速度が小さいかはわかりません。 。 。
ただし、インターネット上の FlexiGrid に関する情報のほとんどは PHP または Java で書かれているため、兄がそれを修正して Extjs テーブル実装の模倣バージョンを作成しただけです。これが皆さんの役に立つことを願っています。
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
システムを使用しています;
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 を返します;
}
}
}
}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
