집 > 기사 > 웹 프론트엔드 > jQuery 플러그인 Grid는 열과 열 필드의 메서드 인스턴스를 동적으로 얻습니다.

jQuery 플러그인 Grid는 열과 열 필드의 메서드 인스턴스를 동적으로 얻습니다.

小云云원래의: 2018-01-23 16:12:472603검색

이 글에서는 주로 jQuery 플러그인 jqGrid가 컬럼과 컬럼 필드를 동적으로 획득하는 방법을 소개하고, 테이블 필드 속성에 대한 테이블 플러그인 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 : &#39;id&#39;,
            index : &#39;id&#39;,
            label : &#39;序号&#39;,
            width : 60,
            align:&#39;center&#39;
          },{
            name : &#39;name&#39;,
            index : &#39;name&#39;,
            label : &#39;姓名&#39;,
            width : 120,
            align:&#39;center&#39;
          },{
            name : &#39;age&#39;,
            index : &#39;age&#39;,
            label : &#39;年龄&#39;,
            width : 120,
            align:&#39;center&#39;
          },{
            name : &#39;sex&#39;,
            index : &#39;sex&#39;,
            label : &#39;性别&#39;,
            width : 120,
            edittype : "select",
            formatter : &#39;select&#39;,
            editoptions : {
              value :&#39;0:男;1:女;&#39;
            },
            align:&#39;center&#39;
          },{
            name : &#39;qq&#39;,
            index : &#39;qq&#39;,
            label : &#39;QQ号&#39;,
            width : 120,
            align:&#39;center&#39;
          },{
            name : &#39;phone&#39;,
            index : &#39;phone&#39;,
            label : &#39;电话&#39;,
            width : 120,
            align:&#39;center&#39;
          },{
            name : &#39;address&#39;,
            index : &#39;address&#39;,
            label : &#39;地址&#39;,
            width : 200,
            align:&#39;center&#39;
          }],
          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:&#39;center&#39;,
          buttons: {
            "确定": function() {
              $(this).dialog( "close" );
            },
            "关闭": function() {
              $(this).dialog( "close" );
            }
          }
        });
        $("#column").button().on("click", function() {
          dialog.dialog("open");
          //获取列名
          var colNames=$("#jqTable").jqGrid(&#39;getGridParam&#39;,&#39;colNames&#39;);
          //获取列字段
          var colModel=$("#jqTable").jqGrid(&#39;getGridParam&#39;,&#39;colModel&#39;);
          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=&#39;checkbox&#39; id=&#39;"+newColumnValue[j]+"&#39; name=&#39;column&#39; checked=&#39;checked&#39;><label for=&#39;"+newColumnValue[j]+"&#39;>"+newColumnName[j]+"</label></td>";
            if((j+1)%5==0)
            {
              table += "</tr>";
            }
          }
          $("#tableColumn").empty().append(table);
        });
      });
    </script>
  </head>
  <body>
    <p>
      <table id="jqTable" class="table"></table>
    </p>
    <p>
      <button id="column" type="button">显示</button>
    </p>
    <p id="dialog-column" title="设置列">
      <table id="tableColumn" style="width: 100%; height: 100px;">
      </table>
    </p>
  </body>
</html>

3. 구현 결과

(1) 초기화

버튼 클릭

jQuery 플러그인 Grid는 열과 열 필드의 메서드 인스턴스를 동적으로 얻습니다.

관련 기사