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中加载有延迟且多数不能显示。同样，有解决的请告知一下。
