DWZ基础，layUI提交数据

Posted 2020-11-26 zeevy

- navTabAjaxDone是DWZ框架中预定义的表单提交回调函数。服务器转回navTabId可以把那个navTab标记为reloadFlag=1,下次切换到那个navTab时会重新载入内容。callbackType如果是closeCurrent就会关闭当前tab
- 只有callbackType="forward"时需要forwardUrl值 。
- navTabAjaxDone这个回调函数基本可以通用了，如果还有特殊需要也可以自定义回调函数。如果表单提交只提示操作是否成功, 就可以不指定回调函数。框架会默认调用DWZ.ajaxDone()
- <form action="/user.do?method=save" onsubmit="return validateCallback(this,navTabAjaxDone)">
- form提交后返回json数据结构statusCode=DWZ.statusCode.ok表示操作成功, 做页面跳转等操作。
- statusCode=DWZ.statusCode.error表示操作失败, 提示错误原因。
- statusCode=DWZ.statusCode.timeout表示session超时，下次点击时跳转到DWZ.loginUrl

{"statusCode":"200", "message":"操作成功", "navTabId":"navNewsLi",
"forwardUrl":"", "callbackType":"closeCurrent"} {"statusCode":"300",
"message":"操作失败"} {"statusCode":"301", "message":"会话超时"}

主表和明细表，主表与明细表都有增删改查功能，在主表选中一条数据点击查看明细会弹出明细表页面，在明细表页面做条件查询时查询结果显示在主表的页面中（查询结果应该显示在弹出的明细表页面中）

解决方法：在弹出页面中增加修改代码为#upadteFcHydrantDialog11

<form method="post" action="${ctx}/fcHydrantDetail/list/${hydrantId}" class="layui-form" onsubmit="return navTabSearch(this,‘#upadteFcHydrantDialog11‘)">

layUI

form表单提交：

1 <form method="post" action="${ctx}/fcHydrantDetail/list/${hydrantId}" class="layui-form" onsubmit="return navTabSearch(this,‘#upadteFcHydrantDialog11‘)">
2 <input type="text" class="layui-input" id="manaUnit" name="manaUnit" value="${fcHydrantDetail.manaUnit}">
3 <button class="search">查询</button>
4  </form>

这种提交方式会将表单里text框里的数据发送给后台，后台通过request.getParameter()的方式获取，一般用来做条件查询的功能。

a标签提交：

1 <a class="add" width="500" height="500" target="dialog" dialogId="createFcHydrantDetailDialog" href="${ctx}/fcHydrantDetail/preCreate/${hydrantId}">添加</a>
2 <a class="approve" target="ajaxTodo" title="确定要审核吗?" href="${ctx}/fcHydrantDetail/approve/{slt_uid}">审核</a>

这种提交方式不会提交任何数据到后台，除非将想要提交的数据拼接在href后面，如上面代码所示的{slt_uid}，这种提交方式还可以定义提交后弹出页面的长宽,一般用于实现提交请求后弹出页面的功能。

 js提交，文件上传功能：

<input type="file" name="file" id="test20">

layui.use(‘upload‘, function(){
      var $ = layui.jquery
      ,upload = layui.upload;
      //绑定原始文件域
      upload.render({
        elem: ‘#test20‘
        ,accept: ‘file‘
        ,url: ‘${ctx}/fpPlaceFile/uploadFile/${placeId}‘
      });
      //上传后的回调，功能为刷新页面，因为在开发过程中在上传文件后页面没有自动刷新，所以使用最笨的js回调
      ,done: function(res, index, upload){
            $("#search").submit();
    });