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中加载有延迟且多数不能显示。同样,有解决的请告知一下。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)