Gunakan FlexiGrid untuk mencapai kaedah kesan jadual Extjs sharing

Extjs sangat popular sejak kebelakangan ini Syarikat yang melakukan CRM/HRM kini memikirkan cara menggunakannya dalam projek, tetapi saya tidak berani melakukannya: terlalu besar/terlalu besar Bodoh/. Kod sumber sukar untuk dinyahpepijat. Tetapi jadual yang cantik dan fungsi Extjs yang hebat benar-benar membuatkan saya terliur menjumpainya. Nampaknya Jquery saya lebih baik. Ia adalah kecil dan ringkas, seperti enjin kereta yang bagus. Saya boleh DIY apa sahaja yang saya mahu. Pelan keseluruhan tidak melebihi 80KB dalam penghantaran rangkaian, dan saya tidak tahu berapa lebih kecil kelajuannya daripada Extjs 500KB. . .

Alamat muat turun: http://code.google.com/p/flexigrid/

Namun, memandangkan kebanyakan maklumat mengenai FlexiGrid di Internet ditulis dalam PHP atau Java, abang saya hanya mengubah suai dan membuat versi copycat bagi pelaksanaan jadual Extjs saya harap ia akan membantu semua orang.

Penggunaan asas:

1 Penggunaan asas adalah sangat mudah Anda hanya perlu menambah perpustakaan Jquery dan FlexiGrid JS untuk memformat dan mencantikkan jadual.

Salin kod Kod adalah seperti berikut: --%> $("dokumen").ready(function() { $('#flexme1').flexigrid(); $('#flexme2').flexigrid(); }); 2 Cuma tambah jadual yang perlu diformat

Salin kod Kod adalah seperti berikut: 最简单的flexigrid表格-1 Kol 1 Kol 2 Kol 3 ialah nama tajuk panjang Kol 4 Ini ialah data 1 dengan kandungan yang melimpah Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 This is data 4 This is data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 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 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 This is data 4 This is data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 This is data 4 This is data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 Ini adalah data 4 Ini adalah data 1 Ini adalah data 2 Ini adalah data 3 This is data 4

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

自定义表头

具体代码实现：

复制代码 代码如下: $("dokumen").ready(function() { $('#flexme1').flexigrid({ colModel: [ { paparan: 'ISO', nama: 'iso', lebar: 40, boleh diisih: benar, sejajar: 'tengah' }, { paparan: 'Nama', nama: 'nama', lebar: 180, boleh diisih: benar, jajar: 'kiri' }, { paparan: 'Nama Boleh Cetak', nama: 'nama_cetak', lebar: 120, boleh diisih: benar, sejajar: 'kiri' }, { paparan: 'ISO3', nama: 'iso3', lebar: 130, boleh diisih: benar, jajar: 'kiri', sembunyikan: benar }, { paparan: 'Kod Nombor', nama: 'numcode', lebar: 80, boleh diisih: benar, jajar: 'kanan' } ] }); $('#flexme2').flexigrid({ colModel: [ { paparan: 'ISO', nama: 'iso', lebar: 40, boleh diisih: benar, sejajar: 'tengah' }, { paparan: 'Nama', nama: 'nama', lebar: 180, boleh diisih: benar, jajar: 'kiri' }, { paparan: 'Nama Boleh Cetak', nama: 'nama_cetak', lebar: 120, boleh diisih: benar, sejajar: 'kiri' }, { paparan: 'ISO3', nama: 'iso3', lebar: 130, boleh diisih: benar, jajar: 'kiri', sembunyikan: benar }, { paparan: 'Kod Nombor', nama: 'numcode', lebar: 80, boleh diisih: benar, jajar: 'kanan' } ], nama isihan: "iso", susun atur: "asc", }); }); 自定义折叠，自定义排序的实现

复制代码 代码如下: $("dokumen").ready(function() { $('#flexme1').flexigrid({ colModel: [ { paparan: 'ISO', nama: 'iso', lebar: 40, boleh diisih: benar, sejajar: 'tengah' }, { paparan: 'Nama', nama: 'nama', lebar: 180, boleh diisih: benar, jajar: 'kiri' }, { paparan: 'Nama Boleh Cetak', nama: 'nama_cetak', lebar: 120, boleh diisih: benar, sejajar: 'kiri' }, { paparan: 'ISO3', nama: 'iso3', lebar: 130, boleh diisih: benar, jajar: 'kiri', sembunyikan: benar }, { paparan: 'Kod Nombor', nama: 'numcode', lebar: 80, boleh diisih: benar, jajar: 'kanan' } ], lebar: 700, tinggi: 300, usepager: benar, showTableToggleBtn: benar, tajuk: "点我折叠" }); $('#flexme2').flexigrid({ colModel: [ { paparan: 'ISO', nama: 'iso', lebar: 40, boleh diisih: benar, sejajar: 'tengah' }, { paparan: 'Nama', nama: 'nama', lebar: 180, boleh diisih: benar, jajar: 'kiri' }, { paparan: 'Nama Boleh Cetak', nama: 'nama_cetak', lebar: 120, boleh diisih: benar, sejajar: 'kiri' }, { paparan: 'ISO3', nama: 'iso3', lebar: 130, boleh diisih: benar, jajar: 'kiri', sembunyikan: benar }, { paparan: 'Kod Nombor', nama: 'numcode', lebar: 80, boleh diisih: benar, jajar: 'kanan' } ], item carian: [ { paparan: 'ISO', nama: 'iso' }, { paparan: 'Nama', nama: 'nama', isdefault: benar } ], nama isihan: "iso", susun atur: "asc", tajuk: "我的测试效果", lebar: 700, ketinggian: 300, usepager: benar, showTableToggleBtn: benar, rp: 10 }); }); 高级使用：

1 分页用到的存储过程

复制代码 代码如下: Buat PROSEDUR [dbo].[spAll_ReturnRows] ( @SQL nVARCHAR(4000), @Halaman int, @RecsPerPage int, @ID VARCHAR(255), @Isih VARCHAR(255) ) SEBAGAI ISYTIHKAN @Str nVARCHAR(4000) SET @Str='PILIH ATAS ' CAST(@RecsPerPage AS VARCHAR(20)) ' * DARI ( ' @SQL ' ) T MANA T.' @ID ' TIDAK MASUK (PILIH ATAS ' CAST((@RecsPerPage*(@Page-1)) SEBAGAI VARCHAR(20)) ' ' @ID ' DARIPADA (' @SQL ') T9 PESANAN OLEH ' @Isih ') PESANAN OLEH ' @Isih CETAK @Str EXEC sp_ExecuteSql @Str

2 异步JSON数据传输实现

复制代码 代码如下: menggunakan Sistem; menggunakan System.Collections.Generic; menggunakan System.Configuration; menggunakan System.Data; menggunakan System.Data.SqlClient; menggunakan System.Linq; menggunakan System.Teks; menggunakan System.Web; menggunakan System.Web.Services; menggunakan Newtonsoft.Json; ruang nama GridDemo { /// /// $codebehindclassname$ 的摘要说明 /// [WebService(Namespace = " http://tempuri.org/ ")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] kelas awam GetDataSource4 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "teks/plain"; //得到当前页 rentetan CurrentPage = context.Request["page"]; //得到每页显示多少 rentetan PageShowLimit = konteks.Permintaan["rp"]; //得到主键 string TableID = context.Request["sortname"]; //得到排序方法 rentetan OrderMethod = context.Request["sortorder"]; //得到要过滤的字段 string FilterField = context.Request["qtype"]; //得到要过滤的内容 rentetan FilterFieldContext; jika (konteks.Permintaan.Borang["surat_ditekan"] == batal) { FilterFieldContext = ""; } lain { FilterFieldContext = konteks.Permintaan["huruf_ditekan"]; } //得到表的总行数 rentetan TableRowCount = SqlHelper.ExecuteScalar(ConfigurationManager.AppSettings["SQL2"], CommandType.Teks, "pilih kiraan(*) daripada Orang.Alamat" ).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, PostCode, City FROM Person.Address"; } lain { string[] tmp = FilterField.Split(','); SQL.Value = "SELECT AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Alamat di mana " tmp[0] " like '" FilterFieldContext "%'"; } Halaman SqlParameter = new SqlParameter("@Page", SqlDbType.Int); Page.Value = Convert.ToInt32(CurrentPage); SqlParameter RecsPerPage = new SqlParameter("@RecsPerPage", SqlDbType.Int); RecsPerPage.Value = Convert.ToInt32(PageShowLimit); ID SqlParameter = SqlParameter baharu("@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", SqlParameter[] baharu { SQL,Page,RecsPerPage,ID,Isih }).Jadual[0]; context.Response.Write(DtToSON2(returnTable, CurrentPage, TableRowCount)); } /// /// JSON格式转换 /// /// DataTable表 /// 当前页 /// 总计多少行 /// rentetan statik awam DtToSON2(DataTable dt, halaman rentetan, jumlah rentetan) { StringBuilder jsonString = new StringBuilder(); jsonString.AppendLine("{"); jsonString.AppendFormat("halaman: {0},n", halaman); jsonString.AppendFormat("jumlah: {0},n", jumlah); jsonString.AppendLine("baris: ["); untuk (int i = 0; i { jsonString.Append("{"); jsonString.AppendFormat("id:'{0}',cell:[", dt.Rows[i][0].ToString()); untuk (int j = 0; j { if (j == dt.Columns.Count - 1) { jsonString.AppendFormat("'{0}'", dt.Rows[i][j].ToString()); } lain { jsonString.AppendFormat("'{0}',", dt.Rows[i][j].ToString()); } if (j == dt.Columns.Count - 1) { jsonString.AppendFormat(",'{0}'", " "); } } jsonString.Append("]"); jika (i == dt.Rows.Count - 1) { jsonString.AppendLine("}"); } lain { jsonString.AppendLine("},"); } } jsonString.Append("]"); jsonString.AppendLine("}"); kembalikan jsonString.ToString(); } public bool Boleh Digunakan Semula { dapatkan { pulangkan palsu; } } } } 3 页面实现

复制代码 代码如下: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > http://www.w3.org/1999/xhtml "> $("dokumen").ready(function() { $("#flex1").flexigrid ({ url: 'GetDataSource4.ashx', dataType: 'json', colModel: [ { paparan: '地址ID', nama: 'AddressID', lebar: 40, boleh diisih: benar, sejajar: 'tengah' }, { paparan: '具体地址1', nama: 'AddressLine1', lebar: 140, boleh diisih: benar, jajar: 'kiri' }, &nb

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Gunakan FlexiGrid untuk mencapai kaedah kesan jadual Extjs sharing_jquery