1

w2ui( http://w2ui.com/ ) プラグインを使用しています。

次の例を考えてみましょう: 1

  1. 追加ボタンをクリックすると、編集可能な空の行がグリッドに表示され、新しい行が追加されますか?

  2. 検索ボックスを非表示にする設定が見つかりませんでした。どうすれば非表示にできますか?

  3. 列をIDとして設定するにはどうすればよいですか? 現在、認識しているだけrecidです。
4

2 に答える 2

1

ボタンがクリックされたときにグリッドに新しいレコードを追加する方法のサンプルを次に示します。

    <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>
于 2013-05-29T01:53:28.473 に答える