2013-05-28 1 views
1

J'utilise le plugin w2ui (http://w2ui.com/).Modifing w2ui plugin

Considérons cet exemple: 1

  1. Je veux quand le bouton Ajouter est cliqué sur une ligne modifiable vide est apparu dans la grille pour ajouter une nouvelle ligne?

  2. Je n'ai pas trouvé de config pour cacher le champ de recherche, comment puis-je le cacher?

  3. Comment puis-je définir une colonne comme ID? actuellement, il suffit de reconnaître recid.

Répondre

1

Voici un exemple comment ajouter de nouveaux enregistrements dans la grille quand un bouton est cliqué:

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" media="screen" href="../css/w2ui.css" /> 
    <script type="text/javascript" src="../js/jquery.min.js"></script> 
    <script type="text/javascript" src="../js/w2ui.js"></script> 
    <script> 
    $(function() { 
     $('#grid').w2grid({ 
     name: 'grid', 
     show: { 
      toolbar: true, 
      footer: true, 
      header: true, 
      columnHeaders: true, 
      lineNumbers: true, 
      toolbarDelete: true, 
      toolbarSave: true, 
      toolbarAdd: true 
     }, 
     columns: [   
      { field: 'recid', caption: 'ID', size: '50px', sortable: true, resizable: true, searchable: 'int' }, 
      { field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true, searchable: true, 
      editable: { type: 'text' } 
      }, 
      { field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true, searchable: true, 
      editable: { type: 'text' } 
      }, 
     ], 
     onAdd: function (target, data) { 
      var recid = 1; 
      if (this.records.length > 0) recid = (Math.max.apply(Math, this.find({}))) + 1; 
      this.add({ recid: recid }); 
      $('#grid_grid_edit_'+ (this.records.length - 1) +'_1').focus(); 
     }, 
     onSave: function (target, data) { 
      var obj = this; 
      console.log(data); 
      data.onComplete = function() { 
      for (var r in data.changed) { 
       obj.get(data.changed[r].recid).editable = false; 
      } 
      obj.refresh(); 
      } 
     } 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
     <div id="grid" style="width: 100%; height: 500px;"></div> 
    </body> 
    </html> 

1
  1. Comme il est une grande question. Je vais y répondre dans le prochain message.

  2. Pour masquer le champ de recherche, vous pouvez le faire en définissant w2grid.show.toolbarSearch = false; Voir http://w2ui.com/web/docs/w2grid.show pour plus d'informations.

  3. recid est un champ unique obligatoire. Cela doit être. Cependant, vous pouvez avoir un nombre quelconque de colonnes supplémentaires qui ne doivent pas être visibles ou même avoir des éléments correspondants dans le tableau des colonnes. Si le côté serveur renvoie l'ID en tant que colonne unique, vous pouvez ajouter l'écouteur d'événement onLoad et la boucle à travers le paramètre recid en tant qu'ID. Je sais que ce n'est pas aussi joli, mais ça va faire le travail. Changer le côté serveur pour retourner recid le rendra joli.

+0

Merci, je l'espère, nous voyons une config pour définir la colonne id dans la version future. 'id: 'nom d'utilisateur' – PHPst

Questions connexes