フォームデータ入力をjqGridに追加する

フォームから取得したデータを追加してJQGridに表示しようとしています。フォームデータ入力をjqGridに追加する

私のフォームには次の要素があります。

国を選択するための誕生

コンボボックスの日のためのユーザ名のテキストボックス

日付ピッカー。

2つのボタン追加とクリアボタン。

[追加]ボタンをクリックするたびに、JQGridに行を追加する必要があります。クリアボタンをクリックすると、テーブル全体がリセットされます。

現在、フォームから行にデータを表示しようとしています。

以下は私の努力です。

<script> 
    $(function() { 
    $("#pwd").datepicker(); 
    var source = [{ 
     text: "Australia", 
     value: 0 
     }, 
     { 
     text: "India", 
     value: 1 
     }, 
     { 
     text: "United States", 
     value: 2 
     }, 
     { 
    text: "United Kingdom", 
    value: 3 
    }]; 

$("#jqxComboBox").jqxComboBox({ 
    source: source, 
    theme: 'energyblue', 
    width: '240px', 
    height: '30px', 
    displayMember: 'text', 
    selectedIndex: 0, 
    valueMember: 'value' 
    }); 

     $('#add').click(function(){ 

       name=$('#name').val(); 
       date=$('#pwd').val(); 
       country=$('#jqxComboBox').val(); 
       alert(name); 
        $('#jqGrid').jqGrid('addRowData',name,date,country); 
        }); }); 
    </script> 
    <style type="text/css"> 
    </head> 
    <body> 
    <div class="container"> 
    <h2>Horizontal form</h2> 
    <form class="form-horizontal" role="form" id="add_form"> 
    <input type="text" id="name"></input> 
    <input type="text" id="pwd"></input> 
    <div id="jqxComboBox"></div> 
    <input type="submit" value="add"> 
    <input type="submit" value="reset"> 
    </div>   
    </form><table id="jqGrid"> 
     </table> 
     </body> 
     </html>

出典

2016-04-14 mohan babu

は、あなたが最初にjqGirdを初期化し、以下のようなコードを実行する必要があることがある：

$(function() { 
 
    $("#jqGrid").jqGrid({ 
 
     'datatype' : 'local', 
 
     // if there is no data at the beginning, just define an empty array [], 
 
     // or you can set init data with data option below 
 
     'data' : [ { 
 
     'name' : 'testUser', 
 
     'date' : '15/4/2016', 
 
     'country' : 'somewhere' 
 
     } ], 
 
     'colNames' : [ 'Name', 'Date', 'Country' ], 
 
     'colModel' : [ {'name' : 'name'}, {'name' : 'date'}, {'name' : 'country'} ], 
 
     'loadComplete' : function() { // You can add data manually using code below. 
 
      // You can define a datarow variable as single object and also an 
 
      // array of objects. 
 
      // array data example: var datarow = [{"name":"addedName", 
 
      // "date":"16/4/2016", "country":"any"}, 
 
      // {"name":"addedName2", "date":"16/4/2016", "country":"any2"}]; 
 
      var datarow = { 
 
       "name" : "addedName", 
 
       "date" : "16/4/2016", 
 
       "country" : "any" 
 
      }; 
 
      
 
      // second parameter of method below is rowid just for generate id 
 
      // attribute of tr element. 
 
      // if keep rowid variable as undefined, jqGrid will generate a 
 
      // random id instead. 
 
      var rowid; 
 
      
 
      // last paremeter tell jqGrid add new data after last row. 
 
      $("#jqGrid").jqGrid("addRowData", rowid, datarow, "last"); 
 
     } 
 
    }); 
 
});

<script src="http://www.trirand.com/blog/jqgrid/js/jquery.js"></script> 
 
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script> 
 
<table id="jqGrid"></table>

出典

2016-04-15 02:30:14

フォームデータ入力をjqGridに追加する

答えて

関連する問題