JqGrid 显示表格
JqGrid 是前台的表格显示库,使用起来相当方便。
这里分享下本人使用过程中遇到的问题及解决方案
**
一.rowNum属性
**
1.如果不设置,默认显示数是20,也就是说超过20以后的数据。不再显示出来。初次使用JqGrid的经常忽视此属性,导致后期显示出现问题
2.-1
rowNum=-1时忽略显示行最大值的检查。一劳永逸。怎么样数据都可以显示出来。但是本人在使用过程中发现设置rowNum=-1时,表格无法显示最后一行的数据
显示数据从本地获取(datatype: “local”),怎么调试发现都无法显示最后一行。估计是JqGrid的一个bug。使用时一定要小心。
3.基于1,2 rowNum值最好就是设置为真实数据的最大值。是个动态值。
4.rowNum设置为真实数据的最大值。可能有人认为无法进行动态行添加了。其实不会这样,rowNum检查,只会发生在表格初期加载的时候。
**
二. sortable 属性
**
排序功能:
排序是必须要数据加载完全才可以进行排序,所以sortable属性一定要放在colModel属性后面,否则数据显示不完全,参靠下面设置
$("#security").jqGrid(
{
datatype :"local",
data :data,
mtype :"POST",
colNames :colNames,
colModel :colModel,
height :226,
sortable :true,
cellEdit :false,
rowNum : data.length
});
三.动态为每个cell设置css
为cell动态设置css。可以在表格加载完全后设置gridComplete属性中设置
gridComplete : function() {
//取得所有行ID
var rowIds = $("#data").getDataIDs();
for ( var index = 0; index < rowIds.length; index++) {
var $tr = $("#" + rowIds[index]);
//行背景标志位
var rowFlg = $("#data").getRowData(index).rowFlg;
var background = "";
if (rowFlg == "1") {
background = "add";
} else if (rowFlg == "2") {
background = "delete";
} else {
background = "update";
}
$tr.addClass(background);
//设置每个cell背景
$tr.find("td:eq(3)").addClass(
$("#data").getCell(rowIds[index],
"Flg3"));
$tr.find("td:eq(4)").addClass(
$("#data").getCell(rowIds[index],
"Flg4"));
$tr.find("td:eq(5)").addClass(
$("#data").getCell(rowIds[index],
"Flg5"));
}
}
以上是目前开发遇到的问题,和解决方案。后续继续补充
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?