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 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
JS数组操作之增删改查的简单实现
Aug 21 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
Vue Object 的变化侦测实现代码
Apr 15 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
转PHP手册及PHP编程标准
2006/12/17 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php二维数组转成字符串示例
2014/02/17 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
JS跨域问题详解
2014/11/25 Javascript
js使用心得分享
2015/01/13 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python实现把数字转换成中文
2015/06/29 Python
玩转python爬虫之正则表达式
2016/02/17 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
tensorflow之并行读入数据详解
2020/02/05 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
个人作风剖析材料
2014/02/02 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
风之谷观后感
2015/06/11 职场文书