LayUI发送Ajax请求

于 2024-02-22 10:18:29 发布
阅读量2.4k 收藏 33
点赞数 10
文章标签： layui ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nihui123/article/details/136226294
版权

页面初始化操作

var processData = null
$(function () {
    initView();
    initTable();
    // test();
})

function initView() {
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#applyDateTimeRange',
            type: 'datetime',
            range: true
        });
    });
}

初始化表格操作


function initTable() {
    //初始化table
    var headerObj = [[
        {
            title: '序号', width: 60, templet: function (d) {
                return d.LAY_TABLE_INDEX + 1;
            }
        },
        {field: "systemType", title: "平台", width: 100, sort: false,},
        {field: "applyOrderDetailId", title: "工单号", minWidth: 70, sort: false},
        {field: "createTime", title: "申请时间", minWidth: 60, sort: false},

        {field: "applyUserName", title: "申请人", width: 100, sort: false},
        {
            field: "dealState", title: "状态", width: 100, sort: false, templet: function (d) {
                if (d.dealState == 0) {
                    return "未开启";
                } else if (d.dealState == 1) {
                    return "流程中";
                } else if (d.dealState == 2) {
                    return "已完成";
                } else{
                    return "未知(" + d.applyStatus + ")";
                }
            }
        },
        {field: "", title: "操作", minWidth: 200, toolbar: '#startFlowTableBar',}
    ]];
    layui.use(['table', 'form'], function (exports) {
        var table = layui.table;
        table.render({
            elem: '#searchTable',
            url: 'http://localhost:8080/getStartList',
            page: true,     //显示分页默认不显示
            cols: headerObj,
            // request: {
            //     pageName: 'page',
            //     limitName: 'limit'
            // },
            // where: {
            //     applyStatus: $("#applyStatus").val()
            // },
            response: {
                statusName: 'status',
                statusCode: 'normal',
                countName: 'count',
                dataName: 'data'
            },
            parseData: function (res) {
                console.log("+++",res)
                return {
                    "count": res.data.total,
                    "data": res.data.list,
                    "status": "normal"
                };
            }
        });

        //table操作事件
        table.on('tool(searchTable)', function (row) {
            var data = row.data;
            var layEvent = row.event;
            var tr = row.tr;

            if (layEvent == 'level2Check') {
                initStartFlowView(data);
            } else if (layEvent == 'showDetailEvent') {
                // showDetailView(data)
                ajax_load_detail(data)
            }else if (layEvent == 'showFlowEvent'){
                ajax_load_flow(data)
            }

        });

        //搜索按钮
        $('#searchBtn').on('click', function () {
            var moduleType = $("#moduleType").val();
            var applyStatus = $("#applyStatus").val();
            var applyDateTimeRange = $("#applyDateTimeRange").val();

            table.reload('searchTable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    moduleType: moduleType,
                    applyStatus: applyStatus,
                    applyDateTimeRange: applyDateTimeRange
                }
            });
        });
    });
}



function showDetailView(data) {
    console.log("data",data)
    var resApplyId = data.resApplyId;
    var moduleType = data.moduleType;
    layui.use(['layer', 'laytpl', 'form', 'table'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;

        var tplHtml = insertFormTpl.innerHTML;
        var index;
        laytpl(tplHtml).render({}, function (html) {
            index = layer.open({
                type: 1,
                title: '展示详情',
                area: ['600px', '310px'],
                offset: 'auto',
                maxmin: true,
                content: html
            });
            form.render();
        });
        form.on('submit(insertFormBtn)', function (data) {
            console.log("获取到监听事件")
            $.ajax({
                url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
                type: "POST",
                dataType: "json",
                data: {
                    moduleType: moduleType,
                    checkResult: data.field.checkResult,
                    description: data.field.description
                },
                success: function (data) {
                    if (data.status == 'normal') {
                        layer.msg("审批成功");
                        table.reload("searchTable", {});
                        layer.close(index);
                    } else {
                        layer.msg(data.exception.error_msg || '审批失败！');
                    }

                }
            });
            return false;
        });
    });
}




function ajax_load_detail(data) {
    var resApplyId = data.applyOrderDetailId;
    $.ajax({
        url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
        type: "GET",
        dataType: "json",
        success: function (data_r) {
            console.log("+++++++" + data_r)
            console.log("====" + JSON.stringify(data_r))
            if (data_r.msg == 'NORMAL') {
                layui.use(['layer', 'laytpl', 'form', 'table'], function () {
                    var layer = layui.layer;
                    var form = layui.form;

                    var laytpl = layui.laytpl;
                    var table = layui.table;
                    var tplHtml = detailHtml.innerHTML;

                    laytpl(tplHtml).render({}, function (html) {
                        index = layer.open({
                            type: 1,
                            title: '展示详情',
                            area: ['600px', '310px'],
                            offset: 'auto',
                            maxmin: true,
                            content: html
                        });
                        form.render();
                    });

                    //TODO 设置每个字段对应的值
                    form.val("showApplyDetail", {
                        "applyOrderDetailId": data_r.data.applyOrderDetailId,
                        "applyOrderDetail": data_r.data.applyOrderDetail
                    })
                })
            } else {
                layer.msg();
            }
        }
    });
}

整个页面的HTML

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>海燕-国美统一开发者平台 - 我的申请</title>
  <meta content="text/html;charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE-edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <link rel="stylesheet" th:href="@{/css/cat-common.css}" />
  <link rel="stylesheet" th:href="@{/css/font.css}">
  <link rel="stylesheet" th:href="@{/css/xadmin.css}">

  <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" />
  <link rel="stylesheet" th:href="@{/css/common.css}">

    <style>
        .user_left{
            width: 45%;
            float: left;
            margin: 20px 0 0 5%;
        }
    </style>

</head>

<body>
  <div class="cat-body">

      <h1 style="color: red">开启流程相关操作（开发中。。。。）</h1>
    <!--<div class="layui-row">-->

      <!--<form class="layui-form layui-col-md12 x-so" style="text-align: justify">-->
         <!--<div class="layui-inline">-->
             <!--<label class="layui-form-label">申请类型:</label>-->
             <!--<div class="layui-input-inline">-->
               <!--<select name="moduleType" id="moduleType">-->
                    <!--<option value="">全部</option>-->
                  <!--<option value="domain_scan_new">域名扫描</option>-->
                  <!--<option value="kvm_new">虚拟机</option>-->
                  <!--<option value="db_new">数据库</option>-->
                  <!--<option value="appDeploy_new">应用服务部署</option>-->
                       <!--<option value="net-acl">网络权限</option>-->
                  <!--<option value="net-lvs">负载均衡</option>-->
                  <!--<option value="nginx_conf_update_new">Nginx配置变更</option>-->
                  <!--<option value="cdn_link_up_new">CDN接入</option>-->
                  <!--<option value="cdn_cache_clean_new">CDN缓存清理</option>-->
                  <!--<option value="code_auth_new">代码权限申请</option>-->
                  <!--<option value="jms">堡垒机申请</option>-->
                  <!--<option value="domainHighDefense_new">域名高防</option>-->
                  <!--<option value="net-dns">域名解析</option>-->
               <!--</select>-->
             <!--</div>-->
           <!--</div>-->
           <!--<div class="layui-inline">-->
             <!--<label class="layui-form-label">申请时间:</label>-->
             <!--<input type="text" class="layui-input" id="applyDateTimeRange" placeholder="开始日期 - 结束日期" readonly style="width:300px">-->
           <!--</div>-->
           <!--<div class="layui-inline">-->
             <!--<label class="layui-form-label">受理部门:</label>-->
             <!--<div class="layui-input-inline">-->
               <!--<select name="applyDept" id="applyDept">-->
                 <!--<option value="0">全部</option>-->
                 <!--<option value="1">DBA-数据库运维</option>-->
                <!--<option value="2">SRE-应用运维</option>-->
                <!--<option value="3">SA-云科</option>-->
                <!--<option value="4">DTM-桌面运维</option>-->
                <!--<option value="5">NS-网安</option>-->
                <!--<option value="6">CR-代码</option>-->
               <!--</select>-->
             <!--</div>-->
           <!--</div>-->
           <!--<div class="layui-btn" title="查询" id="searchBtn">-->
             <!--<i class="layui-icon">&#xe615;</i>查询-->
           <!--</div>-->
      <!--</form>-->
    <!--</div>-->
    <div class="layui-row">
      <div class="cat-block">
        <!-- TODO 1.修改button名称； -->
        <!--<button class="layui-btn _add_apply" οnclick="applyNew();">-->
          <!--<i class="layui-icon">&#xe608;</i>新建自定义工单</button>-->

        <button class="layui-btn" onclick="reload_data();">
          <i class="layui-icon">&#xe669;</i>刷新数据</button>
      </div>
    </div>
    <!--结果  -->
    <table id="searchTable" lay-filter="searchTable" lay-size="sm"></table>
  </div>

<script type="text/html" id="startFlowTableBar">
{{# if(d.dealState==0){ }}
<a class="layui-btn layui-btn-normal layui-btn-xs" style="color: #0f3788;" lay-event="level2Check">开启流程</a>
{{# } }}
<a class="layui-btn layui-btn-normal layui-btn-xs" style="color: blue" lay-event="showFlowEvent">查看进度</a>
<a class="layui-btn layui-btn-normal layui-btn-xs" style="color: green" lay-event="showDetailEvent">工单详情</a>




<!--{{# if(d.applyStatus==1 || d.applyStatus==6){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--{{# }else if((d.applyStatus==2 || d.applyStatus==5) && (d.applyStar==null || d.applyStar==0)){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="comment">评论</a>-->
<!--{{# }else if((d.applyStatus==2 || d.applyStatus==5) && (d.applyStar!=null && d.applyStar!=0)){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="lookComment">查看评论</a>-->
<!--{{# }else if(d.applyStatus==4 || d.applyStatus==7){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reApply">重新提交</a>-->
<!--{{# }else{ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--{{# } }}-->
</script>

<script type="text/html" id="insertFormTpl">
<div class="x-body">
   <form class="layui-form" action="" lay-filter="insertForm">
      <div class="layui-form-item">
         <label class="layui-form-label">审批结果</label>
         <div class="layui-input-block">
            <input type="radio" name="checkResult" value="2" title="通过" checked>
            <input type="radio" name="checkResult" value="3" title="拒绝">
         </div>
      </div>
      <div class="layui-form-item">
         <label class="layui-form-label">审批意见</label>
         <div class="layui-input-block">
            <textarea name="description" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
         </div>
      </div>
      <div class="layui-form-item">
          <div class="layui-input-block">
             <button class='layui-btn' lay-submit lay-filter='insertFormBtn'>提交</button>
          </div>
      </div>
   </form>
</div>
</script>

  <script type="text/html" id="detailHtml">
      <div class="x-body">
         <h1 lay-filter="detailString">展示详情</h1>
          <form class="layui-form" action="" lay-filter="showApplyDetail">

              <!-- 表单类型 -->
              <div class="layui-form-item">
                  <label class="layui-form-label">工单号</label>
                  <div class="layui-input-block">
                      <input type="text" name="applyOrderDetailId" class="layui-input" disabled>
                  </div>
              </div>

              <!-- 申请原因 -->
              <div class="layui-form-item">
                  <label class="layui-form-label">工单详情</label>
                  <div class="layui-input-block">
                      <textarea name="applyOrderDetail" class="layui-textarea" disabled></textarea>
                  </div>
              </div>

          </form>
      </div>
  </script>


  <script type="text/html" id="startFlow">

      <div class="x-body">

          <h1>开启流程操作待开发</h1>

          <form class="layui-form" name="addForm" id="addForm">

              <div class="user_left" id="selectPerson">
                  <!-- 一个标准的input组合，这个是固定项 -->
                  <div class="layui-form-item">
                      <label class="layui-form-label">申请人</label>
                      <div class="layui-input-block">
                          <input type="text" id="title" name="title" lay-verify="required" class="layui-input">
                      </div>
                  </div>

                  <!-- 根据属性List生成的input追加在这里-->
              </div>

              <div class="layui-form-item">
                  <label class="layui-form-label">开启备注信息</label>
                  <div class="layui-input-block">
                      <textarea name="description" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                  </div>
              </div>

              <!-- buttons -->
              <div class="layui-form-item" style="margin-left: 5%;">
                  <div class="layui-input-block">
                      <!-- 这里的提交按钮是button形式，不是submit -->
                      <!--<input type="button" id="insert" onclick="return check()" class="layui-btn" value="开启流程" />-->
                      <input type="button" id="insert" lay-submit lay-filter='startFormBtn' class="layui-btn" value="开启流程" />
                      <!-- 清空表单，这个按钮隐藏了 -->
                      <input type="button" name="reset" class="layui-btn" value="重置" />
                  </div>
              </div>
          </form>
      </div>
  </script>


  <script type="text/html" id="showFlow">

      <div class="x-body">

          <h1>开启流程操作待开发</h1>

          <form class="layui-form" name="addForm" >

              <div class="user_left" id="showPerson">
                  <!-- 一个标准的input组合，这个是固定项 -->
                  <div class="layui-form-item">
                      <label class="layui-form-label">申请人</label>
                      <div class="layui-input-block">
                          <input type="text" id="person" name="title" lay-verify="required" class="layui-input">
                      </div>
                  </div>

                  <!-- 根据属性List生成的input追加在这里-->
              </div>
          </form>
      </div>
  </script>

  <script type="text/html" id="insertTpl">
  <div class="x-body">
  <form class="layui-form" action="">

    <!-- 域账号 -->
    <div class="layui-form-item  layui-form-text">
      <label class="layui-form-label">主题</label>
      <div class="layui-input-block">
        <input type="text" name="topic" autocomplete="off" class="layui-input">
      </div>
    </div>

    <!-- 权限 -->
    <div class="layui-form-item">
      <label class="layui-form-label">受理部门</label>
      <div class="layui-input-block">
        <select name="dept" lay-verify="dept" lay-filter="dept">
          <option value="-1">请选择一个受理部门</option>
          <option value="1">DBA-数据库运维</option>
          <option value="2">SRE-应用运维</option>
          <option value="3">SA-云科</option>
          <option value="4">DTM-桌面运维</option>
          <option value="5">NS-网安</option>
          <option value="6">CR-代码</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">具体描述</label>
      <div class="layui-input-block">
        <textarea name="applyDesc" lay-filter="required" class="layui-textarea"></textarea>
      </div>
    </div>

    <!-- <div class="layui-form-item"></div> -->

    <div class="layui-form-item">
      <div class="layui-input-block">
          <button class='layui-btn' lay-submit lay-filter="insertApply">提交</button>
      </div>
    </div>

  </form>
  </div>
  </script>

   <script type="text/javascript" th:src="@{/lib/jquery/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/js/approval/startApproval.js}"></script>

</body>

整个页面的JS代码

var processData = null
$(function () {
    initView();
    initTable();
    // test();
})

function initView() {
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#applyDateTimeRange',
            type: 'datetime',
            range: true
        });
    });
}


function initTable() {
    //初始化table
    var headerObj = [[
        {
            title: '序号', width: 60, templet: function (d) {
                return d.LAY_TABLE_INDEX + 1;
            }
        },
        {field: "systemType", title: "平台", width: 100, sort: false,},
        {field: "applyOrderDetailId", title: "工单号", minWidth: 70, sort: false},
        {field: "createTime", title: "申请时间", minWidth: 60, sort: false},

        {field: "applyUserName", title: "申请人", width: 100, sort: false},
        {
            field: "dealState", title: "状态", width: 100, sort: false, templet: function (d) {
                if (d.dealState == 0) {
                    return "未开启";
                } else if (d.dealState == 1) {
                    return "流程中";
                } else if (d.dealState == 2) {
                    return "已完成";
                } else{
                    return "未知(" + d.applyStatus + ")";
                }
            }
        },
        {field: "", title: "操作", minWidth: 200, toolbar: '#startFlowTableBar',}
    ]];
    layui.use(['table', 'form'], function (exports) {
        var table = layui.table;
        table.render({
            elem: '#searchTable',
            url: 'http://localhost:8080/getStartList',
            page: true,     //显示分页默认不显示
            cols: headerObj,
            // request: {
            //     pageName: 'page',
            //     limitName: 'limit'
            // },
            // where: {
            //     applyStatus: $("#applyStatus").val()
            // },
            response: {
                statusName: 'status',
                statusCode: 'normal',
                countName: 'count',
                dataName: 'data'
            },
            parseData: function (res) {
                console.log("+++",res)
                return {
                    "count": res.data.total,
                    "data": res.data.list,
                    "status": "normal"
                };
            }
        });

        //table操作事件
        table.on('tool(searchTable)', function (row) {
            var data = row.data;
            var layEvent = row.event;
            var tr = row.tr;

            if (layEvent == 'level2Check') {
                initStartFlowView(data);
            } else if (layEvent == 'showDetailEvent') {
                // showDetailView(data)
                ajax_load_detail(data)
            }else if (layEvent == 'showFlowEvent'){
                ajax_load_flow(data)
            }

        });

        //搜索按钮
        $('#searchBtn').on('click', function () {
            var moduleType = $("#moduleType").val();
            var applyStatus = $("#applyStatus").val();
            var applyDateTimeRange = $("#applyDateTimeRange").val();

            table.reload('searchTable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    moduleType: moduleType,
                    applyStatus: applyStatus,
                    applyDateTimeRange: applyDateTimeRange
                }
            });
        });
    });
}

//开启流程
function initStartFlowView(data) {
    console.log("开启流程操作",data)
    var resApplyId = data.applyOrderDetailId;


    layui.use(['layer', 'laytpl', 'form', 'table'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;

        var tplHtml = startFlow.innerHTML;
        // console.log("---------",tplHtml)

        var index;
        laytpl(tplHtml).render({}, function (html) {
            index = layer.open({
                type: 1,
                title: '开启流程',
                area: ['800px', '700px'],
                offset: 'auto',
                maxmin: true,
                content: html
            });
            form.render();
        });

        // test();
        initInputView()


        form.on('submit(startFormBtn)', function (data) {
            console.log("获取到监听事件")
            // jsonToObject(data,processData.data.length)

            var jsonStr = initFlowData(data,resApplyId,processData)
            console.log("获取全局数据",processData)

            console.log(jsonStr)
            $.ajax({
                url: "http://localhost:8080/startTask",
                type: "POST",
                dataType: "json",
                contentType:"application/json",
                data:jsonStr,
                success: function (data) {
                    console.log(data)
                    if (data.msg == 'NORMAL') {
                        layer.msg("审批成功");
                        table.reload("searchTable", {});
                        layer.close(index);
                    } else {
                        layer.msg();
                    }

                }
            });
            return false;
        });
    });
}

// 展示详情
function showDetailView(data) {
    console.log("data",data)
    var resApplyId = data.resApplyId;
    var moduleType = data.moduleType;
    layui.use(['layer', 'laytpl', 'form', 'table'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;

        var tplHtml = insertFormTpl.innerHTML;
        var index;
        laytpl(tplHtml).render({}, function (html) {
            index = layer.open({
                type: 1,
                title: '展示详情',
                area: ['600px', '310px'],
                offset: 'auto',
                maxmin: true,
                content: html
            });
            form.render();
        });
        form.on('submit(insertFormBtn)', function (data) {
            console.log("获取到监听事件")
            $.ajax({
                url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
                type: "POST",
                dataType: "json",
                data: {
                    moduleType: moduleType,
                    checkResult: data.field.checkResult,
                    description: data.field.description
                },
                success: function (data) {
                    if (data.status == 'normal') {
                        layer.msg("审批成功");
                        table.reload("searchTable", {});
                        layer.close(index);
                    } else {
                        layer.msg(data.exception.error_msg || '审批失败！');
                    }

                }
            });
            return false;
        });
    });
}


function ajax_load_detail(data) {
    var resApplyId = data.applyOrderDetailId;
    $.ajax({
        url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
        type: "GET",
        dataType: "json",
        success: function (data_r) {
            console.log("+++++++" + data_r)
            console.log("====" + JSON.stringify(data_r))
            if (data_r.msg == 'NORMAL') {
                layui.use(['layer', 'laytpl', 'form', 'table'], function () {
                    var layer = layui.layer;
                    var form = layui.form;

                    var laytpl = layui.laytpl;
                    var table = layui.table;
                    var tplHtml = detailHtml.innerHTML;

                    laytpl(tplHtml).render({}, function (html) {
                        index = layer.open({
                            type: 1,
                            title: '展示详情',
                            area: ['600px', '310px'],
                            offset: 'auto',
                            maxmin: true,
                            content: html
                        });
                        form.render();
                    });

                    //TODO 设置每个字段对应的值
                    form.val("showApplyDetail", {
                        "applyOrderDetailId": data_r.data.applyOrderDetailId,
                        "applyOrderDetail": data_r.data.applyOrderDetail
                    })
                })
            } else {
                layer.msg();
            }
        }
    });
}


function ajax_load_flow(data) {

    initFlow(data)

    // layui.use(['layer', 'laytpl', 'form', 'table'], function () {
    //     var layer = layui.layer;
    //     var form = layui.form;
    //     var laytpl = layui.laytpl;
    //     var table = layui.table;
    //
    //     var tplHtml = showFlow.innerHTML;
    //     // console.log("---------",tplHtml)
    //
    //     var index;
    //     laytpl(tplHtml).render({}, function (html) {
    //         index = layer.open({
    //             type: 1,
    //             title: '开启流程',
    //             area: ['800px', '700px'],
    //             offset: 'auto',
    //             maxmin: true,
    //             content: html
    //         });
    //         form.render();
    //     });
    //     initFlow(data)
    // });


}




function initFlow(data_p) {
    var resApplyId = data_p.applyOrderDetailId;
    $.ajax({
        url: "http://localhost:8080/getApprovalFlowDetail?applyId=" + resApplyId,
        type: "GET",
        dataType: "json",
        success: function (data) {
            console.log("+++++++" + data)
            console.log("====" + JSON.stringify(data))
            initApplyFlowView(data.data)
            //
            // //遍历List
            // for (var i = 0; i < data.data.length; i++) {
            //     //根据属性List拼接LayUI风格的input代码
            //     str = "<div class='layui-form-item'><label class='layui-form-label'>"
            //         + data.data[i].currentNodeDealId
            //         + "</label><div class='layui-input-block'><input type='text' id='"
            //         + data.data[i].approvalPersonName
            //         + "' name='"
            //         + data.data[i].approvalPersonName
            //         + "' placeholder='"
            //         + data.data[i].approvalPersonNote
            //         + "' class='layui-input'></div></div>"
            //
            //     //追加到界面，property是后面div的id<div class="user_left" id="property">
            //     var html = document.getElementById("showPerson").innerHTML;
            //     document.getElementById("showPerson").innerHTML = html + str;
            // }
        }
    });

}


function test() {
    var jsonData ="[{\"propertyShow\":\"一级审批\",\"propertyName\":\"test\",\"propertyTips\":\"test\"},{\"propertyShow\":\"二级审批\",\"propertyName\":\"test\",\"propertyTips\":\"test\"},{\n" +
        "\"propertyShow\":\"三级审批\",\"propertyName\":\"test\",\"propertyTips\":\"test\"}]"
    var data = JSON.parse(jsonData)
    //遍历List
    for (var i = 0; i < data.length; i++) {
        //根据属性List拼接LayUI风格的input代码
        str = "<div class='layui-form-item'><label class='layui-form-label'>"
            + data[i].propertyShow
            + "</label><div class='layui-input-block'><input type='text' id='"
            + data[i].propertyName
            + "' name='"
            + data[i].propertyName
            + "' placeholder='"
            + data[i].propertyTips
            + "' class='layui-input'></div></div>"

        //追加到界面，property是后面div的id<div class="user_left" id="property">
        // var html = document.getElementById("property").innerHTML;
        // document.getElementById("property").innerHTML = html + str;
        // var html = property.innerHTML;
        // property.innerHTML = html + str;
        var html = document.getElementById("selectPerson").innerHTML;
        document.getElementById("selectPerson").innerHTML=html+str;

    }

}

function initInputView() {
    $.ajax({   //获取属性List<Map>数据return data_r;
        type: "get",
        url: "http://localhost:8080/getProcess",
        dataType: "json",
        success: function (data) {
            //遍历List
            loadData(data)
            for (var i = 0; i < data.data.length; i++) {
                //根据属性List拼接LayUI风格的input代码
                str = "<div class='layui-form-item'>" +
                    "<label class='layui-form-label'>"+ data.data[i].nodeName + "</label>" +
                    "<div class='layui-input-block'>" +
                    "<input type='text' id='"+data.data[i].nodeId +"' name='"+"no"+data.data[i].nodeOrder+ "' placeholder='"+ "审批人域账户" + "' class='layui-input'>" +
                    "</div>" +
                    "</div>"

                //追加到界面，property是后面div的id<div class="user_left" id="property">
                var html = document.getElementById("selectPerson").innerHTML;
                document.getElementById("selectPerson").innerHTML = html + str;
            }
        }
    });

}


function loadData(data) {
    processData = data;
    return data;
}

function jsonToObject(data ,len,applyOrderDetailId,process) {
    var object = {};
    var params = [];
    console.log("开始进入方法")

    for(var i = 0; i < len; i++){
        console.log("组装数据")
        var obj = {};
        console.log(i)
        switch (i) {
            case 0:
                obj["approvalOrder"] = process[0].nodeOrder ;
                obj["approvalUserName"] = data.field.no1;
                obj["nodeId"] = process[0].nodeId;
                params.push(obj);
                console.log(i)
                continue;
            case 1:
                obj["approvalOrder"] = process[1].nodeOrder;
                obj["approvalUserName"] = data.field.no2;
                obj["nodeId"] = process[1].nodeId;
                params.push(obj);
                console.log(i)
                continue;
            case 2:
                obj["approvalOrder"] = process[2].nodeOrder;
                obj["approvalUserName"] = data.field.no3;
                obj["nodeId"] = process[2].nodeId;
                params.push(obj);
                console.log(i)
                continue;
            case 3:
                obj["approvalOrder"] = process[3].nodeOrder;
                obj["approvalUserName"] = data.field.no4;
                obj["nodeId"] = process[3].nodeId;
                params.push(obj);
                console.log(i)
                continue;
            case 4:
                obj["approvalOrder"] = process[4].nodeOrder;
                obj["approvalUserName"] = data.field.no5;
                obj["nodeId"] = process[4].nodeId;
                params.push(obj);
                console.log(i)
                continue;
        }

    }

    object['applyId'] = applyOrderDetailId;
    object['processId'] = process[0].processId;
    object['approvalUserVoList'] = params;

    var json = JSON.stringify(object);
    // console.log(json);
    return json;
}

function initFlowData(data,applyOrderDetailId,process){
    return jsonToObject(data ,process.data.length ,applyOrderDetailId,process.data)
}

//表单提交时调用的验证及提交方法
function check() {
    var data = new FormData($("#addForm")[0]); //获取表单数据，addForm是表单id

    console.log(data)
    // if ($("#title").val() == '') {
    //     alert("请填写完整信息");
    // } else {
    //     $.ajax({
    //         type: "POST",
    //         url: getURL("insert"),
    //         data: new FormData($("#addForm")[0]),   //获取表单数据，addForm是表单id
    //         processData: false,
    //         contentType: false,
    //         success: function (data) {
    //             alert(data)
    //             if (data == 'success') {
    //                 $("input[type=reset]").trigger("click");    //清空表单
    //             }
    //         }
    //     })
    // }
}


function reload_data() {
    layui.use(['table'], function () {
        var table = layui.table;

        table.reload("searchTable", {});
    });
}



function applyFlowView(data) {
    var resApplyId = data.applyId;
    $.ajax({
        //TODO1 填写流程进度请求地址
        url: "/v1/devTool/codeAuth/apply/flow",
        type: "GET",
        dataType: "json",
        data: {
            resApplyId: resApplyId
        },
        success: function (data) {
            if (data.status == 'normal') {
                initApplyFlowView(data.response);
            } else {
                layer.msg(data.exception.error_msg || '获取表结构失败！');
            }

        }
    });
}


function initApplyFlowView(applyFlows) {
    layui.use(['layer', 'laytpl'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;

        var applyFlowTplHtml = "";
        applyFlowTplHtml += '<div class="x-body">';
        applyFlowTplHtml += '<ul class="layui-timeline">';

        $.each(applyFlows, function (index, step) {
            applyFlowTplHtml += '<li class="layui-timeline-item">';
            applyFlowTplHtml += '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
            applyFlowTplHtml += '<div class="layui-timeline-content layui-text">';

            var title ="处理人: " + step.approvalPersonName+" - "+ "处理时间 "+step.lastUpdateTime

            applyFlowTplHtml += '<h3 class="layui-timeline-title">' + title + '</h3>';
            applyFlowTplHtml += '<p>';
            applyFlowTplHtml += (step.approvalPersonNote);
            applyFlowTplHtml += '</p>';
            applyFlowTplHtml += '</div>';
            applyFlowTplHtml += '</li>';
        });

        applyFlowTplHtml += '</ul>';
        applyFlowTplHtml += '</div>';
        var index;
        laytpl(applyFlowTplHtml).render({}, function (html) {
            index = layer.open({
                type: 1,
                title: '申请进度查询',
                area: ['700px', '510px'],
                offset: 'auto',
                maxmin: true,
                content: html
            });
        });
    });
}
nihui123
关注
  • 10
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
layui，用layui+ajax完成crud
张子又
02-26 8756
1.layui学习 layui是前端框架，用来做前端界面，在项目中集成layui的步骤： 1）解压layui-v2.2.5.zip 2).在web项目WebRoot下创建layui文件夹，把css,lay两个文件夹及layui.js文件拷贝到layui文件夹中即可。如下所示: 然后在要使用弹出层的页面上引入layui.css和layui.js文件 &lt;!-- 引入layui的资源文件 --...
layui ajax提交表单_layui 使用总结
weixin_39524574的博客
11-28 3320
最近开发中在做项目的后台管理系统。用的guns框架，框架自带的js是layui。自己写页面也不好换模板。就简单的使用layui进行开发了。1、layui的js、css引入跳过。2、layui的js开头定义：首先统一的js语法开头layui.use();要用到什么组件自己添加，下面的示例是用到了jquery、ajax、form表单等组件；但ajax的写法有很多种可以自己写熟悉的语法格式，不...
layui-table对返回的数据进行转变显示的实例
12-09
在使用layui表格时，在ajax请求回来的数据，有时候需要我们处理之后显示 1.比如性别sex这个字段，后台可能返回的是1.或者 2；那我们总不能显示1.和 2，我们需要显示男和女，这里就用到了自定义模板了 [removed] {{#if (d.sex == 1) { }} 男 {{# }else if(d.sex == 2){ }} 女 {{# } }} [removed] 2.比如后台返回了一个时间段是2018-08-24 15:
layui中的ajax
Sunraiseprice的博客
10-26 6036
// 进行登录操作 form.on('submit(login)', function(data) { var btn = $(this); btn.text("登 入 中...").attr("disabled", "disabled").addClass("layui-disabled"); $.ajax({ url: api + "login/doLogin", method: "post", data: { lo
Layui数据表格的使用及其ajax异步请求
weixin_53669566的博客
07-06 8539
layui框架的数据表格的使用
layui 封装 ajax请求
qing_er_的博客
08-01 3036
为方便在layui后台管理中提升开发效率，所以在js中封装了方法，以方便使用。
layui之ajax的form表单发送请求（附带一点点头部工具栏的使用）
最新发布
qq_51615662的博客
06-22 2231
使用layui做项目中的问题，随手解决随手记，方便下次自己不会在上面出错了，也给使用layui的伙伴们避个雷。我在做一个表单的添加，弹出一个layer弹出层，然后填写里面的表单进行提交保存的操作，一个很简单的流程，里面有些小小的注意的点让我绕了不少的圈子。此前我都是一个表格里的数据通过layui的url接口传到servelet中，layer里面的表单提交用的form表单，当我使用它的action提交时，出现了1.数据传不过去2.当我想看前面我写的代码，表单我怎么提交时，我看到了这个东西，
关于在LayUI中使用AJAX提交巨坑记录
10-16
在原代码中，`return false`被放在了`$.ajax`调用之后，这意味着在AJAX请求发送之前，表单的默认行为就已经被阻止了。这可能导致LayUI的某些后续操作无法正确执行，比如关闭弹窗。正确的做法是将`return false`放置...
layui-tree实现Ajax异步请求后动态添加节点的方法
10-16
2. 发送 AJAX 请求到后台，携带父节点的相关信息（例如 ID），请求新建子分类。 3. 在后台处理请求，创建新分类并将其关联到指定的父分类，更新数据库。 4. 后台响应成功后，将新创建的子节点数据返回给前端。 5. ...
使用layui+ajax实现简单的菜单权限管理及排序的方法
10-16
通过ajax发送请求到后台，获取当前用户角色相关的菜单数据。在成功回调中，遍历数据，根据pareMenuId判断菜单层级，构建HTML结构。对于一级菜单，创建`<li>`标签并添加`layui-nav-item`类，二级菜单则嵌套在`...
layui-table-cros：layui表格跨域请求
02-21
在layui表格中，可以使用`layui.table.ajax`方法来发起跨域请求。你需要提供URL、数据类型（一般为json）以及请求成功后的回调函数。例如： ```javascript layui.use('table', function(){ var table = layui....
layui发送ajax请求
ltgsoldier1的博客
07-25 1万+
html: <form class="layui-form" action="" lay-filter="form-group"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">xxx</label> <div class="la
layui对jquery ajax的封装,layui封装自定义模块
weixin_42106357的博客
08-06 2385
转自：https://lianghongbo.cn/blog/430585105a35948clayui是国人开发的一款非常简洁的UI框架，使用了模块化加载方式，因此在使用过程中我们难免需要添加自己的模块，本教程就教大家封装一个简单的模块。平常使用中，ajax可以说使用广泛，所以这里我们添加一个自己的模块，将ajax封装一下，方便使用。注：模块加载需要服务器环境支持，因此看本教程前，请先在你本地搭...
layui常用的弹出层的使用,以及jquery的ajax请求
奔跑的菜鸡
04-01 7150
监听div中的按钮,然后弹出confirm验证弹窗 在head中加载一下layui的js cdn 在使用layui.confirm的弹框的时候可以注意到回调函数那里有个index下标,这个下标默认情况下是confirm返回的index,是layer自己的索引，不是你元素上的，你要获取元素上的。需要 $(this).index() 来获取 <script src="https://www.la...
layui——分页（ajax请求）
是蒙娜丽莎啊的博客
01-08 2万+
这次记录下借助layui框架实现的分页功能，本人使用的是layui的1.0.9版本。首先还是来复习下layui分页需要掌握的知识点，再通过实际案例来说明下具体这么用。 一 加载模块 首先，在使用layui的分页模块时，要加载需要使用到的分页模块，而根据layui的官方文档说明，一共有预先加载和按需加载两种方式。但是官方建议使用预先加载的方式，因为这样可以避免到处写layui.use([])的麻
扩展：构建ssm项目，使用ajax请求实现layui单表的查询和添加
Liu_wen_wen的博客
08-25 803
扩展：构建ssm项目，使用ajax请求实现layui单表的查询和添加
LayUI渲染数据失败之Ajax异步交互
个人学习笔记库，一篇一篇记录成长的足迹
02-10 1072
同步任务进入主线程后一直执行，直到主线程空闲后，才会去Event queue中查看是否有可执行的异步任务，如果有就推入主线程中执行。其次，异步任务在Event table中注册函数，当满足特定的条件，被推入Event queue。在layui中调用jquery的ajxa，返回数据，赋值给全局变量，通过DOM渲染到页面。也就是说，js在执行是先判断是同步还是异步任务，异步任务等到就绪队列，优先执行同步任务。而Ajax默认是异步任务，默认延迟执行。所以渲染需要定义在ajxa内部
layui ajax请求示例
热门推荐
72shmily的博客
08-06 8万+
加载js &amp;amp;amp;lt;script&amp;amp;amp;gt; layui.config({ base : &amp;amp;quot;/Public/plug/layui/extend/&amp;amp;quot; //address.js的路径 }).use([ 'layer', 'jquery', &amp;amp;quot;address&amp;amp;quot;,'form'], fun
ajax接收servlet的数据data，传入Layui的数据表格
weixin_44446127的博客
01-09 4330
ajax请求接收servlet的数据data，进行Layui数据表格渲染 *通过ajax传入请求到后台（DrinkServlet），从数据库拿到数据传回前端时。由于我之前学的Layui的初始化界面是这样的 //1.方法渲染 table.render({ elem:"#demo", //这个elem绑定的是容器的id,,与分页不同 这个要加井号 url:"js/11user.json", //数据接口，有后台写后台，这里写死一个json cols:[[
layui发送ajax请求后关闭子窗口并调用父类方法刷新表格
05-28
可以通过以下步骤实现： 1.在子窗口中发送ajax请求，请求成功后执行关闭窗口的代码和调用父类方法的代码，例如： ```javascript $.ajax({ url: "your_url", type: "POST", data: your_data, success: function(response){ // ajax请求成功后执行关闭窗口和刷新表格的操作 parent.layer.closeAll('iframe'); parent.your_refresh_function(); } }) ``` 2.在父窗口中定义刷新表格的方法，例如： ```javascript function your_refresh_function(){ // 刷新表格的代码 layui.table.reload('your_table_id'); } ``` 其中，'your_table_id'为你的表格id。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nihui123

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值