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

近一段时间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>
                 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>
                 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>
                 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>
     </tbody>
 </table>
 <p>
 </p>
 <h1>
     最简单的flexigrid表格-2</h1>
 <table id="flexme2">
     <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>
                 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>
                 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>
                 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>
     </tbody>
 </table>

为了增加FlexiGrid的基本使用效果,我们可以通过参数对其进行基本的调整

自定义表头

具体代码实现:

代码如下:

<script type="text/javascript">
     $("document").ready(function() {
         $('#flexme1').flexigrid({
             colModel: [
             { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
             { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
             { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
             { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },
             { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
             ]
         });
         $('#flexme2').flexigrid({
             colModel: [
             { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
             { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
             { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
             { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },
             { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
             ],
             sortname: "iso",
             sortorder: "asc",
         });
     });
 </script>

自定义折叠,自定义排序的实现

代码如下:

<script type="text/javascript">
     $("document").ready(function() {
         $('#flexme1').flexigrid({
             colModel: [
             { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
             { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
             { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
             { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },
             { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
             ], width: 700, height: 300, usepager: true, showTableToggleBtn: true, title: "点我折叠"
         });
         $('#flexme2').flexigrid({
             colModel: [
             { display: 'ISO', name: 'iso', width: 40, sortable: true, align: 'center' },
             { display: 'Name', name: 'name', width: 180, sortable: true, align: 'left' },
             { display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left' },
             { display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true },
             { display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right' }
             ],
             searchitems: [
             { display: 'ISO', name: 'iso' },
             { display: 'Name', name: 'name', isdefault: true }
             ],
             sortname: "iso",
             sortorder: "asc",
             title: "我的测试效果",
             width: 700,
             height: 300,
             usepager: true, showTableToggleBtn: true, rp: 10
 
         });
     });
 </script>

高级使用:

1 分页用到的存储过程

代码如下:

Create PROCEDURE [dbo].[spAll_ReturnRows]
        (
            @SQL nVARCHAR(4000),
            @Page int,
            @RecsPerPage int,
            @ID VARCHAR(255),
            @Sort VARCHAR(255)
        )
        AS
        DECLARE @Str nVARCHAR(4000)
        SET @Str='SELECT   TOP '+
            CAST(@RecsPerPage AS VARCHAR(20))+
            ' * FROM ('+@SQL+') T WHERE T.'+
            @ID+
            ' NOT IN (SELECT   TOP '+
            CAST((@RecsPerPage*(@Page-1)) AS VARCHAR(20))+
            ' '+
            @ID+
            ' FROM ('
            +@SQL+
            ') T9 ORDER BY '+
            @Sort+
            ') ORDER BY '+
            @Sort
        PRINT @Str
        EXEC sp_ExecuteSql @Str

2 异步JSON数据传输实现

代码如下:

using System;
 using System.Collections.Generic;
 using System.Configuration;
 using System.Data;
 using System.Data.SqlClient;
 using System.Linq;
 using System.Text;
 using System.Web;
 using System.Web.Services;
 using Newtonsoft.Json;
 namespace GridDemo
 {
     /// <summary>
     /// $codebehindclassname$ 的摘要说明
     /// </summary>
     [WebService(Namespace = "http://tempuri.org/")]
     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
     public class GetDataSource4 : IHttpHandler
     {
         public void ProcessRequest(HttpContext context)
         {
             context.Response.ContentType = "text/plain";
             //得到当前页
             string CurrentPage = context.Request["page"];
             //得到每页显示多少
             string PageShowLimit = context.Request["rp"];
             //得到主键
             string TableID = context.Request["sortname"];
             //得到排序方法
             string OrderMethod = context.Request["sortorder"];
             //得到要过滤的字段
             string FilterField = context.Request["qtype"];
             //得到要过滤的内容
             string FilterFieldContext;
             if (context.Request.Form["letter_pressed"] == null)
             {
                 FilterFieldContext = "";
             }
             else
             {
                 FilterFieldContext = context.Request["letter_pressed"];
             }
             //得到表的总行数
             string TableRowCount = SqlHelper.ExecuteScalar(ConfigurationManager.AppSettings["SQL2"],
                                     CommandType.Text,
                                     "select count(*) from Person.Address"
                                    ).ToString();
             //得到主SQL
             SqlParameter SQL = new SqlParameter("@SQL", SqlDbType.NVarChar);
             //SQL.Value = "SELECT  * FROM Person.Address";
             if (FilterFieldContext.Length == 0 || FilterField.Length == 0)
             {
                 SQL.Value = "SELECT  AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Address";
             }
             else
             {
                 string[] tmp = FilterField.Split(',');
                 SQL.Value = "SELECT  AddressID,AddressLine1,AddressLine2,PostalCode,City FROM Person.Address where " + tmp[0] + " like '" + FilterFieldContext + "%'";
             }
             SqlParameter Page = new SqlParameter("@Page", SqlDbType.Int);
             Page.Value = Convert.ToInt32(CurrentPage);
             SqlParameter RecsPerPage = new SqlParameter("@RecsPerPage", SqlDbType.Int);
             RecsPerPage.Value = Convert.ToInt32(PageShowLimit);
             SqlParameter ID = new SqlParameter("@ID", SqlDbType.VarChar);
             ID.Value = TableID;
             SqlParameter Sort = new SqlParameter("@Sort", SqlDbType.VarChar);
             Sort.Value = TableID;
             //得到表
             DataTable returnTable = SqlHelper.ExecuteDataset(ConfigurationManager.AppSettings["SQL2"],
                         CommandType.StoredProcedure, "spAll_ReturnRows",
                         new SqlParameter[]
                             {
                                 SQL,Page,RecsPerPage,ID,Sort
                             }).Tables[0];
             context.Response.Write(DtToSON2(returnTable, CurrentPage, TableRowCount));
         }
         /// <summary>
         /// JSON格式转换
         /// </summary>
         /// <param name="dt">DataTable表</param>
         /// <param name="page">当前页</param>
         /// <param name="total">总计多少行</param>
         /// <returns></returns>
         public static string DtToSON2(DataTable dt, string page, string total)
         {
             StringBuilder jsonString = new StringBuilder();
             jsonString.AppendLine("{");
             jsonString.AppendFormat("page: {0},\n", page);
             jsonString.AppendFormat("total: {0},\n", total);
             jsonString.AppendLine("rows: [");
             for (int i = 0; i < dt.Rows.Count; i++)
             {
                 jsonString.Append("{");
                 jsonString.AppendFormat("id:'{0}',cell:[", dt.Rows[i][0].ToString());
                 for (int j = 0; j < dt.Columns.Count; j++)
                 {
                     if (j == dt.Columns.Count - 1)
                     {
                         jsonString.AppendFormat("'{0}'", dt.Rows[i][j].ToString());
                     }
                     else
                     {
                         jsonString.AppendFormat("'{0}',", dt.Rows[i][j].ToString());
                     }
                     if (j == dt.Columns.Count - 1)
                     {
                         jsonString.AppendFormat(",'{0}'", "<input type=\"button\" value=\"查看\" id=\"sss\" onclick=\"sss(" + dt.Rows[i][0].ToString() + ")\" />");
                     }
                 }
                 jsonString.Append("]");
                 if (i == dt.Rows.Count - 1)
                 {
                     jsonString.AppendLine("}");
                 }
                 else
                 {
                     jsonString.AppendLine("},");
                 }
             }
             jsonString.Append("]");
             jsonString.AppendLine("}");
             return jsonString.ToString();
         }
         public bool IsReusable
         {
             get
             {
                 return false;
             }
         }
     }
 }

3 页面实现

代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Complex-8.aspx.cs" Inherits="GridDemo.Complex_8" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title></title>
     <link rel="stylesheet" type="text/css" href="/css/flexigrid/flexigrid.css" />
     <script type="text/javascript" src="/lib/jquery/jquery.js"></script>
     <script type="text/javascript" src="flexigrid.js"></script>
     <link type="text/css" rel="Stylesheet" href="facebox/facebox.css" />
     <link type="text/css" rel="Stylesheet" href="body.css" />
     <script type="text/javascript" src="facebox/facebox.js"></script>
     <script type="text/javascript">
         $("document").ready(function() {
             $("#flex1").flexigrid
             ({
                 url: 'GetDataSource4.ashx',
                 dataType: 'json',
                 colModel: [
                 { display: '地址ID', name: 'AddressID', width: 40, sortable: true, align: 'center' },
                 { display: '具体地址1', name: 'AddressLine1', width: 140, sortable: true, align: 'left' },
                 { display: '具体地址2', name: 'AddressLine2', width: 80, sortable: true, align: 'left' },
                 { display: '邮编', name: 'PostalCode', width: 80, sortable: true, align: 'left' },
                 { display: '城市', name: 'City', width: 80, sortable: true, align: 'left' },
                 { display: '操作', name: 'Opt', width: 80, sortable: true, align: 'left' }
                 ],
                 buttons: [
                 { name: 'A', onpress: sortAlpha },
                 { name: 'B', onpress: sortAlpha },
                 { name: 'C', onpress: sortAlpha },
                 { name: 'D', onpress: sortAlpha },
                 { name: 'E', onpress: sortAlpha },
                 { name: 'F', onpress: sortAlpha },
                 { name: 'G', onpress: sortAlpha },
                 { name: 'H', onpress: sortAlpha },
                 { name: 'I', onpress: sortAlpha },
                 { name: 'J', onpress: sortAlpha },
                 { name: 'K', onpress: sortAlpha },
                 { name: 'L', onpress: sortAlpha },
                 { name: 'M', onpress: sortAlpha },
                 { name: 'N', onpress: sortAlpha },
                 { name: 'O', onpress: sortAlpha },
                 { name: 'P', onpress: sortAlpha },
                 { name: 'Q', onpress: sortAlpha },
                 { name: 'R', onpress: sortAlpha },
                 { name: 'S', onpress: sortAlpha },
                 { name: 'T', onpress: sortAlpha },
                 { name: 'U', onpress: sortAlpha },
                 { name: 'V', onpress: sortAlpha },
                 { name: 'W', onpress: sortAlpha },
                 { name: 'X', onpress: sortAlpha },
                 { name: 'Y', onpress: sortAlpha },
                 { name: 'Z', onpress: sortAlpha },
                 { name: '%', onpress: sortAlpha }
                 ],
                 searchitems: [
                  { display: '城市', name: 'City' , isdefault: true},
                  { display: '邮编', name: 'PostalCode' }
                  ],
                 usepager: true,
                 title: '客户信息',
                 useRp: true,
                 rp: 10,
                 showTableToggleBtn: true,
                 width: 700,
                 height: 200,
                 rpOptions: [10, 15, 20, 25, 40, 60], //可选择设定的每页结果数
                 procmsg: '请等待数据正在加载中 …', //正在处理的提示信息
                 resizable: false, //是否可伸缩
                 sortname: "AddressID",
                 //sortorder: "asc",//此列由于存储过程原因无法用
             });
         });
         function sortAlpha(com) {
             jQuery('#flex1').flexOptions({ newp: 1, params: [{ name: 'letter_pressed', value: com }, { name: 'qtype', value: $('select[name=qtype]').val()}] });
             jQuery("#flex1").flexReload();
         }
         function sss(data)
         {
            var temp=eval(data);
 //           jQuery.facebox(temp);
            jQuery.facebox({ ajax: 'Default.aspx?id='+temp })
         }
     </script>
 </head>
 <body>
     <table>
     </table>
 </body>
 </html>

(0)

相关推荐

  • ExtJS 2.0 GridPanel基本表格简明教程

    ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.ColumnModel定义.而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore.SimpleStroe.GroupingSto

  • ExtJS4 表格的嵌套 rowExpander应用

    今天做一个grid,里面的数据需要带明细,思来想去还是搞个表格嵌套吧!看下图 对于grid中每一条记录点击左边的+号能展开一个明细的子表格 所有数据包括列名均从后台获得,子表格的数据暂时在本地以做测试 在此贴一些代码留下记录 复制代码 代码如下: function displayInnerGrid(renderId) { //Model for the inside grid store Ext.define('TestModel', { extend: 'Ext.data.Model', fi

  • ExtJS 配置和表格控件使用第1/2页

    ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下

  • extjs表格文本启用选择复制功能具体实现

    extjs提供了方便的表格组件grid供使用,但是默认情况下表格中的文本是不能被选中的,自然也是无法复制的. 而选择复制文本的需要也是很平常的,于是我们就需要自己动手来解决这个问题,实现extjs的grid文本选择复制功能. 说明一点,文中所列出的代码片断都是在当前ext 4.0.2a版本下的,其它版本未做测试,请自行斟酌. 首先自定义一下样式,来覆盖默认的css样式: 复制代码 代码如下: <style type="text/css"> .x-selectable, .x

  • Extjs根据条件设置表格某行背景色示例

    话不多说,贴上代码 html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="../extjs3

  • ExtJs设置GridPanel表格文本垂直居中示例

    业务场景,需要实现最终效果图如下:  GridPanel代码如下配置: 复制代码 代码如下: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'center', title : '列表详细信息', columnLines : true, loadMask : true, store : 'test_store', viewConfig : { forceFit : true, scrollOffset : 0 }, ancho

  • 自定义ExtJS控件之下拉树和下拉表格附源码

    简介 在Ext官方的例子中只有下拉列表控件,但是在实际业务中只有下拉列表无法满足需求的,像下拉树和下拉表格都是很常见的控件,对于刚使用Ext的人来说,自定义一个控件好难,其实多读官方的源码有些事情就不会那么难了.下面是下拉树的代码: 复制代码 代码如下: Ext.define('ComboTreeBox',{ extend : 'Ext.form.field.ComboBox', multiSelect : true, createPicker : function(){ var me = th

  • JavaScript的ExtJS框架中表格的编写教程

    ExtJS中表格的特性简介 表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为如下几种: JsonStore,SimpleStore,GroupingStore- 一个表格的基本编写过程: 1.创建表格列模型 var cm = new Ext.grid.ColumnModel({ {header:

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

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

  • JavaScript实现的斑马线表格效果【隔行变色】

    本文实例讲述了JavaScript实现的斑马线表格效果.分享给大家供大家参考,具体如下: 虽然现在有很多框架可以轻松的实现斑马线效果,而且兼容性也很不错,比如bootstrap,但是不可否认的是使用JavaScript实现的是兼容性最强的(浏览器不支持或禁止JavaScript脚本除外),所以今天使用原生JS实现了一个斑马线效果的表格,大家可以简单看一下,如果有需要可以留做脚本积累. html表格部分: <table> <thead> <tr> <th>Da

  • JS控制网页动态生成任意行列数表格的方法

    本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式 复制代码 代码如下: <html> <head> <title>Js动态生成表格</title> <style type="text/css"> table{font-siz

  • 不到30行JS代码实现Excel表格的方法

    本文实例讲述了不到30行JS代码实现Excel表格的方法,可见jQuery并非不可替代.分享给大家供大家参考.具体分析如下: 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: ① 由不足30行的原生JavaScript代码实现 ② 不依赖第三方库 ③ Excel风格的语义分析 (公式以 "=" 开头) ④ 支持任意表达式 (=A1+B2*C3) ⑤ 防止循环引用 ⑥ 基于localStorage的自动本地持久化存储 效果展示如下图所示: 代码分析:

  • Vue封装的可编辑表格插件方法

    可任意合并表头,实现单元格编辑. 页面效果如图: 页面使用如下: <template> <div> <v-table :datat = "tableData" :thlabel="thlabel" :isEdit="true"> </v-table> </div> </template> <script> export default{ data(){ retur

  • layui的布局和表格的渲染以及动态生成表格的方法

    整体的效果: 一.首先百度搜索layui的地址,然后下载layui的压缩包,,将压缩包的文件解压缩,然后将解压缩后的文件复制到你的编译器上: 二.建立一个html文件,引入layui.css 和 layui.js两个文件,一定要将地址写对,css和js要一起引用: 三.将整个页面分为三部分body标签中要引用的class为class="layui-layout-body" 3.1.头部部分:用一个大的div包裹,class="layui-layout layui-layout

  • layui table动态表头 改变表格头部 重新加载表格的方法

    改变头部原理:删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈哈哈哈哈哈哈嗝!! 下面是示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</tit

  • VB返回记录集结果到HTML表格的方法

    本文实例讲述了VB返回记录集结果到HTML表格的方法.分享给大家供大家参考.具体实现方法如下: function ReturnHTMLTable(query) set rs = cn.Execute(query) rs.MoveFirst response.Write "<table class=""data"" cols=""" & rs.Fields.Count & """

  • JavaScript实现将xml转换成html table表格的方法

    本文实例讲述了JavaScript实现将xml转换成html table表格的方法.分享给大家供大家参考.具体如下: function ConvertToTable(targetNode) { // if the targetNode is xmlNode this line must be removed // i couldnt find a way to parse xml string to xml node // so i parse xml string to xml documen

  • java之swing表格实现方法

    本文实例讲述了java之swing表格实现方法.分享给大家供大家参考.具体如下: import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.tree.*; public class test extends JApplet{ public void init(){ Container contentPane = getContentPane(); contentPane.setLayo

随机推荐