使用FlexiGrid实现Extjs表格的效果
2009-04-19 12:40
671 查看
近一段时间Extjs真的是风光无限好，只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨/源码不好调试。但是对于Extjs漂亮的表格与功能的强大，实在是让我垂涎三尺，记得以前有个老外同志写过一个类似的Extjs的Jquery插件，所以就在Jquery的插件海洋中一顿海找，呵呵，还真让我找到了。看来还是我的Jquery好，小巧简单好像一部好的汽车引擎，我想要什么就可以自已DIY，真是方便。 总体方案在网络传输上不超过80KB，速度比500KB大小的Extjs不知道要小上多少哪。。。 有段时间不写东西了，怕说的不清楚。有需要代码的朋友可以访问我的网盘：http://www.box.net/shared/khhs7olp1p
下载地址：http://code.google.com/p/flexigrid/ 不过由于FlexiGrid在互联网上的大部分资料都是用PHP或者java写的，所以兄弟简单的对它进行了改制，也做了一个山寨版的Extjs表格实现，希望对大家有帮助。
基本使用：
1 基本使用是非常简单的，只需要加入Jquery库与FlexiGrid的JS即可以对表格进行格式化与美化.
1: <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
2:
3: <script type="text/javascript" src="lib/jquery/jquery-1.2.6.min.js"></script>
4:
5: <script type="text/javascript" src="flexigrid.pack.js"></script>
6:
7: <%--<script type="text/javascript" src="lib/jquery/jquery-1.2.6-vsdoc-cn.js"></script>--%>
8:
9: <script type="text/javascript">
10: $("document").ready(function() {11: $('#flexme1').flexigrid();12: $('#flexme2').flexigrid();13: });
14: </script>
2 加入需要格式化的表格即可
1: <h1>
2: 最简单的flexigrid表格-1</h1>
3: <table id="flexme1">
4: <thead>
5: <tr>
6: <th width="100">
7: Col 1
8: </th>
9: <th width="100">
10: Col 2
11: </th>
12: <th width="100">
13: Col 3 is a long header name
14: </th>
15: <th width="300">
16: Col 4
17: </th>
18: </tr>
19: </thead>
20: <tbody>
21: <tr>
22: <td>
23: This is data 1 with overflowing content
24: </td>
25: <td>
26: This is data 2
27: </td>
28: <td>
29: This is data 3
30: </td>
31: <td>
32: This is data 4
33: </td>
34: </tr>
35: <tr>
36: <td>
37: This is data 1
38: </td>
39: <td>
40: This is data 2
41: </td>
42: <td>
43: This is data 3
44: </td>
45: <td>
46: This is data 4
47: </td>
48: </tr>
49: <tr>
50: <td>
51: This is data 1
52: </td>
53: <td>
54: This is data 2
55: </td>
56: <td>
57: This is data 3
58: </td>
59: <td>
60: This is data 4
61: </td>
62: </tr>
63: <tr>
64: <td>
65: This is data 1
66: </td>
67: <td>
68: This is data 2
69: </td>
70: <td>
71: This is data 3
72: </td>
73: <td>
74: This is data 4
75: </td>
76: </tr>
77: <tr>
78: <td>
79: This is data 1
80: </td>
81: <td>
82: This is data 2
83: </td>
84: <td>
85: This is data 3
86: </td>
87: <td>
88: This is data 4
89: </td>
90: </tr>
91: <tr>
92: <td>
93: This is data 1
94: </td>
95: <td>
96: This is data 2
97: </td>
98: <td>
99: This is data 3
100: </td>
101: <td>
102: This is data 4
103: </td>
104: </tr>
105: <tr>
106: <td>
107: This is data 1
108: </td>
109: <td>
110: This is data 2
111: </td>
112: <td>
113: This is data 3
114: </td>
115: <td>
116: This is data 4
117: </td>
118: </tr>
119: <tr>
120: <td>
121: This is data 1
122: </td>
123: <td>
124: This is data 2
125: </td>
126: <td>
127: This is data 3
128: </td>
129: <td>
130: This is data 4
131: </td>
132: </tr>
133: <tr>
134: <td>
135: This is data 1
136: </td>
137: <td>
138: This is data 2
139: </td>
140: <td>
141: This is data 3
142: </td>
143: <td>
144: This is data 4
145: </td>
146: </tr>
147: <tr>
148: <td>
149: This is data 1
150: </td>
151: <td>
152: This is data 2
153: </td>
154: <td>
155: This is data 3
156: </td>
157: <td>
158: This is data 4
159: </td>
160: </tr>
161: <tr>
162: <td>
163: This is data 1
164: </td>
165: <td>
166: This is data 2
167: </td>
168: <td>
169: This is data 3
170: </td>
171: <td>
172: This is data 4
173: </td>
174: </tr>
175: <tr>
176: <td>
177: This is data 1
178: </td>
179: <td>
180: This is data 2
181: </td>
182: <td>
183: This is data 3
184: </td>
185: <td>
186: This is data 4
187: </td>
188: </tr>
189: </tbody>
190: </table>
191: <p>
192: </p>
193: <h1>
194: 最简单的flexigrid表格-2</h1>
195: <table id="flexme2">
196: <thead>
197: <tr>
198: <th width="100">
199: Col 1
200: </th>
201: <th width="100">
202: Col 2
203: </th>
204: <th width="100">
205: Col 3 is a long header name
206: </th>
207: <th width="300">
208: Col 4
209: </th>
210: </tr>
211: </thead>
212: <tbody>
213: <tr>
214: <td>
215: This is data 1 with overflowing content
216: </td>
217: <td>
218: This is data 2
219: </td>
220: <td>
221: This is data 3
222: </td>
223: <td>
224: This is data 4
225: </td>
226: </tr>
227: <tr>
228: <td>
229: This is data 1
230: </td>
231: <td>
232: This is data 2
233: </td>
234: <td>
235: This is data 3
236: </td>
237: <td>
238: This is data 4
239: </td>
240: </tr>
241: <tr>
242: <td>
243: This is data 1
244: </td>
245: <td>
246: This is data 2
247: </td>
248: <td>
249: This is data 3
250: </td>
251: <td>
252: This is data 4
253: </td>
254: </tr>
255: <tr>
256: <td>
257: This is data 1
258: </td>
259: <td>
260: This is data 2
261: </td>
262: <td>
263: This is data 3
264: </td>
265: <td>
266: This is data 4
267: </td>
268: </tr>
269: <tr>
270: <td>
271: This is data 1
272: </td>
273: <td>
274: This is data 2
275: </td>
276: <td>
277: This is data 3
278: </td>
279: <td>
280: This is data 4
281: </td>
282: </tr>
283: <tr>
284: <td>
285: This is data 1
286: </td>
287: <td>
288: This is data 2
289: </td>
290: <td>
291: This is data 3
292: </td>
293: <td>
294: This is data 4
295: </td>
296: </tr>
297: <tr>
298: <td>
299: This is data 1
300: </td>
301: <td>
302: This is data 2
303: </td>
304: <td>
305: This is data 3
306: </td>
307: <td>
308: This is data 4
309: </td>
310: </tr>
311: <tr>
312: <td>
313: This is data 1
314: </td>
315: <td>
316: This is data 2
317: </td>
318: <td>
319: This is data 3
320: </td>
321: <td>
322: This is data 4
323: </td>
324: </tr>
325: <tr>
326: <td>
327: This is data 1
328: </td>
329: <td>
330: This is data 2
331: </td>
332: <td>
333: This is data 3
334: </td>
335: <td>
336: This is data 4
337: </td>
338: </tr>
339: <tr>
340: <td>
341: This is data 1
342: </td>
343: <td>
344: This is data 2
345: </td>
346: <td>
347: This is data 3
348: </td>
349: <td>
350: This is data 4
351: </td>
352: </tr>
353: <tr>
354: <td>
355: This is data 1
356: </td>
357: <td>
358: This is data 2
359: </td>
360: <td>
361: This is data 3
362: </td>
363: <td>
364: This is data 4
365: </td>
366: </tr>
367: <tr>
368: <td>
369: This is data 1
370: </td>
371: <td>
372: This is data 2
373: </td>
374: <td>
375: This is data 3
376: </td>
377: <td>
378: This is data 4
379: </td>
380: </tr>
381: </tbody>
382: </table>
为了增加FlexiGrid的基本使用效果，我们可以通过参数对其进行基本的调整
自定义表头
具体代码实现：
1: <script type="text/javascript">
2: $("document").ready(function() {3: $('#flexme1').flexigrid({4: colModel: [
5: { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },6: { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },7: { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },8: { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },9: { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }10: ]
11: });
12: $('#flexme2').flexigrid({13: colModel: [
14: { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },15: { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },16: { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },17: { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },18: { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }19: ],
20: sortname: "iso",
21: sortorder: "asc",
22:
23: });
24: });
25: </script>
自定义折叠，自定义排序的实现
1: <script type="text/javascript">
2: $("document").ready(function() {3: $('#flexme1').flexigrid({4: colModel: [
5: { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },6: { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },7: { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },8: { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },9: { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }10: ], width: 700, height: 300, usepager: true, showTableToggleBtn: true, title: "点我折叠"
11: });
12: $('#flexme2').flexigrid({13: colModel: [
14: { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },15: { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },16: { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },17: { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },18: { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }19: ],
20: searchitems: [
21: { display: 'ISO', name: 'iso' },22: { display: 'Name', name: 'name', isdefault: true }23: ],
24: sortname: "iso",
25: sortorder: "asc",
26: title: "我的测试效果",
27: width: 700,
28: height: 300,
29: usepager: true, showTableToggleBtn: true, rp: 10
30:
31: });
32: });
33: </script>
高级使用：
1 分页要用到的存储过程
1: Create PROCEDURE [dbo].[spAll_ReturnRows]
2: (
3: @SQL nVARCHAR(4000),
4: @Page int,
5: @RecsPerPage int,
6: @ID VARCHAR(255),
7: @Sort VARCHAR(255)
8: )
9: AS
10:
11: DECLARE @Str nVARCHAR(4000)
12:
13: SET @Str='SELECT TOP '+
14: CAST(@RecsPerPage AS VARCHAR(20))+
15: ' * FROM ('+@SQL+') T WHERE T.'+16: @ID+
17: ' NOT IN (SELECT TOP '+
18: CAST((@RecsPerPage*(@Page-1)) AS VARCHAR(20))+
19: ' '+
20: @ID+
21: ' FROM ('22: +@SQL+
23: ') T9 ORDER BY '+
24: @Sort+
25: ') ORDER BY '+
26: @Sort
27:
28: PRINT @Str
29:
30: EXEC sp_ExecuteSql @Str
2 异步JSON数据传输实现
1: using System;
2: using System.Collections.Generic;
3: using System.Configuration;
4: using System.Data;
5: using System.Data.SqlClient;
6: using System.Linq;
7: using System.Text;
8: using System.Web;
9: using System.Web.Services;
10: using Newtonsoft.Json;
11:
12: namespace GridDemo
13: {14: /// <summary>
15: /// $codebehindclassname$ 的摘要说明
16: /// </summary>
17: [WebService(Namespace = "http://tempuri.org/")]
18: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
19: public class GetDataSource4 : IHttpHandler
20: {21:
22: public void ProcessRequest(HttpContext context)
23: {24: context.Response.ContentType = "text/plain";
25:
26: //得到当前页
27: string CurrentPage = context.Request["page"];
28: //得到每页显示多少
29: string PageShowLimit = context.Request["rp"];
30: //得到主键
31: string TableID = context.Request["sortname"];
32: //得到排序方法
33: string OrderMethod = context.Request["sortorder"];
34:
35: //得到要过滤的字段
36: string FilterField = context.Request["qtype"];
37: //得到要过滤的内容
38: string FilterFieldContext;
39: if (context.Request.Form["letter_pressed"] == null)
40: {41: FilterFieldContext = "";
42: }
43: else
44: {45: FilterFieldContext = context.Request["letter_pressed"];
46: }
47: //得到表的总行数
48: string TableRowCount = SqlHelper.ExecuteScalar(ConfigurationManager.AppSettings["SQL2"],
49: CommandType.Text,
50: "select count(*) from Person.Address"
51: ).ToString();
52: //得到主SQL
53: SqlParameter SQL = new SqlParameter("@SQL", SqlDbType.NVarChar);54: //SQL.Value = "SELECT * FROM Person.Address";
55: if (FilterFieldContext.Length == 0 || FilterField.Length == 0)
56: {57: SQL.Value = "SELECT AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Address";
58: }
59: else
60: {61: string[] tmp = FilterField.Split(',');62: SQL.Value = "SELECT AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Address where " + tmp[0] + " like '" + FilterFieldContext + "%'";
63: }
64:
65:
66: SqlParameter Page = new SqlParameter("@Page", SqlDbType.Int);67: Page.Value = Convert.ToInt32(CurrentPage);
68:
69:
70: SqlParameter RecsPerPage = new SqlParameter("@RecsPerPage", SqlDbType.Int);71: RecsPerPage.Value = Convert.ToInt32(PageShowLimit);
72:
73: SqlParameter ID = new SqlParameter("@ID", SqlDbType.VarChar);74: ID.Value = TableID;
75:
76: SqlParameter Sort = new SqlParameter("@Sort", SqlDbType.VarChar);77: Sort.Value = TableID;
78:
79: //得到表
80: DataTable returnTable = SqlHelper.ExecuteDataset(ConfigurationManager.AppSettings["SQL2"],
81: CommandType.StoredProcedure, "spAll_ReturnRows",
82: new SqlParameter[]
83: {84: SQL,Page,RecsPerPage,ID,Sort
85: }).Tables[0];
86: context.Response.Write(DtToSON2(returnTable, CurrentPage, TableRowCount));
87: }
88: /// <summary>
89: /// JSON格式转换
90: /// </summary>
91: /// <param name="dt">DataTable表</param>
92: /// <param name="page">当前页</param>
93: /// <param name="total">总计多少行</param>
94: /// <returns></returns>
95: public static string DtToSON2(DataTable dt, string page, string total)
96: {97:
98: StringBuilder jsonString = new StringBuilder();
99: jsonString.AppendLine("{");100: jsonString.AppendFormat("page: {0},\n", page);101: jsonString.AppendFormat("total: {0},\n", total);102: jsonString.AppendLine("rows: [");103:
104: for (int i = 0; i < dt.Rows.Count; i++)
105: {106: jsonString.Append("{");107: jsonString.AppendFormat("id:'{0}',cell:[", dt.Rows[i][0].ToString());108: for (int j = 0; j < dt.Columns.Count; j++)
109: {110: if (j == dt.Columns.Count - 1)
111: {112: jsonString.AppendFormat("'{0}'", dt.Rows[i][j].ToString());113: }
114: else
115: {116: jsonString.AppendFormat("'{0}',", dt.Rows[i][j].ToString());117: }
118:
119: if (j == dt.Columns.Count - 1)
120: {121: jsonString.AppendFormat(",'{0}'", "<input type=\"button\" value=\"查看\" id=\"sss\" onclick=\"sss(" + dt.Rows[i][0].ToString() + ")\" />");122: }
123:
124: }
125:
126: jsonString.Append("]");127: if (i == dt.Rows.Count - 1)
128: {129: jsonString.AppendLine("}");130:
131: }
132: else
133: {134:
135: jsonString.AppendLine("},");136: }
137:
138: }
139:
140: jsonString.Append("]");141: jsonString.AppendLine("}");142:
143: return jsonString.ToString();
144:
145: }
146: public bool IsReusable
147: {148: get
149: {150: return false;
151: }
152: }
153: }
154: }
3 页面实现
1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Complex-8.aspx.cs" Inherits="GridDemo.Complex_8" %>
2:
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml">
5: <head id="Head1" runat="server">
6: <title></title>
7: <link rel="stylesheet" type="text/css" href="/css/flexigrid/flexigrid.css" />
8:
9: <script type="text/javascript" src="/lib/jquery/jquery.js"></script>
10:
11: <script type="text/javascript" src="flexigrid.js"></script>
12:
13: <link type="text/css" rel="Stylesheet" href="facebox/facebox.css" />
14: <link type="text/css" rel="Stylesheet" href="body.css" />
15:
16: <script type="text/javascript" src="facebox/facebox.js"></script>
17:
18: <script type="text/javascript">
19: $("document").ready(function() {20: $("#flex1").flexigrid21: ({22: url: 'GetDataSource4.ashx',
23: dataType: 'json',
24: colModel: [
25: { display: '地址ID', name: 'AddressID', width: 40, sortable: true, align: 'center' },26: { display: '具体地址1', name: 'AddressLine1', width: 140, sortable: true, align: 'left' },27: { display: '具体地址2', name: 'AddressLine2', width: 80, sortable: true, align: 'left' },28: { display: '邮编', name: 'PostalCode', width: 80, sortable: true, align: 'left' },29: { display: '城市', name: 'City', width: 80, sortable: true, align: 'left' },30: { display: '操作', name: 'Opt', width: 80, sortable: true, align: 'left' }31: ],
32: buttons: [
33: { name: 'A', onpress: sortAlpha },34: { name: 'B', onpress: sortAlpha },35: { name: 'C', onpress: sortAlpha },36: { name: 'D', onpress: sortAlpha },37: { name: 'E', onpress: sortAlpha },38: { name: 'F', onpress: sortAlpha },39: { name: 'G', onpress: sortAlpha },40: { name: 'H', onpress: sortAlpha },41: { name: 'I', onpress: sortAlpha },42: { name: 'J', onpress: sortAlpha },43: { name: 'K', onpress: sortAlpha },44: { name: 'L', onpress: sortAlpha },45: { name: 'M', onpress: sortAlpha },46: { name: 'N', onpress: sortAlpha },47: { name: 'O', onpress: sortAlpha },48: { name: 'P', onpress: sortAlpha },49: { name: 'Q', onpress: sortAlpha },50: { name: 'R', onpress: sortAlpha },51: { name: 'S', onpress: sortAlpha },52: { name: 'T', onpress: sortAlpha },53: { name: 'U', onpress: sortAlpha },54: { name: 'V', onpress: sortAlpha },55: { name: 'W', onpress: sortAlpha },56: { name: 'X', onpress: sortAlpha },57: { name: 'Y', onpress: sortAlpha },58: { name: 'Z', onpress: sortAlpha },59: { name: '%', onpress: sortAlpha }60: ],
61: searchitems: [
62: { display: '城市', name: 'City' , isdefault: true},63: { display: '邮编', name: 'PostalCode' }64: ],
65: usepager: true,
66: title: '客户信息',
67: useRp: true,
68: rp: 10,
69: showTableToggleBtn: true,
70: width: 700,
71: height: 200,
72: rpOptions: [10, 15, 20, 25, 40, 60], //可选择设定的每页结果数
73: procmsg: '请等待数据正在加载中 …', //正在处理的提示信息
74: resizable: false, //是否可伸缩
75: sortname: "AddressID",
76: //sortorder: "asc",//此列由于存储过程原因无法用
77: });
78: });
79: function sortAlpha(com) {80: jQuery('#flex1').flexOptions({ newp: 1, params: [{ name: 'letter_pressed', value: com }, { name: 'qtype', value: $('select[name=qtype]').val()}] });81: jQuery("#flex1").flexReload();82: }
83: function sss(data)
84: {85: var temp=eval(data);
86: // jQuery.facebox(temp);
87: jQuery.facebox({ ajax: 'Default.aspx?id='+temp })88: }
89: </script>
90:
91: </head>
92: <body>
93: <table id="flex1" style="display: none">
94: </table>
95: </body>
96: </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用FlexiGrid实现Extjs表格的效果-网络传输小，更方便！
- 使用FlexiGrid实现Extjs表格效果方法分享
- 使用FlexiGrid实现Extjs表格效果方法分享
- Element UI 中可展开表格手风琴效果实现（toggleRowExpansion方法的正确使用方式）
- 使用DOM方法实现表格的隔行变色效果
- 实现类似EXTJS表格插件 Flexgrid.js GridView中使用的记录
- 使用dom节点实现表格完美隔行变色效果
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- RecyclerView简单解析使用Xutils实现表格效果和普通listview效果
- 使用DOM方法实现表格的隔行变色效果
- 使用JS实现简单的表格的增加删除全选反选以及高亮效果
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- 使用ListView控件实现漂亮的自定义表格效果实例
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- Extjs 利用panel html属性加入DIV实现如TextArea的效果，并且能正确使用html标签，实现如向textarea文本域嵌入按钮button或其他控件,，而且兼容firefox
- Android中使用ListView实现漂亮的表格效果
- 使用ListView控件实现漂亮的自定义表格效果实例
- Android中使用ListView实现漂亮的表格效果
- ExtJs,表格的拖动效果实现
- Android中如何使用ViewPager实现类似laucher左右拖动效果