jqgrid 设置冻结列
有时,jqgrid表格的列非常多,而表格的宽度值是固定的,我们需要在表格底部出现滚动条,并且固定前面几个列作为数据参照项,如何实现?
需要用的jqgrid冻结列,步骤如下:
1)设置需要冻结的列属性,frozen: ture //ture:启用冻结
2)将设置了冻结的列放置在字段集合的前面部分(一定注意)
3)设置两个属性:autoScroll: false,shrinkToFit: false //当autoScroll和shrinkToFit均为false时,会出现行滚动条
4)调用jqgrid的 setFrozenColumns 方法。 $("#jqGrid").jqGrid('setFrozenColumns');
代码示例如下:
$("#jqGrid").jqGrid({
...
colModel: [
{ label: '<a href="HtmlPage1.html" title="测试标题">OrderID</a>', name: 'OrderID', key: true, frozen: true,width: 75 },
{
label: '<label title="测试标题2">Customer ID</label>', editable: true, name: 'CustomerID', width: 150,frozen: true,
edittype: "select",
editoptions: {
value: "WILMK:张三;TRADH:李四"
}
},
{ label: 'Order Date', name: 'OrderDate', editable: true, width: 150 },
{ label: 'Freight', name: 'Freight', editable: true, width: 150 },
{
label: 'Ship Name',
name: 'ShipName',
width: 90,
editable: true,
edittype: "select",
editoptions: {
value: "String:字符串;Vins et alcools:数值型;Int32:整型;Int64:长整型;Int16:短整型;DateTime:时间"
}
},
],
autoScroll: false,//当autoScroll和shrinkToFit均为false时,会出现行滚动条
shrinkToFit: false,//是否列宽度自适应。true=适应 false=不适应
...
}); $("#jqGrid").jqGrid('setFrozenColumns');//设置冻结列生效
注意:
1)冻结列与多表头会产生冲突,显示的冻结列与多表头错位。不建议同时支持冻结列和多表头
2)冻结列必须是最前面的列,如果两个冻结列中间有一个隐藏列,则隐藏列之后的冻结列会失效
再次强调:请将冻结列放置一堆,并位于列集合的最前面
jqgrid 设置冻结列的更多相关文章
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...
- easy ui datagrid 设置冻结列
为了冻结列,您需要定义 frozenColumns 属性.frozenColumn 属性和 columns 属性一样. $('#tt').datagrid({ title:'Frozen Column ...
- JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能:彻底解决高度问题
前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案 JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bo ...
- EasyUI 冻结列
一.如果是js绘制的,设置frozenColumn属性就可以,frozenColumn 属性和 columns 属性都是设置列,frozenColumn是设置冻结列 $('#tt').datagrid ...
- jqGrid冻结列
jqgrid冻结列 冻结列:就是横向移动表格时,让某一列保持不动 做法: 1.colModel的行要加上属性: frozen:true.注意:冻结列必须从第一列开始,包括隐藏列 2.加载jqgrid后 ...
- jqGrid怎样冻结指定的列
第一步设置colModel 列内的 frozen: true: 第二步设置表格初始时宽度 shrinkToFit: false, 第三步设置 $gridTable.jqGrid('setFroze ...
- Jqgrid入门-Jqgrid设置二级表头(六)
上一章已经说明了Jqgrid结合Struts2+json展示数据,这一章主要探讨Jqgrid如何设置二级表头,类似这样的效果.如: 要实现这个功能,其实也不难.通过Jqgrid的s ...
- jqgrid 设置多表头
有时,我们需要给jqgrid设置多表头信息,多表头区域会有行合并/列合并,如何实现? 1)通过jqgrid的 setGroupHeaders 方法来实现一个行的多表头, 2)如果有多行表头,需要设置多 ...
- Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
随机推荐
- jquery插件-fullpage.js
1⃣️ 简介 fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 ...
- ubutu强制关闭应用程序的方法
1.打开终端,输入命令 top 2.查看应用程序PID号,比如是8080 3.然后终端输入 kill 8080 ,行了
- HBase安装与应用
1. 参考说明 参考文档: https://hbase.apache.org/book.html 2. 安装环境说明 2.1. 环境说明 CentOS7.4+ Hadoop2.7.5的伪分布式环 ...
- Linux下动态链接库加载路径
引子 近日,服务器迁移后,偷懒未重新编译nginx的,直接./nginx启动,结果遇到如下问题: "error while loading shared libraries" 这是 ...
- Mongodb Windows 集群
我在一台Windows机器下搭建了一个 Replica Sets + Sharding 测试集群环境,以此作为我后续对于Mongodb更进一步学习的实验平台. 只有一台windows机器,配置方案:1 ...
- 对C#Chart控件使用整理
转:https://blog.csdn.net/andrewniu/article/details/78770186 https://blog.csdn.net/andrewniu/article/d ...
- Oracle的sys和system默认密码
system默认:manager sys默认:change_on_install 使用SQL Plus登录数据库时,system使用密码manager可直接登录. 但如果是sys用户,密码必须加上as ...
- C#中获取数组中相加和最接近或等于(<=)给定值的算法
, ,,,,,,,,, }; List<List<int>> mylist = new List<List<int>>(); int length = ...
- 配置jboss EAP 6.4 数据库连接超时时间
Environment Red Hat JBoss Enterprise Application Platform (EAP) 6.x 7.x Issue Server throws followin ...
- CSS| 實例---寬度自由調節button,圖片切換
<html lang="en"> <head> <meta charset="utf-8"/> <title>I ...