Javascript 向jqGrid添加表单数据输入_Javascript_Jquery_Jqgrid

Javascript 向jqGrid添加表单数据输入

javascript jquery jqgrid

Javascript 向jqGrid添加表单数据输入,javascript,jquery,jqgrid,Javascript,Jquery,Jqgrid,我正在尝试添加从表单获得的数据，并将其显示到JQGrid 我的表单中有以下元素用户名文本框出生日期的日期选择器用于选择国家/地区的组合框两个按钮添加和清除按钮每当我单击Add按钮时，它都必须向JQGrid添加一行。当我单击clear按钮时，它必须重置整个表目前，我正在尝试将数据从表单显示到行以下是我迄今为止的努力 <script> $(function() { $( "#pwd" ).datepicker(); var source = [{

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

我的表单中有以下元素

用户名文本框

出生日期的日期选择器

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

两个按钮添加和清除按钮

每当我单击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>


$（函数（）{
$（“#pwd”）.datepicker（）；
变量源=[{
案文：“澳大利亚”，
数值：0
}, 
{
案文：“印度”，
价值：1
}, 
{
案文：“美国”，
价值：2
},
{
案文：“联合王国”，
价值：3
}];
$（“#jqxComboBox”）.jqxComboBox({
资料来源：资料来源，
主题：“能量蓝”，
宽度：“240px”，
高度：“30px”，
displayMember:'文本'，
已选择索引：0，
valueMember:“值”
});
$（'#添加'）。单击（函数（）{
name=$（'#name'）.val（）；
日期=$（'#pwd'）.val（）；
country=$（'jqxComboBox'）.val（）；
警报（名称）；
$（'jqGrid'）.jqGrid（'addRowData'，名称，日期，国家）；
}); });
水平形式

可能您应该首先初始化jqGird并运行如下代码：

$（函数（）{
$（“#jqGrid”）.jqGrid({
“数据类型”：“本地”，
//如果开头没有数据，只需定义一个空数组[]，
//也可以使用下面的数据选项设置初始化数据
“数据”：[{
'name'：'testUser'，
“日期”：2016年4月15日，
“国家”：“某处”
} ],
“colNames”：[“名称”、“日期”、“国家]，
'colModel'：[{'name'：'name'}，{'name'：'date'}，{'name'：'country'}]，
“loadComplete”：函数（）{//您可以使用下面的代码手动添加数据。
//可以将datarow变量定义为单个对象，也可以定义为
//对象数组。
//数组数据示例：var datarow=[{“name”：“addedName”，
//“日期”：“2016年4月16日”，“国家”：“任何”}，
//{“名称”：“增补名称2”，“日期”：“2016年4月16日”，“国家”：“任何2”}]；
var数据行={
“名称”：“增补名称”，
“日期”：“2016年4月16日”，
“国家”：“任何”
};
//下面方法的第二个参数是rowid，仅用于生成id
//tr元素的属性。
//如果将rowid变量保持为未定义，jqGrid将生成一个
//而是随机id。
var rowid；
//最后一行参数告诉jqGrid在最后一行之后添加新数据。
$（“#jqGrid”）.jqGrid（“addRowData”，rowid，datarow，last”）；
}
});
});