suchen

Heim >Web-Frontend >js-Tutorial >Das jQuery-Plug-in Grid ruft dynamisch Methodeninstanzen von Spalten und Spaltenfeldern ab

Das jQuery-Plug-in Grid ruft dynamisch Methodeninstanzen von Spalten und Spaltenfeldern ab

小云云
小云云Original
2018-01-23 16:12:472663Durchsuche

In diesem Artikel wird hauptsächlich die Methode des jQuery-Plug-Ins jqGrid zum dynamischen Abrufen von Spalten und Spaltenfeldern vorgestellt und die zugehörigen Betriebsfähigkeiten des Tabellen-Plug-Ins jqGrid für Tabellenfeldattribute anhand von Beispielen analysiert Ich hoffe, es kann allen helfen.

1. Problemhintergrund

Das jqGrid-Tabellen-Plug-in verwendet eine eigene Methode, um den Spaltennamen und den Spaltenfeldnamen abzurufen und zeigen Sie sie im Popup-Fenster an, um

2. Implementierungsquellcode


<!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>

zu aktivieren 3. Implementierungsergebnis

(1) Initialisierung

(2) Klicken Sie auf die Schaltfläche

Verwandt Empfehlungen:

JQuery implementiert Funktionsbeispiele ähnlich wie GridView

JS generiert schnell verschiedene Rasterlayout-Tools. Rastereinführung

Beispiel für eine detaillierte jqgrid-Implementierung. Einfache Einzelzeilenbearbeitungsfunktion


Das obige ist der detaillierte Inhalt vonDas jQuery-Plug-in Grid ruft dynamisch Methodeninstanzen von Spalten und Spaltenfeldern ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine einfache Möglichkeit, die MD5-Verschlüsselung mit jQuery zu implementierenNächster Artikel：Eine einfache Möglichkeit, die MD5-Verschlüsselung mit jQuery zu implementieren

In Verbindung stehende Artikel

Mehr sehen