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 ...

随机推荐

access建立sql查询语句运行查询语句
1.打开一个Access数据库文件 2.点击“创建”标签中的“查询设计”,会弹出一个“显示表”的对话框,点击“关闭”将其关闭 3.这时会有一个名为“查询*”的窗口,还不能输入SQL语句 4.点击左上角 ...
Rsyslog远程传输的几种方式
基本介绍 Rsyslog是一个syslogd的多线程增强版,rsyslog vs. syslog-ng 链接是rsyslog官方和syslog特性和性能上的一些对比,目前大部分Linux发行版本默认也 ...
LUN
1概念 LUN的全称是Logical Unit Number,也就是逻辑单元号.我们知道SCSI总线上可挂接的设备数量是有限的,一般为8个或者16个,我们可以用Target ID(也有称为SCSI I ...
linux下svn服务器的搭建
网上的教程实在是太恶心了,不是太老,就是有问题,刚参考的一篇文章也有问题.自己记录下来,以后用就方便了,现在一边重新安装一遍,一边记录.笔者亲测,今天是5月29号深夜. linux用的是centos6 ...
mdadm 软RAID
mdadm是linux下用于创建和管理软件RAID的命令,是一个模式化命令.但由于现在服务器一般都带有RAID阵列卡,并且RAID阵列卡也很廉价,且由于软件RAID的自身缺陷(不能用作启动分区.使用C ...
强制TFS用户与计算机（域）用户同步
默认情况下,添加到域AD组中的账户不会立刻同步到TFS中. TFS每小时与域控制器同步一次,将计算机安全组中的账户添加到TFS中. 但是可以通过下面几种方式强制TFS立刻同步域中的账户: 1. 在TF ...
Python学习之全局变量与global
刚学习Python,遇到个问题:为什么有些定义在函数外的变量可以直接被函数使用,有些就不行呢? 如: count = 0 def change(): count += 1 change() # 报错 ...
使用Fiddler代理调试本地手机页面
从事前端开发的同学一定对 Fiddler 不陌生,它是一个非常强大的http(s)协议分析工具.我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工具来调试你的webapp,如果你 ...
Jmeter使用吞吐量控制器实现不同的用户操纵不同的业务
一.需求需求:博客系统,模拟用户真实行为,80%的用户阅读文章,20%的用户创建文章,创建文章的用户随机的删除或者修改文章. 二.脚本实现 80%的用户查看文章 20%用户创建文章根据post_i ...
oracle中将number类型毫秒值转为时间类型
在搞数据库时,发现有这样的一个字段,类型是NUMBER(38),查看了一下里面的数据,都是这样的: 13239576781141321326994295132212930680413221297162 ...

jgGrid注销表格（动态修改表头）以及前台分页

jgGrid注销表格（动态修改表头）以及前台分页的更多相关文章

随机推荐

热门专题