欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-08 22:18:46
本文实例讲述了jquery插件jqgrid动态获取列和列字段的方法。分享给大家供大家参考,具体如下: 1、问题背景 jqgrid表格插件,利用自身方法获取表格的表头和表...

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jquery常用插件及用法总结》、《jquery中ajax用法总结》、《jquery表格(table)操作技巧汇总》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结

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