jgGrid注销表格（动态修改表头）以及前台分页
实例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//buttonInit()
//pageInit(dataObj["yc"],titleArr['yc']);
initType();
initEvent();
});
/**
* 初始化按钮的事件
*/
function initEvent(){
$("#btn-gro").on("click",".btn-h",function(){
var param={};
param.id="123";//获取主页面选中的端口id
$("#btn-gro .btn-h").removeClass("active");
$(this).addClass("active");
initType();
})
}
function initType(){
var type=$("#btn-gro .btn-h.active").attr("data-id");
var param={};
//根据type获取数据
param.data=dataObj[type],param.title=titleArr[type];
switch(type){
case "yc" :
param.colModel= [
{name : 'ID',width : 60,align : "center",sorttype : "int",editable:false,editoptions:{size:50}},
{name : 'devID',width : 90,align : "center",editable:true,sorttype : "text"}, //sorttype按照排序方式
{name : 'funNum',width : 100,align : "center",editable:true,sorttype : "text"},
{name : 'infoID',width : 100,align : "center",sorttype : "text"},
{name : 'largeCoeff',width : 100,align : "center",sorttype : "text"},
{name : 'correctData',width : 100,align : "center",sorttype : "text"},
{name : 'addedVal',width : 100,align : "center",sorttype : "text"},
{name : 'pointDesc',width : 100,align : "center",sorttype : "text"},
{name : 'value',width : 100,align : "center",sorttype : "text"},
{name : 'setVal',width : 100,align : "center",sorttype : "text"},
{name : 'equiCoeff',width : 100,align : "center",sorttype : "text"},
{name : 'shorthand',width : 100,align : "center",sorttype : "text"},
]
break;
case 'yx':
param.colModel= [
{name : 'ID',width : 60,align : "center",sorttype : "int",editable:false,editoptions:{size:50}},
{name : 'devID',width : 90,align : "center",editable:true,sorttype : "text"}, //sorttype按照排序方式
{name : 'funNum',width : 100,align : "center",editable:true,sorttype : "text"},
{name : 'infoID',width : 100,align : "center",editable:true,sorttype : "text"},
{name : 'relPoint',width : 100,align : "center",sorttype : "text"},
{name : 'property',width : 100,align : "center",sorttype : "text"},
{name : 'value',width : 100,align : "center",sorttype : "text"},
{name : 'setVal',width : 100,align : "center",sorttype : "text"},
{name : 'desc',width : 100,align : "center",sorttype : "text"},
{name : 'pointWrite',width : 100,align : "center",sorttype : "text"},
{name : 'userDef',width : 100,align : "center",sorttype : "text"}
]
break;
}
console.log(param);
initTable(param);
}
function getData(data,title){
$.jgrid.gridUnload('list2'); //注销表格
pageInit(data,title);
}
/**
* 初始化表格
*/
function initTable(param){
var mydata=param.data;
$.jgrid.gridUnload('list2'); //注销表格
var lastsel;
jQuery("#list2").jqGrid(
{
datatype : "local",
colNames : param.title,
colModel :param.colModel,
gridComplete:function(){
$("#gridpager").css("width","100%");
var newWidth=$("#gridpager").width()+2; //表格多了2像素边框
$("#gridpager").css("width",newWidth);
},
rowNum:20,
scrollOffset:0,
viewrecords : true,
rowList:[10,20,40],
pager :'#gridpager',
multiselect : true,
rownumbers:true,
//width:'100%',
autowidth:true, //自适应宽度
height:'auto'
});
var localData = {page: 1, total: 2, records: 2, rows: []};
localData.rows = param.data;
localData.records =mydata.length;
localData.total = (mydata.length % 2 == 0) ? (mydata.length / 2) : (Math.floor(mydata.length / 2) + 1);
var reader = {
root: function(obj) { return localData.rows; },
page: function(obj) { return localData.page; },
total: function(obj) { return localData.total; },
records: function(obj) { return localData.records; }, repeatitems : false};
$("#list2").setGridParam({data: localData.rows, reader: reader}).trigger('reloadGrid');
}
</script>
</body>
</html>
效果
jgGrid注销表格（动态修改表头）以及前台分页的更多相关文章
- [HTML]js动态修改表格里面的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...
- 关于devexpress报表XtraReport，动态修改报表样式（.repx格式），动态添加数据并使用的理解
一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...
- JQuery实现表格动态增加行并对新行添加事件
实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...
- 使用 iview Table 表格组件修改操作的显示隐藏
使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...
- Vue电商后台管理系统项目第2天-首页添加表格动态渲染数据&分页
0x01.使用Github学习的姿势 基于昨天的内容,今天的内容需要添加几个单文件组件,路由文件也需要做相应的增加,今天重点记录使用Element-UI中的表格组件实现数据动态渲染的实现流程和分页功能 ...
- fsLayuiPlugin数据表格动态转义
数据表格动态转义提供一种更简洁的方式,主要解决前端laytpl模板转义的问题,对于一些简单的,例如:状态展示,我们可以通过前端编写laytpl模板来处理:对于动态的数据,通过这种静态方式是没有办法处理 ...
- ReactNative 根据scrollView/listview滑动距离动态修改NavBar颜色
我们常见某些APP上滑的时候,NavBar颜色会从透明渐变为某种颜色 原理非常简单,根据scrollView的回调动态修改NavBar的透明度即可. 在RN中,尤其是ListView中这个回调不是很好 ...
- thinkphp 3.2.3 动态修改conf配置文件
thinkphp 3.2.3 的C()方法能修改配置文件,但是是动态修改的,没有真正的更改文件. 我查了网上网友分享的方法,都不怎么合适,我就自己摸索写了一个,配置写到text.php中,我的目录如下 ...
- 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图
引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...
随机推荐
- hdu2364之BFS
Escape Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- [转发]RTH试用手记之“外场应用”
年初,罗德与施瓦茨公司(Rohde & Schwarz)推出了第一款的手持示波器,从指标上看,该示波器打破了传统手持器功能简单.指标水平低.结构粗糙的印象,取而代之达到了主流台式数字示波器的性 ...
- gvim 全屏 插件
1.这里下载插件zip解压后,将fullscreen.dll放到gvim.exe同目录下 2.执行 :call libcallnr()//切换全屏模式 3.上面的命令非常麻烦,可以在_vimrc中ma ...
- [Erlang36]kerl轻松管理安装各种OTP版本
kerl只有一个目标:让我们在不同的OTP版本间随意切换.他是一个纯Bash项目.简单实用的工作利器! Readme里面用法已说明得非常清楚了.建议按流程来一次. 1.下载 安装(一个bash脚本,根 ...
- [Erlang27]如何监控指定目录下的*.beam文件，如果有改动就更新到指定的节点?
在Erlang In Anger第二章中讲到使用rebar来创建一个Erlang项目(Application或Project) 但美中不足的只是给出了指引,但没有给出详细的步骤. 下面我们就使用reb ...
- Linux带有时间控制的多进程bash脚本
目标 以可控制的多进程执行,达到最大执行时长后停止脚本. 思路 1.产生fifo管道,并预填充n个值(与并发数相等) 2.记录脚本本身PID并启动计时器进程(计时终止后杀脚本本身PID) 3.并发执行 ...
- 毕业回馈—89C51之GPIO使用
STC89C51系列单片机共有如下几类GPIO口: (1)P0.0-P0.7: 对应DIP40封装的39-32号引脚:P0口既可以作为输入/输出GPIO口,也可以作为地址/数据复用总线使用. a)P0 ...
- Promise之你看得懂的Promise
本文由作者陈旭锋(任职网易考拉)授权网易云社区发布. Promise源码详解 学习知识要善于思考,思考,再思考. -- 爱因斯坦 1.回调地狱 曾几何时,我们的代码是这样的,为了拿到回调的结果,不得不 ...
- pageadmin CMS网站建设教程：网页设计的常用参数
由于网络速度问题,我们需要考虑图片大小对传输速度的影响,如果图片太大就会影响浏览速度,访问者很快就会对这个网站失去了兴趣,只有充分了解图片质量与下载速度的关系,并了解不同的文件格式,才能更有效的表达内 ...
- 2018-2019 20165219 网络对抗 Exp5 MSF基础
实验内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.1一个主动攻击实践,如ms08_067; (1分) 1.2 一个针对浏览器的攻击,如ms ...