jQuery插件jqGrid动态获取列和列字段的方法


Posted in Javascript onMarch 03, 2017

本文实例讲述了jQuery插件jqGrid动态获取列和列字段的方法。分享给大家供大家参考,具体如下:

1、问题背景

jqGrid表格插件,利用自身方法获取表格的表头和表格字段;获取列名和列字段名显示在弹窗里,用复选框进行勾选

2、实现源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jqGrid动态获取列和列字段</title>
    <link rel="stylesheet" href="css/ui.jqgrid.css" rel="external nofollow" />
    <link rel="stylesheet" href="css/ui.jqgrid-bootstrap-ui.css" rel="external nofollow" />
    <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
    <link rel="stylesheet" href="css/bootstrap-theme.css" rel="external nofollow" />
    <link rel="stylesheet" href="css/jquery-ui.css" rel="external nofollow" />
    <link rel="stylesheet" href="css/jquery-ui.theme.css" rel="external nofollow" />
    <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.jqGrid.min.js" ></script>
    <script type="text/javascript" src="plugins/grid.setcolumns.js"></script>
    <style>
      th{
        border: 1px solid #ABABAB;
        line-height: 20px;
        vertical-align: middle;
      }
      td{
        line-height: 20px;
      }
    </style>
    <script>
      $(document).ready(function(){
        $("#jqTable").jqGrid({
          url:"data/student.json",
          height:380,
          datatype:"json",
          colNames:["序号","姓名","年龄","性别","QQ号","电话","地址"],
          colModel:[{
            name : 'id',
            index : 'id',
            label : '序号',
            width : 60,
            align:'center'
          },{
            name : 'name',
            index : 'name',
            label : '姓名',
            width : 120,
            align:'center'
          },{
            name : 'age',
            index : 'age',
            label : '年龄',
            width : 120,
            align:'center'
          },{
            name : 'sex',
            index : 'sex',
            label : '性别',
            width : 120,
            edittype : "select",
            formatter : 'select',
            editoptions : {
              value :'0:男;1:女;'
            },
            align:'center'
          },{
            name : 'qq',
            index : 'qq',
            label : 'QQ号',
            width : 120,
            align:'center'
          },{
            name : 'phone',
            index : 'phone',
            label : '电话',
            width : 120,
            align:'center'
          },{
            name : 'address',
            index : 'address',
            label : '地址',
            width : 200,
            align:'center'
          }],
          sortname : "id",
          sortorder : "desc",
          viewrecords : true,
          rownumbers:true,
          autowidth:true,
          jsonReader : {
            repeatitems : false
          }
        });
        var dialog = $("#dialog-column").dialog({
          autoOpen :false,
          modal : true,
          resizable : true,
          height: "auto",
          width: 400,
          align:'center',
          buttons: {
            "确定": function() {
              $(this).dialog( "close" );
            },
            "关闭": function() {
              $(this).dialog( "close" );
            }
          }
        });
        $("#column").button().on("click", function() {
          dialog.dialog("open");
          //获取列名
          var colNames=$("#jqTable").jqGrid('getGridParam','colNames');
          //获取列字段
          var colModel=$("#jqTable").jqGrid('getGridParam','colModel');
          var table = "";
          var newColumnName = [];
          var newColumnValue = [];
          for (var i=0;i<colNames.length;i++)
          {
            var columnHidden = colModel[i].hidden;
            var columnName = colModel[i].name;
            if(columnHidden==false && columnName != "rn")
            {
              newColumnName.push(colNames[i]);
              newColumnValue.push(columnName);
            }
            console.info(columnName);
          }
          for(var j=0;j<newColumnName.length;j++)
          {
            if(j%5==0)
            {
              table += "<tr>";
            }
            table += "<td><input type='checkbox' id='"+newColumnValue[j]+"' name='column' checked='checked'><label for='"+newColumnValue[j]+"'>"+newColumnName[j]+"</label></td>";
            if((j+1)%5==0)
            {
              table += "</tr>";
            }
          }
          $("#tableColumn").empty().append(table);
        });
      });
    </script>
  </head>
  <body>
    <div>
      <table id="jqTable" class="table"></table>
    </div>
    <div>
      <button id="column" type="button">显示</button>
    </div>
    <div id="dialog-column" title="设置列">
      <table id="tableColumn" style="width: 100%; height: 100px;">
      </table>
    </div>
  </body>
</html>

3、实现结果

(1)初始化

jQuery插件jqGrid动态获取列和列字段的方法

(2)单击按钮

jQuery插件jqGrid动态获取列和列字段的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
javascript数组去掉重复
May 12 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 #Javascript
AngularJS表格添加序号的方法
Mar 03 #Javascript
JS实现双击内容变为可编辑状态
Mar 03 #Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 #Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 #Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 #Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 #Javascript
You might like
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python读写ini文件示例(python读写文件)
2014/03/25 Python
python中类的一些方法分析
2014/09/25 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
python读取文本中的坐标方法
2018/10/14 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
机电专业个人自荐信格式模板
2013/09/23 职场文书
双十佳事迹材料
2014/01/29 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
公司承诺函范文
2015/01/21 职场文书
党支部书记岗位职责
2015/02/15 职场文书
慰问信格式规范
2015/03/23 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
mysql查询的控制语句图文详解
2021/04/11 MySQL
Python基础之操作MySQL数据库
2021/05/06 Python