使用FlexiGrid实现Extjs表格的效果

     近一段时间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").flexigrid

  21:             ({

  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>