近一段时间Extjs真的是风光无限好,只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它,不过兄弟我可是不敢,原因很简单:太大/太笨/源码不好调试。但是对于Extjs漂亮的表格与功能的强大,实在是让我垂涎三尺,记得以前有个老外同志写过一个类似的Extjs的Jquery插件,所以就在Jquery的插件海洋中一顿海找,呵呵,还真让我找到了。看来还是我的Jquery好,小巧简单好像一部好的汽车引擎,我想要什么就可以自已DIY,真是方便。
总体方案在网络传输上不超过80KB,速度比500KB大小的Extjs不知道要小上多少哪。。。
 

不过由于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>

使用FlexiGrid实现Extjs表格的效果-网络传输小,更方便!的更多相关文章

  1. ExtJS拖拽效果

    ExtJS拖拽效果 <html> <head> <title>hello</title> <meta http-equiv="conte ...

  2. amaze ui表格斑马纹效果

    amaze ui表格斑马纹效果 需要注意的是样式的写法,都是 am-table- ,很好记的 如果是条纹就是striped,如果是hover状态就是hover 用法很简单,点对应class,不同的cl ...

  3. Android IOS WebRTC 音视频开发总结(五七)-- 网络传输上的一种QoS方案

    本文主要介绍一种QoS的解决方案,文章来自博客园RTC.Blacker,欢迎关注微信公众号blacker,更多详见www.rtc.help QoS出现的背景: 而当网络发生拥塞的时候,所有的数据流都有 ...

  4. App安全之网络传输安全

    移动端App安全如果按CS结构来划分的话,主要涉及客户端本身数据安全,Client到Server网络传输的安全,客户端本身安全又包括代码安全和数据存储安全.所以当我们谈论App安全问题的时候一般来说在 ...

  5. C#网络程序设计(3)网络传输编程之TCP编程

        网络传输编程指基于各种网络协议进行编程,包括TCP编程,UDP编程,P2P编程.本节介绍TCP编程.     (1)TCP简介: TCP是TCP/IP体系中最重要的传输层协议,它提供全双工和可 ...

  6. 网络传输编程之TCP

    网络传输编程之TCP   网络传输编程指基于各种网络协议进行编程,包括TCP编程,UDP编程,P2P编程.本节介绍TCP编程.     (1)TCP简介: TCP是TCP/IP体系中最重要的传输层协议 ...

  7. APP安全--网络传输安全 AES/RSA/ECC/MD5/SHA

    移动端App安全如果按CS结构来划分的话,主要涉及客户端本身数据安全,Client到Server网络传输的安全,客户端本身安全又包括代码安全和数据存储安全.所以当我们谈论App安全问题的时候一般来说在 ...

  8. [转帖]技术扫盲:新一代基于UDP的低延时网络传输层协议——QUIC详解

    技术扫盲:新一代基于UDP的低延时网络传输层协议——QUIC详解    http://www.52im.net/thread-1309-1-1.html   本文来自腾讯资深研发工程师罗成的技术分享, ...

  9. c#网络传输

    接着前面简单讲的,给大家聊聊服务开发. 网络传输 先说网络传输开发,总体来说,可以看成4中模型 我们把传输过程看做网线,那么在通过传输的过程中.2边就涉及池化问题,也就是我们常见的异步传输. 在业务端 ...

随机推荐

  1. Codeforces Round #441 (Div. 2, by Moscow Team Olympiad) E. National Property(2-sat)

    E. National Property time limit per test 1 second memory limit per test 512 megabytes input standard ...

  2. Android IntentService

    IntentService简要分析 IntentService 继承自 android.app.Service.内部实现极其简单. 首先在 onCreate()中去开启了一个 HandlerThrea ...

  3. 【Performance】chrome调试面板

    本篇文章以chrome版本67.0.3396.99为例,说明性能方面的调试.

  4. KVM libvirt的CPU热添加

    一. NUMA1. NUMA 介绍    早期的时候,每台服务器都是单CPU,随着技术的发展,出现了多CPU共同工作的需求.    NUMA(Non-Uniform Memory Access,非一致 ...

  5. 【CF148D】 Bag of mice (概率DP)

    D. Bag of mice time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  6. php异步实现,避免长时间等待

    处理的php异步的方法有好几种,这里我就只介绍我经常用的而且官方也推荐的 废话少说,直接贴代码 //php异步 public function doRequest($host,$path, $para ...

  7. JavaSE基础之double数据类型的格式化

    JavaSE基础之double数据类型的格式化 1.double 数据类型的格式化工具类:DoubleFormatUtil.java package cn.com.zfc.util; import j ...

  8. PAT(Basic Level)--个位数统计

    输入一个不超过1000位的整数,计算每个数字出现的次数. 一道十分简单的题目,最开始以为Java的String没有计算长度的方法,还想了半天,而且还用HashMap做了一次,代码特别长,看了别人的代码 ...

  9. bzoj 2998 第k小字串

    这道题用后缀数组貌似会T. 后缀自动机做法: t==0:第k小的本质不同字串 首先把后缀自动机建出来,我们会得到一个DAG,并且只存在一个点入度为0(我们称之为根),可以证明字符串的任意一个本质不同的 ...

  10. UVALive 4426 Blast the Enemy! 计算几何求重心

    D - Blast the Enemy! Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Subm ...