（札记）EasyUI Form表单

最新推荐文章于 2021-08-05 13:05:53 发布

_叔

最新推荐文章于 2021-08-05 13:05:53 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery & EasyUI 文章标签： easyui form

本文链接：https://blog.csdn.net/wzs298/article/details/42236341

jQuery & EasyUI 专栏收录该内容

7 篇文章

订阅专栏

本文详细探讨了EasyUI框架中的Form表单组件，包括其基本使用、表单验证、数据绑定以及如何与其他组件结合使用，帮助开发者更高效地创建交互式用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、easyui跟extjs一样。form表单绑定数据的时候，一绑定时间格式的数据，其它数据就绑定不上了

2、easyui在form表单绑定数据时，不能绑定类名，即不能使用.来连接

可以这样绑定数据：

$("#ff").form("load", {
  "testCm.id":row.id,
  "testCm.cphm":row.cphm,
  "testCm.cpys":row.cpys,
  "testCm.csys":row.csys,
  "testCm.passtime":new Date(value).toLocaleDateString();
  "testCm.ckFlag":row.ckFlag
});

表单的数据提交：

$('#ff').form('submit', {
  url:"testCm!saveTest.action",
  onSubmit: function(){
    //return $(this).form("validate");
  },
  success:function(data){
      $.messager.alert("提示信息", "操作成功");
      $("#win").dialog("close");
      $("#datagrid").datagrid("load");
  }
});

Form表单的创建：
注：name 的值要匹配struts2的格式，否则提交会失败。
<form id="ff" method="post">
  <div style="padding:5px;">
    <label for="passtime" style="width:80px;text-align:right;float:left;">passtime:</label>
    <input class="easyui-datetimebox" type="text" name="testCm.passtime" style="width:120px;" data-options="required:true" />
  </div>
  <div style="padding:5px;">
    <label for="cphm" style="width:80px;text-align:right;float:left;">cphm:</label>
    <input class="easyui-validatebox" type="text" name="testCm.cphm" style="width:120px;" data-options="required:true" />
  </div>
  <div style="padding:5px;">
    <label for="cpys" style="width:80px;text-align:right;float:left;">cpys:</label>
    <input class="easyui-validatebox" type="text" name="testCm.cpys" style="width:120px;" data-options="required:true" />
  </div>
  <div style="padding:5px;">
    <label for="csys" style="width:80px;text-align:right;float:left;">csys:</label>
    <input class="easyui-validatebox" type="text" name="testCm.csys" style="width:120px;" data-options="required:true" />
  </div>
  <div style="padding:5px;">
    <label for="ckFlag" style="width:80px;text-align:right;float:left;">ckFlag:</label>
    <select id="cc" class="easyui-combobox" name="testCm.ckFlag" style="width:120px;" data-options="required:true">
      <option>true</option>
      <option>false</option>
    </select>
  </div>
</form>