侧边栏壁纸
博主头像
云BLOG 博主等级

行动起来,活在当下

  • 累计撰写 318 篇文章
  • 累计创建 6 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录
WEB

LAYUI FORM 测试

Administrator
2025-04-08 / 0 评论 / 0 点赞 / 1 阅读 / 0 字
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>GLG</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="/static/admin/layui/css/layui.css" media="all">
    <script type="text/javascript" src="/static/admin/pinyin/pinyin.js"></script>
    <script type="text/javascript" src="/static/admin/layui/layui.js"></script>
    <script type="text/javascript" src="/static/admin/jquery.js"></script>
    <style type="text/css">
      .layui-table-tool {position: relative;width: 100%;min-height: 50px;line-height: 30px;padding: 1px 1px;
       border-bottom-color: #00ff00;border-width: 0;border-bottom-width: 1px;}
      .layui-table-total {border-block-color: #00ff00}
      .layui-table .layui-table-hover {background-color: #eee !important}
      .layui-table-hover .layui-table-cell {background: transparent !important}
      .layui-table-tool-self {padding-top: 1px}
      .layui-btn-container {padding-bottom: 10px}
    </style>
</head>
  <body class="layui-layout-body" style="padding-left: 0">
    <div class="layui-card">
<!--      <div class="layui-card-header" style="text-align:left"><h3>库存查询</h3></div> -->
      <div class="layui-card-body" style="padding:0">
       <form class="layui-form layui-row layui-col-space16" action="" lay-filter="demo-val-filter" style="padding-left: 10px;padding-top: 10px">
         <input id="py" type="hidden" class="layui-input" name="py" value="">
         <input id="type" type="hidden" class="layui-input" name="type" value="A">
         <input id="count" type="hidden" class="layui-input" name="count" value="0">
         <div class="layui-btn-container layui-row layui-col-md12 layui-col-space16">

          <div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;">
            <button type="button" class="layui-btn layui-btn-normal" id="form-setval">赋值</button>
            <button type="button" class="layui-btn layui-btn-normal" id="form-getval">取值</button>
          </div>
          <div class="layui-form-item">
             <label class="layui-form-label">输入框</label>
          <div class="layui-input-block">
             <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-block">
             <input type="password" name="password" placeholder="请输入" 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="interest" lay-filter="aihao">
               <option value=""></option>
               <option value="0">写作</option>
               <option value="1">阅读</option>
               <option value="2">游戏</option>
               <option value="3">音乐</option>
               <option value="4">旅行</option>
             </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
             <input type="checkbox" name="like[write]" title="写作">
             <input type="checkbox" name="like[read]" title="阅读">
             <input type="checkbox" name="like[daze]" title="发呆">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
             <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
             <input type="radio" name="sex" value="男" title="男" checked>
             <input type="radio" name="sex" value="女" title="女">
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
             <textarea placeholder="请输入" class="layui-textarea" name="desc"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
             <button type="submit" class="layui-btn" lay-submit lay-filter="demo-val">立即提交</button>
             <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
          <div class="layui-input-group layui-col-md1" style="width: 50px">
            <a type="button" class="layui-btn layui-bg-blue layui-btn-bg layui-btn-primary"
              lay-submit lay-filter="del"><i class="layui-icon layui-icon-tabs"></i>删除</a>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">商品编号</label>
            <div class="layui-input-block">
                <input type="text" name="goodsname" class="layui-input">
            </div>
        </div>
            <div class="layui-form-item">
               <label class="layui-form-label">品牌</label>
               <div class="layui-input-block">
                  <input type="text" name="brand" class="layui-input">
               </div>
            </div>
            <div class="layui-form-item">
               <label class="layui-form-label">单价</label>
               <div class="layui-input-block">
                  <input type="number" name="price" step="0.01" required lay-verify="required" class="layui-input">
               </div>
            </div>
            <div class="layui-form-item">
               <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formSubmit">提交</button>
               </div>
            </div>
          

         </div>
          
         <script type="text/html" id="ID-table-amount-templet">
          {{ d.buy * d.number }}
          {{#  if(d.fine==1){ }}
          <input type="checkbox" name="fine" lay-skin="switch" checked lay-text="是|否" value={{ d.fine }} lay-filter="demo-templet-fine">
          {{#  } else { }}
          <input type="checkbox" name="fine" lay-skin="switch" lay-text="是|否" value={{ d.fine}} lay-filter="demo-templet-fine">
          {{#  } }}

            <input type="checkbox" name="fine" lay-skin="switch" lay-text="是|否" value="{{ d.fine }}" lay-filter="demo-templet-fine" {{ d.fine == 1 ? 'checked' : '' }}>
            <input type="checkbox" name="fine" lay-skin="switch" lay-text="是|否" value="{{ d.fine }}" lay-filter="demo-templet-fine" {{# if (d.fine === 1) { }}checked{{# } }}>
         </script>
         
       </form>
      </div>
    </div>
<!--    <script src="/static/js/{$data.url}.js" type="text/javascript" charset="utf-8"></script>    &lt;!&ndash;加载javescript&ndash;&gt; -->
  <script type="text/javascript" src="/static/admin/layui/layui.js"></script>
    <script>
      layui.use(['form', 'jquery'], function(){
         var form = layui.form;
         var $ = layui.jquery;
         var layer = layui.layer;
         
         // 表单赋值
         $('#form-setval').on('click', function(){
          form.val('demo-val-filter', {
            "username": "贤心", // "name": "value"
            "password": "AAAAAA",
            "interest": 1,
            "like[write]": true, // 复选框选中状态
            "close": true, // 开关状态
            "sex": "女",
            "desc": "Layui 用于更简单快速地构建网页界面"
          });
         });
         // 表单取值
         $('#form-getval').on('click', function(){
          var data = form.val('demo-val-filter');
          layer.msg(JSON.stringify(data));
         });
         // 提交事件
         form.on('submit(demo-val)', function(data){
          var field = data.field; // 获取表单字段值
          // 显示填写结果,仅作演示用
          layer.msg(JSON.stringify(field), {
            title: '<span class="layui-font-orange">当前填写的字段值</span>',
          });
          // 此处可执行 Ajax 等操作
          // …
          return false; // 阻止默认 form 跳转
         });
  
         // 编辑时数据回填
         if(window.parent.getFormData){
            var formData = window.parent.getFormData();
            form.val('form', formData);
         }
  
         // 表单提交
         form.on('submit(formSubmit)', function(data){
            $.post('/product/' + (data.field.id ? 'edit/'+data.field.id : 'add'), {
               data: data.field
            }, function(res){
               if(res.code === 0){
                  layer.msg('操作成功', function(){
                     window.parent.table.reload('productTable');
                     window.parent.layer.closeAll();
                  });
               } else {
                  layer.msg('操作失败');
               }
            });
            return false;
         });
      });
    </script>
  </body>
</html>


0

评论区