• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 使用FlexiGrid实现Extjs表格效果方法分享

使用FlexiGrid实现Extjs表格效果方法分享

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了FlexiGrid,Extjs,表格等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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



下载地址:http://code.google.com/p/flexigrid/

不过由于FlexiGrid在互联网上的大部分资料都是用PHP或者java写的,所以兄弟简单的对它进行了改制,也做了一个山寨版的Extjs表格实现,希望对大家有帮助。

基本使用:

1 基本使用是非常简单的,只需要加入Jquery库与FlexiGrid的JS即可以对表格进行格式化与美化.

<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="lib/jquery/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="flexigrid.pack.js"></script>
<%--<script type="text/javascript" src="lib/jquery/jquery-1.2.6-vsdoc-cn.js"></script>--%>
<script type="text/javascript">
    $("document").ready(function() {
    $('#flexme1').flexigrid();
    $('#flexme2').flexigrid();
    });
</script>

2 加入需要格式化的表格即可

<h1>
     最简单的flexigrid表格-1</h1>
 <table id="flexme1">
     <thead>
         <tr>
             <th width="100">
                 Col 1
             </th>
             <th width="100">
                 Col 2
             </th>
             <th width="100">
                 Col 3 is a long header name
             </th>
             <th width="300">
                 Col 4
             </th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>
                 This is data 1 with overflowing content
             </td>
             <td>
                 This is data 2
             </td>
             <td>
                 This is data 3
             </td>
             <td>
                 This is data 4
             </td>
         </tr>
         <tr>
             <td>
                 This is data 1
             </td>
             <td>
                 This is data 2
             </td>
             <td>
                 This is data 3
             </td>
             <td>
                 This is data 4
             </td>
         </tr>
         <tr>
             <td>
                 This is data 1
             </td>
             <td>
                 This is data 2
             </td>
             <td>
                 This is data 3
             </td>
             <td>
                 This is data 4
             </td>
         </tr>
         <tr>
             <td>
                 This is data 1
             </td>
             <td>
         &n

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • IE10中flexigrid无法显示数据的解决方法
  • 使用FlexiGrid实现Extjs表格效果方法分享
  • jquery的flexigrid无法显示数据提示获取到数据
  • JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
  • flexigrid 类似ext grid的JS表格代码

相关文章

  • jQuery基础知识点总结(必看)
  • 优化Jquery,提升网页加载速度
  • jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
  • jQuery实现字符串按指定长度加入特定内容的方法
  • jQuery学习笔记之入门
  • jQuery EasyUI API 中文文档 - Calendar日历使用
  • boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
  • 浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
  • 基于jQuery实现数字滚动效果
  • 动态设置form表单的action属性的值的简单方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 来自国外的30个基于jquery的Web下拉菜单
    • Jquery 动态生成表格示例代码
    • jquery datepicker参数介绍和示例
    • jquery判断浏览器类型的代码
    • imgAreaSelect 中文文档帮助说明
    • jQuery响应enter键的实现思路
    • jquery ui dialog ie8出现滚动条的解决方法
    • jQuery插件windowScroll实现单屏滚动特效
    • jquery自定义类似$.ajax()的方法实现代码
    • jQuery实现在下拉列表选择时获取json数据的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有