使用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即可以对表格进行格式化与美化.

 
<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 id="Head1" 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 id="flex1" style="display: none"> 
    </table> 
</body> 
</html> 
 

你可能感兴趣的:(flexigrid)

如何编写可维护的JavaScript代码 weixin_34320159
摘自：http://my.oschina.net/feichexia/blog/122217JavaScript这门编程语言发展至今已经非常流行了，各种名词也层出不穷，我们随便列举下就有一大堆，比如Node.js、jQuery、JavaScriptMVC、Backbone.js、AMD、CommonJS、RequireJS、CoffeScript、Flexigrid、Highchart、Scrip
flexigrid参数说明 xiaoweidongdong flexigrid
flexigrid参数说明:height:200,//flexigrid插件的高度，单位为pxwidth:'auto',//宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题striped:true,//是否显示斑纹效果，默认是奇偶交互的形式novstripe:false,//没用过这个属性minwidth:30,//列的最小宽度minheight:80,//列的最小
FlexiGrid使用教程 weixin_30615767
一．表的结构1表结构varFriendLink={tableName:'FriendLink',--表名title:'友情链接',--显示在Grid最上面的中文dialogtitle:'',--弹出对话框的标题columns:[{--表数据结构display:'友链类型',--字段中文名称name:'TypeID',--数据库中的字段名称width:100,--在Grid上的宽度sortable:
Flexigrid仅选一行设置、获取行ID、取Cell文本 wallimn JAVA WEB开发
1、Flexigrid默认是可以选择多行，那么如何设置其只能选一行呢？今天看了看Flexigrid的源码，发现有个属性可以控制：$(this).click(function(e){varobj=(e.target||e.srcElement);if(obj.href||obj.type)returntrue;$(this).toggleClass('trSelected');if(p.single
flexigrid教程（一）-jquery最好的grid插件 hjwang1 web前端
转自：http://hi.baidu.com/fengkuang031/blog/item/f030284ded6a123cafc3ab98.html有用过ext的Grid或flex的DataGrid的朋友，应该对gird组件有比较好的理解。grid是强大的表格数据表现形式，是对表格的全面强化。flexigrid从名字来看更接近flex，但实际上应该模仿的是ext的Grid组件。虽然是模仿，但有很
基于jQuery的FlexiGrid的插件使用和改造 gundumw100 jQuery SQL json 正则表达式 Ajax
已不推荐下载，如要下载去这个连接下载最新的http://gundumw100.iteye.com/admin/blogs/545610http://www.cnblogs.com/xuanye/archive/2009/11/04/Xuanye_jQuery_FlexiGrid.htmlhttp://www.cnblogs.com/xuanye/archive/2009/11/08/Xuanye_
玩转jquery插件之flexigrid（二）来点改造如何？【补充】小博 jquery
然后在flexigrid初始化参数中设置：onSuccess:function(){set_exeBtn(”gridtable”);}，这表示flexigrid加载完成后执行set_exeBtn函数，该函数向flexigrid的右下角加入了一个名为“执行”的按钮，并且为该按钮定义了事件updateState，该事件的定义如下：functionupdateState(id){//最后$("#"+id
Flexigrid系列使用教程（二）JSON数据生成代码 Mchange 前端
Flexigrid系列使用教程（二）JSON数据生成代码摘要：上一篇简单的介绍了一下前台页面代码部分，本文主要说一下如何为flexigrid提供前台数据，主要提供了将后台数据库里面的数据转换成Json格式后交由前台显示。前台页面中调用后台的代码是这样的：/BDeviceApply/GetSysSdandeviceFlex，这是在.NETMVC框架的调用方式，本人接触.net开发时间不长，所以对这点
Flexigrid系列使用教程（一）前台代码及参数说明 windxxf C#.net jquery插件 string xmlhttprequest function jquery ajax
摘自：http://www.kwstu.com/Article/ShowArticle.asp?ArticleID=259本教程从零开始介绍Flexigrid的使用方法，记录了作者学习中的点点滴滴，实例主要是在.netmvc框架下实现的，废话不多说了，先看一下Flexigrid的效果图吧。一、首先简单介绍一下flexigrid：1、主要特性：Flexigrid是Jquery家族中table类或gr
jQuery插件flexigrid改造…… guofengcn
做毕设用到flexigrid这个插件，但是遇到种种问题！呃，说不太明白，还是用代码说话吧！后台代码：privateList《RlEmployee》rows;这个就是要在前台显示的rows。但是问题是我的RlEmployee是这样的：privateIntegerempId;privateRlDepartmentrlDepartment;privateRlPositionrlPosition;priv
flexigrid 添加行选择事件在意一下
分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow假定我有一个htmltable元素，与之对应的有一个flexigrid，同时该flexigird支持单选，禁用多选。现在要添加一个事件函数，使得当点击任一行的时候会被调用。加入我的table元素的id是subUsers，
【华磊随笔】善于使用工具（1）-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理... weixin_30823227
【华磊随笔】善于使用工具（1）-使用IE8开发人员工具和FireBug分析JqueryFlexiGrid的实现原理"工欲善其事,必先利其器"当今Web开发，如何有效的提升用户操作体验已经越来越重要，以现在的技术而言，Javascript操作dom和style是最有效的手段；Web开发不像Windows开发一样，往往要涉及到很多不同的技术和方向；同时，由于机制的原因和技术的分散，快速有效方便的调试J
jquery grid插件 Flexigrid + servlet cxhzqhzq flex jquery stylesheet json servlet delete web框架
2008-09-02关键字:ajaxjquery分页flexigrid前些日子写了个源于jquerygrid插件Flexigrid算不上例子的一片文章。为了能更快的使用这个东东。。今天做了一个相对比较详细的例子.对一个工作信息表操控的例子。第一步：创建数据库Sql代码/*MySQLDataTransferSourceHost:localhostSourceDatabase:spiderdataTa
flexgrid jzy23682891 Ajax javascript
第一个Grid示例$(document).ready(function(){$('.flexme1').flexigrid({height:'auto',//高度striped:true,//分割线width:900,//宽度title:'客户管理',//标题buttons:[{name:'新增客户',bclass:'add'},{name:'删除客户',bclass:'delete'},{sep
jqGrid表格插件学习（一）第一个Demo 新发现FLY javascript
jqGrid学习最近的工作任务频繁涉及到很多的jqGrid这个插件，鉴于刚接触这个东西时不太了解，以至于在这个上面耽误了一些时间，现在将jqGrid学习总结一下：应用中经常会遇到向用户展示信息的情况。我们可以自己通过标签来实现。在此介绍另一种方法：通过jQuery的插件来实现信息的展示以及对数据的操作等功能。在网上，关于jQuery的表格插件有不少。其中有几款做的很好，比如：flexiGrid和j
jQuery学习之：jqGrid表格插件——第一个Demo polaris1119 jQuery
应用中经常会遇到向用户展示信息的情况。我们可以自己通过标签来实现。在此介绍另一种方法：通过jQuery的插件来实现信息的展示以及对数据的操作等功能。在网上，关于jQuery的表格插件有不少。其中有几款做的很好，比如：flexiGrid和jqGrid。不过flexGrid网上的资料很少，官方文档不全。而jqGrid的官方文档却相当的全面。官方文档网址：http://www.trirand.com/j
使用FlexiGrid实现Extjs表格效果方法分享
近一段时间Extjs真的是风光无限好，只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨/源码不好调试。但是对于Extjs漂亮的表格与功能的强大，实在是让我垂涎三尺，记得以前有个老外同志写过一个类似的Extjs的Jquery插件，所以就在Jquery的插件海洋中一顿海找，呵呵，还真让我找到了。看来还是我的Jquery好，小巧简单好像一部好的汽
flexigrid实际使用总结跨时代135 JQuery
1、隐藏某一列。Flexigrid——colModel:属性名类型描述displaystring显示的列名namestring绑定的列名sortablebool是否可以排序alignstring对其方式widthint列的宽度hidebool是否隐藏该列pkbool是否为主键标识、如果是则隐藏该列，值存入隐藏域中processfunctioncustomValuefunction自定义显示值。(如
flexigrid 参数说明 11Yision
项目用到这玩意，像样的API都是英文的，英文不好，所以经过各种搜集，flexigrid就整理了这么多用得上的东西，用不上的没有整理进来。flexigrid参数说明:height:200,//flexigrid插件的高度，单位为pxwidth:'auto',//宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题striped:true,//是否显示斑纹效果，默认是奇偶交
jQuery插件简单学习实例教程 sust2012
本文实例讲述了jQuery插件及其用法。分享给大家供大家参考，具体如下：（1）异步分页插件flexgrid1）前台jsInserttitlehere$(document).ready(function(){$("#flexigridTable").flexigrid({url:'flexigridAction.html',//请求数据的路径method:'POST',//请求方式dataType:
使用jQuery插件flexigrid搭建项目框架 u010235716 js
今天来了，不能懒，该写就写；1.既然是要用jQuery的JS。那就要放入项目中2.使用方式jsp+js:3.调用后台$(function(){ $("#flexgrid").flexigrid({ url:webroot+'sand/messageCodeImportAction!getPagedCityList.action', dataType:'json', colModel:[{ dis
【jquery】flexiGrid新增功能的方式沈金强
到目前为止，我用过的jquery表格插件只有jqGrid和flexiGrid。今天，只说后者。关于参数配置，使用方法，博客园文章很多。原生的flexiGrid架包不大，内容可以扩展，比如在每行数据列前增加一个checkBox用于选择，再比如原生flexiGrid中支持json和xml格式传递数据。而flexiGrid中json格式的数据则必须写为{id:"",rows：[{"id1","name1
flexigrid 参数说明卫道士
本文为转载http://simple1024.iteye.com/blog/1171090 项目用到这玩意，像样的API都是英文的，英文不好，所以经过各种搜集，flexigrid就整理了这么多用得上的东西，用不上的没有整理进来。 flexigrid参数说明: height:200,//flexigrid插件的高度，单位为px width:'auto',//宽度值，auto表示根据每列的宽
jQuery 表格工具集 jquery
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。 jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Aja
JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(二）服务端查询、快速查询和Html模板 flexigrid
开始之前，看下最新的v1.2版本有些什么修复快速查询时的键盘回车事件与控件外围事件的冲突的问题。修复快速查询时设置正则表达式时可能导致的语法错误的问题。数据提供方法 DataHandler 将不再强制要求与列的绑定顺序一致，现在通过返回的 DataTable 中的 ColumnName 自动绑定到合适的列，所以，请保证您的 DataTa
dotNetFlexGrid-asp.net的异步表格控件 asp.net
dotNetFlexGrid-asp.net的异步表格控件使用指南 1.简介 JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid是一款asp.net原生的异步表格控件，它的前身是Jquery FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为asp.net 控件，提供了简单易
Flexigrid去掉列选择 flexigrid
Flexigrid中会出现列选择的小黑箭头，有时挺讨厌，想去掉。发现没有控制的地方，于是自己加。在flexigrid.js中增加在定义中增加 p = $.extend({ //apply default properties height: 200, //default height width: 'auto', //auto width st
Flexigrid折行显示问题 flexigrid
上会写的Flexigrid折行显示时，获取值有问题，报错。 getRows: function(){ //add by jej var rtnList = new Array(); var objRows = $('.trSelected', $(t)); if(objRows!=null){ for(var i=0;i<
Flexigrid的编辑功能 flexigrid
editCells:function(){ if(!isEditing){ isEditing = true; $('tbody tr',$(t)).each(function () { for(var i=0;i<this.cells.length;i++){ var td = this.cells[i];
asp.net mvc flexigrid应用实例 flexigrid
本节主要讲解下jquery下的felxigrid在asp.net mvc下的应用经过测试在IE下有点小问题，但是在ff下没问题，报在IE下不支持$.outerwidth此属性，百度了很久不知道有什么替代属性，暂且先放一下这个问题，希望高手求解。先看下效果图吧： IE下报错的语句图，火狐没问题，希望高手求解：项目结构图：下面我简单的讲解下实现思路： 1、创
插入表主键冲突做更新 a-john
有以下场景：用户下了一个订单，订单内的内容较多，且来自多表，首次下单的时候，内容可能会不全（部分内容不是必须，出现有些表根本就没有没有该订单的值）。在以后更改订单时，有些内容会更改，有些内容会新增。问题：如果在sql语句中执行update操作，在没有数据的表中会出错。如果在逻辑代码中先做查询，查询结果有做更新，没有做插入，这样会将代码复杂化。解决： mysql中提供了一个sql语
Android xml资源文件中@、@android:type、@*、？、@+含义和区别 Cb123456 @+@?@*
一.@代表引用资源 1.引用自定义资源。格式：@[package:]type/name android：text="@string/hello" 2.引用系统资源。格式：@android:type/name android:textColor="@android:color/opaque_red"
数据结构的基本介绍天子之骄数据结构散列表树、图线性结构价格标签
数据结构的基本介绍数据结构就是数据的组织形式，用一种提前设计好的框架去存取数据，以便更方便，高效的对数据进行增删查改。正确选择合适的数据结构，对软件程序的高效执行的影响作用不亚于算法的设计。此外，在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈，堆等，就是经典的数据结构。经典的数据结构大致如下：一：线性数据结构 (1)：列表 a
通过二维码开放平台的API快速生成二维码一炮送你回车库 api
现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。 html代码如下:(二维码将生成在这div下) ? 1 &nbs
ImageIO读取一张图片改变大小 3213213333332132 java IO image BufferedImage
package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon
myeclipse集成svn（一针见血） 7454103 eclipse SVN MyEclipse
&n
装箱与拆箱----autoboxing和unboxing darkranger J2SE
4.2　自动装箱和拆箱基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便，但提供方便的同时表示隐藏了细节，建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1　autoboxing和unboxing 在Java中，所有要处理的东西几乎都是对象(Object)
ajax传统的方式制作ajax aijuans Ajax
//这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+
只用jre的eclipse是怎么编译java源文件的？ avords java eclipse jdk tomcat
eclipse只需要jre就可以运行开发java程序了，也能自动编译java源代码，但是jre不是java的运行环境么，难道jre中也带有编译工具？还是eclipse自己实现的？谁能给解释一下呢问题补充：假设系统中没有安装jdk or jre，只在eclipse的目录中有一个jre，那么eclipse会采用该jre，问题是eclipse照样可以编译java源文件，为什么呢？ &nb
前端模块化 bee1314 模块化
背景：前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。 JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所
处理百万级以上的数据处理 bijian1013 oracle sql 数据库大数据查询
一.处理百万级以上的数据提高查询速度的方法： 1.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。 2.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 o
mac 卸载 java 1.7 或更高版本征客丶 java OS
卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后，还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后，还可以执行 java
【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析 bit1129 Stream
第一步，Flume和Kakfa对接，Flume抓取日志，写到Kafka中第二部，Spark Streaming读取Kafka中的数据，进行实时分析本文首先使用Kakfa自带的消息处理（脚本）来获取消息，走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件，下载地址：https://github.com/beyondj2ee/f
Erlang vs TNSDL bookjovi erlang
TNSDL是Nokia内部用于开发电信交换软件的私有语言，是在SDL语言的基础上加以修改而成，TNSDL需翻译成C语言得以编译执行，TNSDL语言中实现了异步并行的特点，当然要完整实现异步并行还需要运行时动态库的支持，异步并行类似于Erlang的process（轻量级进程），TNSDL中则称之为hand，Erlang是基于vm(beam)开发，
非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个 ljy325 企业应用
　非常希望有一个预防疲劳的java软件，我看新闻和网站，国防科技大学的科学家累死了，太疲劳，老是加班，不休息，经常吃药，吃药根本就没用，根本原因是疲劳过度。我以前做java,那会公司垃圾，老想赶快学习到东西跳槽离开，搞得超负荷，不明理。深圳做软件开发经常累死人，总有不明理的人，有个软件提醒限制很好，可以挽救很多人的生命。相关新闻：（1）IT行业成五大疾病重灾区：过劳死平均37.9岁
读《研磨设计模式》-代码笔记-原型模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法： * 1.public Product copy(Product p){} * 2.publi
配置管理---svn工具之权限配置 chenyu19891124 SVN
今天花了大半天的功夫，终于弄懂svn权限配置。下面是今天收获的战绩。安装完svn后就是在svn中建立版本库，比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos component webapps 在conf里面的auth里赋予的权限配置为 [groups]
浅谈程序员的数学修养 comsci 设计模式编程算法面试招聘
浅谈程序员的数学修养
批量执行 bulk collect与forall用法 daizj oracle sql bulk collect forall
BULK COLLECT 子句会批量检索结果，即一次性将结果集绑定到一个集合变量中，并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。有关FORALL语句的用法请参考：批量SQL之 F
Linux下使用rsync最快速删除海量文件的方法 dongwei_6688 OS
1、先安装rsync：yum install rsync 2、建立一个空的文件夹：mkdir /tmp/test 3、用rsync删除目标目录：rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了，删除的速度会非常快。rsync实际上用的是替换原理，处理数十万个文件也是秒删。
Yii CModel中rules验证规格 dcj3sjt126com rules yii validate
Yii cValidator主要用法分析： yii验证rulesit 分类： Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError
基于vagrant的redis主从实验 dcj3sjt126com vagrant
平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从实现思路制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box 制作sentos6.5+redis的box mkdir vagrant_redis cd vagrant_
Memcached(二)、Centos安装Memcached服务器 frank1234 centos memcached
一、安装gcc rpm和yum安装memcached服务器连接没有找到，所以我使用的是make的方式安装，由于make依赖于gcc，所以要先安装gcc 开始安装，命令如下，[color=red][b]顺序一定不能出错[/b][/color]：建议可以先切换到root用户，不然可能会遇到权限问题：su root 输入密码...... rpm -ivh kernel-head
Remove Duplicates from Sorted List hcx2013 remove
Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return&
Spring4新特性——JSR310日期时间API的支持 jinnianshilongnian spring4
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
浅谈enum与单例设计模式 247687009 java 单例
在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种)，两者同是私有构造器，导出静态成员变量，以便调用者访问。第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S
使用switch条件语句需要注意的几点 openwrt c break switch
1. 当满足条件的case中没有break，程序将依次执行其后的每种条件（包括default）直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa
配置Spring Mybatis JUnit测试环境的应用上下文 schnell18 spring mybatis JUnit
Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有：单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。第二个问题的具体实例是：
Java 定时任务总结一 tuoni java spring timer quartz timertask
Java定时任务总结一.从技术上分类大概分为以下三种方式： 1.Java自带的java.util.Timer类，这个类允许你调度一个java.util.TimerTask任务; 说明： java.util.Timer定时器，实际上是个线程，定时执行TimerTask类 &
一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法 yangshangchuan rank 相似度计算文本相似度词袋模型余弦相似度
本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法，对于其他的用户生成内容站点类型也具有同样的适用性。最近在ITEYE博客频道上面出现了一种新型的商业广告形式，方法如下： 1、注册多个账号（一般10个以上）。 2、从多个账号中选择一个账号，发表1-2篇博文