向jqGrid添加表单数据输入

Adding form data inputs to jqGrid

本文关键字：数据 输入 表单 添加 jqGrid      更新时间：2024-06-28

我正在尝试添加从表单中获得的数据，并将其显示到JQGrid中。

我的表格中有以下元素。

用户名的文本框

出生日期的日期选择器

用于选择国家/地区的组合框。

两个按钮"添加"answers"清除"按钮。

每当我单击Add按钮时，它都必须向JQGrid添加一行。每当我单击clear按钮时，必须重置整个表。

目前，我正在尝试将表单中的数据显示到行中。

以下是我迄今为止的努力。

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

您可能应该首先初始化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>

相关文章：