Baru -baru ini, EXTJS benar -benar sangat populer. Selama itu adalah perusahaan terkait CRM/HRM, sekarang sedang memikirkan bagaimana menggunakannya dalam proyek, tetapi saya tidak berani. Alasannya sangat sederhana: terlalu besar/terlalu bodoh/kode sumber sulit untuk debug. Tapi meja dan fungsi yang indah dari extj benar -benar membuat saya mengeluarkan air liur. Saya ingat seorang kawan asing menulis plug-in jQuery yang serupa untuk extjs, jadi saya mencarinya di lautan plug-in jQuery. Haha, saya benar -benar menemukannya. Sepertinya jQuery saya lebih baik. Ini kecil dan sederhana, seperti mesin mobil yang bagus. Saya bisa DIY apapun yang saya inginkan. Itu sangat nyaman. Solusi keseluruhan tidak melebihi 80kB dalam transmisi jaringan, dan kecepatannya lebih kecil dari extJs dengan ukuran 500kB. . .
Alamat Unduh: http://code.google.com/p/flexigrid/
Namun, karena sebagian besar informasi tentang Flexigrid di internet ditulis dalam PHP atau Java, saya cukup memodifikasinya dan membuat versi peniru dari implementasi tabel EXTJS, berharap ini akan membantu semua orang.
Penggunaan Dasar:
1 Pada dasarnya, penggunaannya sangat sederhana. Anda hanya perlu menambahkan JQuery Library dan Flexigrid's JS untuk memformat dan mempercantik meja.
Salinan kode adalah sebagai berikut:
<tautan rel = "stylesheet" type = "text/css" href = "css/flexigrid/flexigrid.css">
<type skrip = "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>-%>
<type skrip = "Teks/JavaScript">
$ ("Dokumen"). Ready (function () {
$ ('#flexme1'). Flexigrid ();
$ ('#flexme2'). Flexigrid ();
});
</script>
2 Cukup tambahkan formulir yang perlu diformat
Salinan kode adalah sebagai berikut:
<h1>
Flexigrid Table-1 yang termudah </h1>
<tabel id = "flexme1">
<head>
<tr>
<th>
Kol 1
</th>
<th>
Kol 2
</th>
<th>
Kol 3 adalah nama tajuk yang panjang
</th>
<th>
Kol 4
</th>
</tr>
</head>
<tbody>
<tr>
<td>
Ini adalah data 1 dengan konten yang meluap
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
</tbody>
</boable>
<p>
</p>
<h1>
Flexigrid Table-2 termudah </h1>
<tabel id = "flexme2">
<head>
<tr>
<th>
Kol 1
</th>
<th>
Kol 2
</th>
<th>
Kol 3 adalah nama tajuk yang panjang
</th>
<th>
Kol 4
</th>
</tr>
</head>
<tbody>
<tr>
<td>
Ini adalah data 1 dengan konten yang meluap
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
<tr>
<td>
Ini adalah data 1
</td>
<td>
Ini adalah data 2
</td>
<td>
Ini adalah data 3
</td>
<td>
Ini adalah data 4
</td>
</tr>
</tbody>
</boable>
Untuk meningkatkan efek penggunaan dasar Flexigrid, kami dapat melakukan penyesuaian dasar untuk itu melalui parameter
Header khusus
Implementasi Kode Khusus:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
$ ("Dokumen"). Ready (function () {
$ ('#flexme1'). Flexigrid ({
Colmodel: [
{display: 'iso', nama: 'iso', lebar: 40, sortable: true, align: 'center'},
{display: 'name', name: 'name', width: 180, sortable: true, align: 'left'},
{display: 'cetak nama', nama: 'printable_name', lebar: 120, sortable: true, align: 'left'},
{display: 'iso3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true},
{display: 'number code', name: 'numcode', width: 80, sortable: true, align: 'right'}
]
});
$ ('#flexme2'). Flexigrid ({
Colmodel: [
{display: 'iso', nama: 'iso', lebar: 40, sortable: true, align: 'center'},
{display: 'name', name: 'name', width: 180, sortable: true, align: 'left'},
{display: 'cetak nama', nama: 'printable_name', lebar: 120, sortable: true, align: 'left'},
{display: 'iso3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true},
{display: 'number code', name: 'numcode', width: 80, sortable: true, align: 'right'}
],
Sortname: "iso",
Sortorder: "ASC",
});
});
</script>
Lipat Kustom, Implementasi Penyortiran Kustom
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
$ ("Dokumen"). Ready (function () {
$ ('#flexme1'). Flexigrid ({
Colmodel: [
{display: 'iso', nama: 'iso', lebar: 40, sortable: true, align: 'center'},
{display: 'name', name: 'name', width: 180, sortable: true, align: 'left'},
{display: 'cetak nama', nama: 'printable_name', lebar: 120, sortable: true, align: 'left'},
{display: 'iso3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true},
{display: 'number code', name: 'numcode', width: 80, sortable: true, align: 'right'}
], Lebar: 700, Tinggi: 300, UsePager: True, ShowTableToggLEBTN: Benar, Judul: "Klik saya untuk runtuh"
});
$ ('#flexme2'). Flexigrid ({
Colmodel: [
{display: 'iso', nama: 'iso', lebar: 40, sortable: true, align: 'center'},
{display: 'name', name: 'name', width: 180, sortable: true, align: 'left'},
{display: 'cetak nama', nama: 'printable_name', lebar: 120, sortable: true, align: 'left'},
{display: 'iso3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true},
{display: 'number code', name: 'numcode', width: 80, sortable: true, align: 'right'}
],
SearchItems: [
{display: 'iso', name: 'iso'},
{display: 'name', name: 'name', isDefault: true}
],
Sortname: "iso",
Sortorder: "ASC",
Judul: "Hasil Tes Saya",
Lebar: 700,
Tinggi: 300,
UsePager: Benar, ShowTableToggLEBTN: Benar, RP: 10
});
});
</script>
Penggunaan Lanjutan:
1. Prosedur tersimpan yang digunakan untuk pagination
Salinan kode adalah sebagai berikut:
Buat Prosedur [DBO]. [Spall_Returnrows]
(
@Sql nvarchar (4000),
@Page int,
@Recsperpage int,
@Id varchar (255),
@Sort varchar (255)
)
SEBAGAI
Deklarasi @str nvarchar (4000)
Set @str = 'pilih atas'+
Cast (@Recsperpage sebagai Varchar (20))+
' * From ('+@sql+') t di mana t.'+
@Id+
'Not in (pilih atas'+
Cast ((@recsperpage*(@page-1)) sebagai varchar (20))+
''+
@Id+
' DARI ('
+@SQL+
') T9 memesan'+
@Sort+
') Memesan dengan'+
@Menyortir
Cetak @str
Exec sp_executesql @str
2 Implementasi Transmisi Data JSON Asinkron
Salinan kode adalah sebagai berikut:
menggunakan sistem;
menggunakan system.collections.generic;
menggunakan System.configuration;
menggunakan System.data;
menggunakan system.data.sqlclient;
menggunakan System.linq;
menggunakan System.Text;
menggunakan System.web;
menggunakan System.Web.Services;
menggunakan newtonsoft.json;
Namespace Griddemo
{
/// <summary>
/// Deskripsi Ringkasan dari $ CodeBehindClassName $
/// </summary>
[WebService (namespace = "http://tempuri.org/")]]
[WebServiceBinding (conformSto = wsiprofiles.basicprofile1_1)]]
Kelas Publik GetDataSource4: ihttphandler
{
Public Void ProcessRequest (konteks httpcontext)
{
Context.Response.ContentType = "Teks/Polos";
// Dapatkan halaman saat ini
string currentPage = context.Request ["page"];
// Dapatkan berapa banyak yang ditampilkan per halaman
string pageshowlimit = context.Request ["rp"];
// Dapatkan kunci utama
String TableId = Context.Request ["soTname"];
// Dapatkan metode penyortiran
String orderMethod = Context.Request ["SortOrder"];
// Dapatkan bidang untuk disaring
string filterfield = context.Request ["qType"];
// Dapatkan konten untuk difilter
String FilterfieldContext;
if (context.request.form ["letter_pressed"] == null)
{
FilterfieldContext = "";
}
kalau tidak
{
FilterfieldContext = context.Request ["letter_pressed"];
}
// Dapatkan jumlah total baris tabel
String tablerowcount = sqlhelper.executescalar (configurationManager.appsettings ["sql2"],
CommandType.text,
"Pilih Hitung (*) dari Person.Address"
) .Tostring ();
// Dapatkan SQL utama
Sqlparameter sql = sqlparameter baru ("@sql", sqldbtype.nvarchar);
//Sql.value = "Pilih * dari Person.Address";
if (filterfieldcontext.length == 0 || filterfield.length == 0)
{
Sql.value = "SELECT ADamat, ALCHA kedallam,
}
kalau tidak
{
string [] tmp = filterfield.split (',');
Sql.value = "SELECT ADamat, ALCHA kedallam,
}
Sqlparameter page = sqlparameter baru ("@page", sqldbtype.int);
Page.value = convert.toint32 (currentpage);
Sqlparameter recsperpage = sqlparameter baru ("@recsperpage", sqldbtype.int);
Recsperpage.value = convert.toint32 (pageshowlimit);
Sqlparameter id = sqlparameter baru ("@id", sqldbtype.varchar);
Id.value = TableId;
Sqlparameter sort = sqlparameter baru ("@sort", sqldbtype.varchar);
Sort.value = TableId;
// Dapatkan meja
DataTable returnTable = sqlhelper.executedataSet (configurationManager.appsettings ["sql2"],
CommandType.StoredProcedure, "Spall_Returnrows",
SQLParameter baru []
{
SQL, halaman, recsperpage, id, urutkan
}). Tabel [0];
Context.Response.write (dttoson2 (returntable, currentpage, tablerowcount));
}
/// <summary>
/// JSON Format Konversi
/// </summary>
/// <param name = "dt"> tabel data </param>
/// <param name = "halaman"> halaman saat ini </param>
/// <param name = "Total"> Berapa baris total </param>
/// <Returns> </returns>
Public Static String DTTOSON2 (DataTable DT, String Page, String Total)
{
StringBuilder jsonstring = New StringBuilder ();
jsonstring.appendline ("{");
jsonstring.appendFormat ("halaman: {0},/n", halaman);
jsonstring.appendFormat ("Total: {0},/n", total);
JSonstring.Appendline ("Baris: [");
untuk (int i = 0; i <dt.rows.count; i ++)
{
jsonstring.append ("{");
jsonstring.appendFormat ("id: '{0}', sel: [", dt.rows [i] [0] .toString ());
untuk (int j = 0; j <dt.columns.count; j ++)
{
if (j == dt.columns.count - 1)
{
jsonstring.appendFormat ("'{0}'", dt.rows [i] [j] .toString ());
}
kalau tidak
{
jsonstring.appendFormat ("'{0}',", dt.rows [i] [j] .toString ());
}
if (j == dt.columns.count - 1)
{
jsonstring.appendFormat (", '{0}'", "<input type =/" tombol/"value =/" view/"id =/" ss/"ontClick =/" ss (" + dt.rows [i] [0] .tostring () +")/"/");
}
}
jsonstring.append ("]");
if (i == dt.rows.count - 1)
{
JSonstring.Appendline ("}");
}
kalau tidak
{
jsonstring.Appendline ("},");
}
}
jsonstring.append ("]");
JSonstring.Appendline ("}");
return jsonstring.tostring ();
}
BOOL PUBLIK ISREUSABLE
{
mendapatkan
{
mengembalikan false;
}
}
}
}
Implementasi 3 halaman
Salinan kode adalah sebagai berikut:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "complex-8.aspx.cs" mewariskan = "griddemo.complex_8" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<title> </title>
<tautan rel = "stylesheet" type = "text/css" href = "/css/flexigrid/flexigrid.css"/>
<type skrip = "Text/JavaScript" src = "/lib/jQuery/jQuery.js"> </script>
<script type = "text/javaScript" src = "flexigrid.js"> </script>
<tautan type = "text/css" rel = "stylesheet" href = "facebox/facebox.css"/>
<tautan type = "text /css" rel = "stylesheet" href = "body.css" />
<script type = "text/javascript" src = "facebox/facebox.js"> </script>
<type skrip = "Teks/JavaScript">
$ ("Dokumen"). Ready (function () {
$ ("#flex1"). Flexigrid
({
URL: 'getDataSource4.ashx',
DataType: 'json',
Colmodel: [
{display: 'addressid', name: 'addressId', width: 40, sortable: true, align: 'center'},
{display: 'Alamat spesifik 1', nama: 'addressline1', lebar: 140, sortable: true, align: 'left'},
{display: 'Alamat spesifik 2', nama: 'addressline2', lebar: 80, sortable: true, align: 'left'},
{display: 'kode pos', nama: 'postalcode', lebar: 80, sortable: true, align: 'left'},
{display: 'city', name: 'city', width: 80, sortable: true, align: 'left'},
{display: 'opt', name: 'opt', width: 80, sortable: true, align: 'left'}
],
Tombol: [
{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: [
{display: 'city', name: 'city', isDefault: true},
{display: 'kode pos', nama: 'postalcode'}
],
UsePager: Benar,
Judul: 'Informasi Pelanggan',
Userp: Benar,
RP: 10,
showtableTogglebtn: true,
Lebar: 700,
Tinggi: 200,
Rpoptions: [10, 15, 20, 25, 40, 60], // Jumlah hasilnya dapat dipilih per halaman
procmsg: 'Harap tunggu data dimuat ...', // pesan cepat sedang diproses
Diubah Ulang: Salah, // Apakah itu dapat diskalakan?
Sortname: "AddressID",
// sortorder: "asc", // kolom ini tidak dapat digunakan karena prosedur tersimpan
});
});
function sortalpha (com) {
jQuery ('#flex1'). FlexOptions ({newp: 1, params: [{name: 'letter_pressed', value: com}, {name: 'qtype', value: $ ('pilih [name = qtype]'). val ()}]});
jQuery ("#flex1"). FlexReload ();
}
Fungsi SSS (Data)
{
var temp = eval (data);
// jQuery.facebox (temp);
jQuery.faceBox ({ajax: 'default.aspx? id ='+temp})
}
</script>
</head>
<body>
<able>
</boable>
</body>
</html>