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的message插件实现右下角弹出消息框
Jan 11 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
原生JS实现幻灯片
Feb 22 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 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中的命名空间详细介绍
2015/07/02 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
js判断密码强度的方法
2020/03/18 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Python的动态重新封装的教程
2015/04/11 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python如何实现数据的线性拟合
2019/07/19 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
《欢乐的泼水节》教学反思
2014/04/22 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
妈妈别哭观后感
2015/06/08 职场文书
公证书
2019/04/17 职场文书
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers