FlexGrid 控件的使用 摘自：大道至简

Jquery FlexGrid 官方地址：http://www.flexigrid.info/

 

height: 200, //flexigrid插件的高度，单位为px

width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算

striped: true, //是否显示斑纹效果，默认是奇偶交互的形式

novstripe: false,

minwidth: 30, //列的最小宽度

minheight: 80, //列的最小高度

resizable: true, //是否可伸缩

url: false, //ajax方式对应的url地址

method: ‘POST’, // 数据发送方式

dataType: ‘xml’, // 数据加载的类型

errormsg: ‘Connection Error’,//错误提升信息

usepager: false, //是否分页

nowrap: true, //是否不换行

page: 1, //默认当前页

total: 1, //总页面数

useRp: true, //是否可以动态设置每页显示的结果数

rp: 15, // 每页默认的结果数

rpOptions: [10,15,20,25,40],//可选择设定的每页结果数

title: false,//是否包含标题

pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式

procmsg: ‘Processing, please wait …’,//正在处理的提示信息

query: ”,//搜索查询的条件

qtype: ”,//搜索查询的类别

nomsg: ‘No items’,//无结果的提示信息

minColToggle: 1, //minimum allowed column to be hidden

showToggleBtn: true, //show or hide column toggle popup

hideOnSubmit: true,//隐藏提交

autoload: true,//自动加载

blockOpacity: 0.5,//透明度设置

onToggleCol: false,//当在行之间转换时

onChangeSort: false,//当改变排序时

onSuccess: false,//成功后执行

onSubmit: false // 调用自定义的计算函数

 

一个简单的例子

 

Flexgrid应用

简单例子

看了看它接收json数据。它的格式应该为：

page:"1",total:"2",rows:[{cell:["1","宋江"……]},{cell:[……]}]}

 

所以返回的应该是这种格式。

数据由list表提供，如下：

·ashx

string strJson = "{page:\"1\",total:\"2\",rows:[{cell:[\"1\",\"宋江\",\"天魁星\",\"黑三郎\"]},{cell:[\"2\",\"吴用\",\"天机星\",\"智多星\"]}]}";

context.Response.Write(strJson);

 

page：当前页

total：页总数

·flexgrid

引入jquery库与flexgrid库及相关css样式

$("#flex1").flexigrid

({

    url: 'webdata/flex_1.ashx',

    dataType: 'json',

    colModel: [

    { display: '编号', name: 'Unid', width: 40, align: 'center' },

    { display: '姓名', name: 'CustomerName', width: 180, align: 'left' },

    { display: '称号', name: 'Memo', width: 120, align: 'left' },

    { display: '描述', name: 'Other', width: 130, align: 'left' }

    ],

    sortname: "Unid",

    sortorder: "asc",

    usepager: true,

    striped: true,

    title: '简单的应用',

    useRp: false,

    rp: 10,

    width: 'auto',

    height: 255

})

·页面加一个table，起名：flex1

<table id="flex1" style="display:none"></table>

 

其中flexigrid的js要放在table下边。

 

有点问题：

·Displaying 部分，用中文会显示乱码，现在没有解决。有解决的请告知一下。

·firefox中正常，但在ie中加载有延迟且多数不能显示。同样，有解决的请告知一下。