近一段时间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. 【原创】MySQL复制slave服务器死锁案例

    MySQL复制刚刚触发了一个bug,该bug的触发条件是slave上Xtrabackup备份的时候执行flushs tables with read lock和show slave status有可能 ...

  2. 一台电脑如何安装多个版本的JDK

    1 . 准备两个版本的jdk我的两个jdk路径为:  C:\Program Files\Java\jdk1.6.0_43  C:\Program Files\Java\jdk1.8.0_25 2 . ...

  3. poj3349(hash table)

    做的第一道哈希表的题目.速度很慢,跑了3000+ms.采用六条边的和对一个大质数的余数作为哈希表的key,理论上质数取得越大,消耗的空间就越大,但是速度会加快,这里取了14997.地址冲突用链表解决. ...

  4. Windows系统php5.6安装Imagick库

    Windows上的安装坑比较多 1.安装Imagick,需要下载6.9.3之下版本的 http://imagemagick.org/script/download.php 官网都是新版本不可以用 我安 ...

  5. UOJ 310 黎明前的巧克力(FWT)

    [题目链接] http://uoj.ac/problem/310 [题目大意] 给出一个数集,A从中选择一些数,B从中选择一些数,不能同时不选 要求两者选择的数异或和为0,问方案数 [题解] 题目等价 ...

  6. hdu 2110 基础母函数

    题意:退出本身并不麻烦,麻烦的是,退出的人需要取走相应比例(1/3)金额的资产.假设公司此时一共有n种价值的资产,每种价值的资产数量已知,请帮助心烦意乱的XHD夫妇计算一共有多少种分割资产的方法.   ...

  7. Content portal for Pocketables Tasker articles

    http://www.pocketables.com/2013/03/overview-of-pocketables-tasker-articles.html I write a lot about ...

  8. mysql 源代码编绎

    http://blog.chinaunix.net/uid-20723616-id-769326.html https://software.intel.com/zh-cn/blogs/2010/08 ...

  9. Python机器学习实战&lt;一&gt;:环境的配置

    详细要学习的书籍就是<机器学习实战>Machine Learning in Action,Peter Harrington Windows下要安装3个文件,各自是; 1.Python(因为 ...

  10. Android Gradle Plugin指南(五)——Build Variants(构建变种版本号)

    原文地址:http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 6. Build Vari ...