AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

74jqGrid - 冻结带有分组头的列

2023-10-25 233
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 74jqGrid - 冻结带有分组头的列

这个例子展示了新的冻结列功能。尝试去滚动水平的滚动条。

如我们看到了分组表头和行号都是支持的。需要注意的是支持分组表头只是在useColSpanStyle设置为false的时候。

HTML代码举例

<head>
    <title>jqGrid 实例</title>
  </head>
  <body>
    ···代码省略···
    <table id="gfrc2"></table> 
    <div id="pgfrc2"></div>
    ···代码省略···
  </body>
</html>

javascript代码举例

$(function(){
  pageInit();
});
function pageInit(){
  jQuery("#gfrc2").jqGrid({
       url:ctx+'/JSONNameData',
    datatype: "json",  
     colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
     colModel: [
           {name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen : true},
           {name: 'name', index: 'name', width: 100, frozen : true },
           {name: 'amount', index: 'amount', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'tax', index: 'tax', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'total', index: 'total', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'closed', index: 'closed', width: 95, align: 'center', formatter: 'checkbox',
              edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
           {name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
              edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
           {name: 'note', index: 'note', width: 150, sortable: false}
      ],
       rowNum:10,
      width:700,
       rowList:[10,20,30],
       pager: '#pgfrc2',
       sortname: 'invdate',
      viewrecords: true,
      sortorder: "desc",
    jsonReader: {
      repeatitems : false
    },
    shrinkToFit: false,
    rownumbers: true,
    caption: "Frozen Column with Group header",
    height: 'auto'
  });
  jQuery("#gfrc2").jqGrid('setGroupHeaders', {
    useColSpanStyle: false, 
    groupHeaders:[
    {startColumnName: 'id', numberOfColumns: 2, titleText: 'Client Details'}
    ]  
  });
  jQuery("#gfrc2").jqGrid('setFrozenColumns');
}

java servlet代码举例

$(function(){
  pageInit();
});
function pageInit(){
  jQuery("#gfrc2").jqGrid({
       url:ctx+'/JSONNameData',
    datatype: "json",  
     colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
     colModel: [
           {name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen : true},
           {name: 'name', index: 'name', width: 100, frozen : true },
           {name: 'amount', index: 'amount', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'tax', index: 'tax', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'total', index: 'total', width: 95, formatter: 'number', sorttype: 'number', align: 'right'},
           {name: 'closed', index: 'closed', width: 95, align: 'center', formatter: 'checkbox',
              edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
           {name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
              edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
           {name: 'note', index: 'note', width: 150, sortable: false}
      ],
       rowNum:10,
      width:700,
       rowList:[10,20,30],
       pager: '#pgfrc2',
       sortname: 'invdate',
      viewrecords: true,
      sortorder: "desc",
    jsonReader: {
      repeatitems : false
    },
    shrinkToFit: false,
    rownumbers: true,
    caption: "Frozen Column with Group header",
    height: 'auto'
  });
  jQuery("#gfrc2").jqGrid('setGroupHeaders', {
    useColSpanStyle: false, 
    groupHeaders:[
    {startColumnName: 'id', numberOfColumns: 2, titleText: 'Client Details'}
    ]  
  });
  jQuery("#gfrc2").jqGrid('setFrozenColumns');
}
文章标签：
Java
JavaScript
前端开发
阿甘兄
目录
相关文章
mrq4nk6ni2neg
|
机器学习/深度学习 存储 人工智能
云计算平台选择之路：AWS、Azure和Google Cloud的比较与抉择
在当今数字化时代，云计算平台扮演着企业转型和创新的关键角色。本文将对三大主流云计算平台——AWS、Azure和Google Cloud进行比较分析，为读者提供选择指南。我们将从性能、可靠性、生态系统、服务和定价等方面综合评估，以帮助读者做出最适合他们业务需求的决策。
mrq4nk6ni2neg
1553 0
Immerse
|
JSON 前端开发 JavaScript
搞定 XLSX 预览？别瞎找了，这几个库（尤其最后一个）真香！
本文来自【沉浸式趣谈】，探讨前端处理Excel的三大主流库：xlsx、Handsontable和ExcelJS。 - **xlsx**：轻量高效，适合简单读写数据，但样式支持有限。 - **Handsontable**：功能强大，提供类Excel在线编辑体验，但商用需付费且性能消耗较大。 - **ExcelJS**：现代全能，API友好，支持复杂样式与公式，免费开源，推荐用于精细处理场景。
Immerse
1177 0
搞定 XLSX 预览？别瞎找了，这几个库（尤其最后一个）真香！
javpower
|
自然语言处理 搜索推荐 算法
VectoRex：向量数据库
VectoRex 是一款高性能、可扩展的开源向量搜索引擎，专为现代 AI 和大数据应用设计。它具备轻量级、可嵌入和独立部署等优势，适用于推荐系统、图像搜索、自然语言处理等场景。
javpower
867 22
1941623231718325
|
存储 NoSQL 算法
使用图数据库进行复杂数据建模：探索数据关系的无限可能
【8月更文挑战第17天】图数据库以其高效的关系查询能力、直观的数据表示方式、灵活的数据模型和强大的可扩展性，在复杂数据建模和查询中展现出了巨大的潜力。随着大数据和人工智能技术的不断发展，图数据库的应用领域也将不断拓展和深化。对于需要处理复杂关系网络和数据关联性的场景来说，图数据库无疑是一个值得深入研究和应用的强大工具。
1941623231718325
478 1
楠竹11
|
人工智能 测试技术 决策智能
玩转智能体魔方！清华推出AgentSquare模块化搜索框架，开启AI智能体高速进化时代
清华大学研究团队提出模块化LLM智能体搜索（MoLAS）框架AgentSquare，将LLM智能体设计抽象为规划、推理、工具使用和记忆四大模块，实现模块间的轻松组合与替换。通过模块进化和重组机制，AgentSquare显著提升了智能体的适应性和灵活性，并在多个基准测试中表现出色，平均性能提高17.2%。此外，该框架还具备可解释性，有助于深入理解智能体架构对任务性能的影响。论文地址：https://arxiv.org/abs/2410.06153
楠竹11
540 10
QGS
|
SQL 弹性计算 Java
手搭手入门Spring boot+Mybatis+达梦数据库（国产数据库）
手搭手入门Spring boot+Mybatis+达梦数据库（国产数据库）
QGS
1822 0
天下无贼001
|
云安全 安全 网络安全
云计算与网络安全：技术融合下的安全挑战与应对策略
【10月更文挑战第33天】在数字化转型的浪潮中，云计算作为支撑现代企业IT架构的核心，其安全性成为业界关注的焦点。本文从云计算服务的基本概念出发，探讨了云环境下的网络安全风险，并分析了信息安全的关键技术领域。通过对比传统网络环境与云端的差异，指出了云计算特有的安全挑战。文章进一步提出了一系列应对策略，旨在帮助企业和组织构建更为坚固的云安全防护体系。最后，通过一个简化的代码示例，演示了如何在云计算环境中实施基本的安全措施。
天下无贼001
456 0
热爱技术的小郑
|
安全
如何修改Xshell中的字体颜色大小等样式 修改Vm虚拟机终端的字体颜色
这篇文章介绍了如何在Xshell中修改字体颜色、大小等样式，以及如何在虚拟机终端设置字体颜色，以实现统一和舒适的视觉效果。
热爱技术的小郑
602 0
如何修改Xshell中的字体颜色大小等样式 修改Vm虚拟机终端的字体颜色
楠竹11
|
机器学习/深度学习 人工智能 编解码
无限生成视频，还能规划决策，扩散强制整合下一token预测与全序列扩散
【8月更文挑战第15天】在AI领域，新训练范式“扩散强制”（DF）为序列生成模型带来革新。DF通过独立噪声级去噪token，实现稳定且可变长度的序列生成，支持引导生成高价值序列。其核心机制使模型学习揭露不同噪声级别的token。在视频预测等领域，DF展现出生成长序列的一致性及通过蒙特卡洛树引导提高决策质量的能力。理论与实证均验证了DF的有效性，尽管现有实现受限于小型RNN，未来有望拓展至更大模型与数据集。[论文](https://arxiv.org/pdf/2407.01392)
楠竹11
367 1
土木林森
|
前端开发 开发者 C#
WPF开发者必读：MVVM模式实战，轻松实现现代桌面应用架构，让你的代码更上一层楼！
【8月更文挑战第31天】在WPF应用程序开发中，MVVM（Model-View-ViewModel）模式通过分离应用程序的逻辑和界面，提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件：Model（数据模型）、View（用户界面）和ViewModel（处理数据绑定和逻辑），并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式，开发者可以构建更加高效和可扩展的桌面应用程序。
土木林森
1057 0