recherche

Maison  >  Article  >  interface Web  >  Le plug-in jQuery Grid obtient dynamiquement les instances de méthode des colonnes et des champs de colonnes

Le plug-in jQuery Grid obtient dynamiquement les instances de méthode des colonnes et des champs de colonnes

小云云
小云云original
2018-01-23 16:12:472622parcourir

Cet article présente principalement la méthode du plug-in jQuery jqGrid pour obtenir dynamiquement des colonnes et des champs de colonnes, et analyse les compétences opérationnelles associées du plug-in de table jqGrid pour les attributs de champ de table sous forme d'exemples. référez-vous-y. J'espère que cela pourra aider tout le monde.

1. Contexte du problème

Le plug-in de table jqGrid utilise sa propre méthode pour obtenir les champs d'en-tête et de table de la table ; et affichez-les dans la fenêtre contextuelle. Utilisez la case à cocher pour cocher

2. Code source d'implémentation


<!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. Résultat de la mise en œuvre

(1) Initialisation

(2) Cliquez sur le bouton

Connexe recommandations :

JQuery implémente des exemples fonctionnels similaires à GridView

JS génère rapidement divers outils de disposition de grille Introduction à Grid

Exemple d'implémentation détaillée de jqgrid Fonction d'édition simple sur une seule ligne


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un moyen simple d'implémenter le cryptage MD5 avec jQueryArticle suivant：Un moyen simple d'implémenter le cryptage MD5 avec jQuery

Articles Liés

Voir plus