使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法分享
更新時(shí)間：2014年12月16日 17:25:12 投稿：hebedich
這篇文章主要分享了使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法，非常的實(shí)用，這里推薦給有相同需求的小伙伴
近一段時(shí)間Extjs真的是風(fēng)光無(wú)限好，只要是個(gè)做CRM/HRM之類的企業(yè)現(xiàn)在都在琢磨怎么在項(xiàng)目中用它，不過(guò)兄弟我可是不敢，原因很簡(jiǎn)單：太大/太笨/源碼不好調(diào)試。但是對(duì)于Extjs漂亮的表格與功能的強(qiáng)大，實(shí)在是讓我垂涎三尺，記得以前有個(gè)老外同志寫過(guò)一個(gè)類似的Extjs的Jquery插件，所以就在Jquery的插件海洋中一頓海找，呵呵，還真讓我找到了?？磥?lái)還是我的Jquery好，小巧簡(jiǎn)單好像一部好的汽車引擎，我想要什么就可以自已DIY，真是方便?？傮w方案在網(wǎng)絡(luò)傳輸上不超過(guò)80KB，速度比500KB大小的Extjs不知道要小上多少哪。。。
下載地址：http://code.google.com/p/flexigrid/
不過(guò)由于FlexiGrid在互聯(lián)網(wǎng)上的大部分資料都是用PHP或者java寫的，所以兄弟簡(jiǎn)單的對(duì)它進(jìn)行了改制，也做了一個(gè)山寨版的Extjs表格實(shí)現(xiàn)，希望對(duì)大家有幫助。
基本使用：
1 基本使用是非常簡(jiǎn)單的，只需要加入Jquery庫(kù)與FlexiGrid的JS即可以對(duì)表格進(jìn)行格式化與美化.
復(fù)制代碼 代碼如下:
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="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>--%>
<script type="text/javascript">
$("document").ready(function() {
$('#flexme1').flexigrid();
$('#flexme2').flexigrid();
});
</script>
2 加入需要格式化的表格即可
復(fù)制代碼 代碼如下:
<h1>
最簡(jiǎn)單的flexigrid表格-1</h1>
<table id="flexme1">
<thead>
<tr>
<th width="100">
Col 1
</th>
<th width="100">
Col 2
</th>
<th width="100">
Col 3 is a long header name
</th>
<th width="300">
Col 4
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
This is data 1 with overflowing content
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
</tbody>
</table>
<p>
</p>
<h1>
最簡(jiǎn)單的flexigrid表格-2</h1>
<table id="flexme2">
<thead>
<tr>
<th width="100">
Col 1
</th>
<th width="100">
Col 2
</th>
<th width="100">
Col 3 is a long header name
</th>
<th width="300">
Col 4
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
This is data 1 with overflowing content
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
<tr>
<td>
This is data 1
</td>
<td>
This is data 2
</td>
<td>
This is data 3
</td>
<td>
This is data 4
</td>
</tr>
</tbody>
</table>
為了增加FlexiGrid的基本使用效果，我們可以通過(guò)參數(shù)對(duì)其進(jìn)行基本的調(diào)整
自定義表頭
具體代碼實(shí)現(xiàn)：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$("document").ready(function() {
$('#flexme1').flexigrid({
colModel: [
{ display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
{ display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
{ display: 'Printable Name', name: 'printable_name', width: 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', name: 'iso', width: 40, sortable: true, align: 'center' },
{ display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
{ display: 'Printable Name', name: 'printable_name', width: 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>
自定義折疊，自定義排序的實(shí)現(xiàn)
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$("document").ready(function() {
$('#flexme1').flexigrid({
colModel: [
{ display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
{ display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
{ display: 'Printable Name', name: 'printable_name', width: 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' }
], width: 700, height: 300, usepager: true, showTableToggleBtn: true, title: "點(diǎn)我折疊"
});
$('#flexme2').flexigrid({
colModel: [
{ display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
{ display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
{ display: 'Printable Name', name: 'printable_name', width: 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",
title: "我的測(cè)試效果",
width: 700,
height: 300,
usepager: true, showTableToggleBtn: true, rp: 10
});
});
</script>
高級(jí)使用：
1 分頁(yè)用到的存儲(chǔ)過(guò)程
復(fù)制代碼 代碼如下:
Create PROCEDURE [dbo].[spAll_ReturnRows]
(
@SQL nVARCHAR(4000),
@Page int,
@RecsPerPage int,
@ID VARCHAR(255),
@Sort VARCHAR(255)
)
AS
DECLARE @Str nVARCHAR(4000)
SET @Str='SELECT TOP '+
CAST(@RecsPerPage AS VARCHAR(20))+
' * FROM ('+@SQL+') T WHERE T.'+
@ID+
' NOT IN (SELECT TOP '+
CAST((@RecsPerPage*(@Page-1)) AS VARCHAR(20))+
' '+
@ID+
' FROM ('
+@SQL+
') T9 ORDER BY '+
@Sort+
') ORDER BY '+
@Sort
PRINT @Str
EXEC sp_ExecuteSql @Str
2 異步JSON數(shù)據(jù)傳輸實(shí)現(xiàn)
復(fù)制代碼 代碼如下:
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Services;
using Newtonsoft.Json;
namespace GridDemo
{
/// <summary>
/// $codebehindclassname$ 的摘要說(shuō)明
/// </summary>
[WebService(Namespace = " [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GetDataSource4 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//得到當(dāng)前頁(yè)
string CurrentPage = context.Request["page"];
//得到每頁(yè)顯示多少
string PageShowLimit = context.Request["rp"];
//得到主鍵
string TableID = context.Request["sortname"];
//得到排序方法
string OrderMethod = context.Request["sortorder"];
//得到要過(guò)濾的字段
string FilterField = context.Request["qtype"];
//得到要過(guò)濾的內(nèi)容
string FilterFieldContext;
if (context.Request.Form["letter_pressed"] == null)
{
FilterFieldContext = "";
}
else
{
FilterFieldContext = context.Request["letter_pressed"];
}
//得到表的總行數(shù)
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";
}
else
{
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",
new SqlParameter[]
{
SQL,Page,RecsPerPage,ID,Sort
}).Tables[0];
context.Response.Write(DtToSON2(returnTable, CurrentPage, TableRowCount));
}
/// <summary>
/// JSON格式轉(zhuǎn)換
/// </summary>
/// <param name="dt">DataTable表</param>
/// <param name="page">當(dāng)前頁(yè)</param>
/// <param name="total">總計(jì)多少行</param>
/// <returns></returns>
public static string DtToSON2(DataTable dt, string page, string total)
{
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());
}
else
{
jsonString.AppendFormat("'{0}',", dt.Rows[i][j].ToString());
}
if (j == dt.Columns.Count - 1)
{
jsonString.AppendFormat(",'{0}'", "<input type=\"button\" value=\"查看\" id=\"sss\" onclick=\"sss(" + dt.Rows[i][0].ToString() + ")\" />");
}
}
jsonString.Append("]");
if (i == dt.Rows.Count - 1)
{
jsonString.AppendLine("}");
}
else
{
jsonString.AppendLine("},");
}
}
jsonString.Append("]");
jsonString.AppendLine("}");
return jsonString.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
3 頁(yè)面實(shí)現(xiàn)
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Complex-8.aspx.cs" Inherits="GridDemo.Complex_8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="/css/flexigrid/flexigrid.css" />
<script type="text/javascript" src="/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
<link type="text/css" rel="Stylesheet" href="facebox/facebox.css" />
<link type="text/css" rel="Stylesheet" href="body.css" />
<script type="text/javascript" src="facebox/facebox.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#flex1").flexigrid
({
url: 'GetDataSource4.ashx',
dataType: 'json',
colModel: [
{ display: '地址ID', name: 'AddressID', width: 40, sortable: true, align: 'center' },
{ display: '具體地址1', name: 'AddressLine1', width: 140, sortable: true, align: 'left' },
{ display: '具體地址2', name: 'AddressLine2', width: 80, sortable: true, align: 'left' },
{ display: '郵編', name: 'PostalCode', width: 80, sortable: true, align: 'left' },
{ display: '城市', name: 'City', width: 80, sortable: true, align: 'left' },
{ display: '操作', name: 'Opt', width: 80, sortable: true, align: 'left' }
],
buttons: [
{ 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: '城市', name: 'City' , isdefault: true},
{ display: '郵編', name: 'PostalCode' }
],
usepager: true,
title: '客戶信息',
useRp: true,
rp: 10,
showTableToggleBtn: true,
width: 700,
height: 200,
rpOptions: [10, 15, 20, 25, 40, 60], //可選擇設(shè)定的每頁(yè)結(jié)果數(shù)
procmsg: '請(qǐng)等待數(shù)據(jù)正在加載中 …', //正在處理的提示信息
resizable: false, //是否可伸縮
sortname: "AddressID",
//sortorder: "asc",//此列由于存儲(chǔ)過(guò)程原因無(wú)法用
});
});
function sortAlpha(com) {
jQuery('#flex1').flexOptions({ newp: 1, params: [{ name: 'letter_pressed', value: com }, { name: 'qtype', value: $('select[name=qtype]').val()}] });
jQuery("#flex1").flexReload();
}
function sss(data)
{
var temp=eval(data);
// jQuery.facebox(temp);
jQuery.facebox({ ajax: 'Default.aspx?id='+temp })
}
</script>
</head>
<body>
<table>
</table>
</body>
</html>
相關(guān)文章
jQuery仿天貓實(shí)現(xiàn)超炫的加入購(gòu)物車
jquery仿照天貓購(gòu)物車收藏商品特效,非常實(shí)用的一款商品加入購(gòu)物車特效，動(dòng)畫效果非常炫麗。2015-05-05
我原以為我對(duì)jQuery的使用還過(guò)得去，可是經(jīng)過(guò)昨天的工作，我才發(fā)現(xiàn)，原來(lái)，我才算是剛剛?cè)腴T。好吧。下面，我簡(jiǎn)單講一下，我昨天遇到的問(wèn)題以及解決方案2012-08-08
這篇文章主要介紹了JQuery解析XML的方法,總結(jié)分析了常用的jQuery解析xml文件的相關(guān)技巧,需要的朋友可以參考下2016-04-04
JavaScript的jQuery庫(kù)插件的簡(jiǎn)要開發(fā)指南
這篇文章主要介紹了JavaScript的jQuery庫(kù)插件的簡(jiǎn)要開發(fā)指南,分為基于選擇器的插件和不基于選擇器的插件兩種情況,需要的朋友可以參考下2015-08-08
jquery分頁(yè)插件jquery.pagination.js使用方法解析
這篇文章主要針對(duì)js分頁(yè)插件jquery.pagination.js使用方法進(jìn)行解析，很實(shí)用的分頁(yè)插件，感興趣的小伙伴們可以參考一下2016-04-04
animate動(dòng)畫示例(淚奔的小孩)及stop和delay的使用
實(shí)現(xiàn)原理：停止動(dòng)畫，當(dāng)一個(gè)元素有一個(gè)動(dòng)畫隊(duì)列時(shí)，停止的是當(dāng)前動(dòng)畫，緊接著執(zhí)行下一個(gè)動(dòng)畫，具體代碼如下，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery動(dòng)畫有所幫助2013-05-05
jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁(yè)/選項(xiàng)卡
jQuery EasyUI API 中文文檔 - 標(biāo)簽頁(yè)/選項(xiàng)卡（Tabs）,學(xué)習(xí)jQuery EasyUI的朋友可以參考下。2011-10-10
BootStrap網(wǎng)頁(yè)中代碼顯示<code><pre>用法詳解
網(wǎng)頁(yè)中代碼的顯示，包括行中代碼顯示；成段的代碼顯示.本文給大家介紹bootstrap網(wǎng)頁(yè)中代碼顯示<code><pre>用法詳解，感興趣的朋友一起看看吧2016-10-10
jQuery中(function(){})()執(zhí)行順序的理解
function的順序是這樣的：先計(jì)算第一個(gè)小括號(hào)，發(fā)現(xiàn)里面的表達(dá)式是一個(gè)函數(shù)，返會(huì)該匿名函數(shù)的引用（指針），最后一個(gè)括號(hào)則是建立匿名函數(shù)的實(shí)參和并執(zhí)行，感興趣的你可以參考下本文2013-03-03
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)高亮,同時(shí)其他同級(jí)元素變暗的效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)高亮,同時(shí)其他同級(jí)元素變暗的效果,涉及jQuery基于事件響應(yīng)機(jī)制的頁(yè)面元素遍歷與屬性變換操作技巧,需要的朋友可以參考下2016-09-09