layui 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/layui.css">
</head>
<body>
<table id="userinfo" lay-filter="lay-filter-userinfo"></table>

<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">
      更多
      <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>
</script>
</body>


<script src="/static/js/layui.js"></script>
<script type="text/html" id="city">
    {% raw %}
  {{#  if(d.info.city){ }}
    {{ d.info.city }}
  {{#  } else { }}
    none
  {{#  } }}
    {% endraw %}
</script>
<script type="text/html" id="addr">
    {% raw %}
  {{#  if(d.info.addr){ }}
    {{ d.info.addr }}
  {{#  } else { }}
    none
  {{#  } }}
    {% endraw %}
</script>

<script id="operation" type="text/html">
    <!-- 动态显示按钮   -->
    {% raw %}
    {{#  if(d.info.city == "北京"){ }}
    <button type="button" lay-on="marksuccess" class="layui-btn layui-btn-xs">标记成功</button>
    {{#  } else { }}
    <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">标记成功</button>
    {{#  } }}
    {% endraw %}
</script>


<script>
{% raw %}
layui.use(['table', 'dropdown', 'util', 'form'], function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  var util = layui.util;
  var form = layui.form;
  var $ = layui.$
  //渲染table表
  table.render({
    elem: '#userinfo'   // table的i
    ,height: 312
    ,url: '/aaa' //数据接口
    ,method: 'POST' // 请求方式
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'name', title: '用户名', width:80, sort: true}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80, templet: '#city'}
      ,{field: 'addr', title: '地址', width: 177, templet: '#addr'}
      ,{title:'操作', width: 100, minWidth: 80, toolbar: '#barDemo'}
          ,{ title:'操作2（动态）', width: 100, minWidth: 80, templet: '#operation'}
    ]],
  });
  // tool里面的不是table的ID,而是table中设置的属性：lay-filter的值，如果没有此属性需要增加
  table.on('tool(lay-filter-userinfo)', function(obj) { // 双击 toolDouble
      var data = obj.data; // 获得当前行数据
      console.log(data)
      console.log(obj)
      if (obj.event === 'edit') {
          // 更多 - 下拉菜单
          dropdown.render({
              elem: this, // 触发事件的 DOM 对象
              show: true, // 外部事件触发即显示
              data: [{
                  title: '标记成功',
                  id: 'success',
                  templet: '<button type="button" class="layui-btn layui-btn-xs">{{= d.title }}</button>',
              }, {
                  title: '标记失败',
                  id: 'failed',
                  templet: '<button type="button" class="layui-btn layui-bg-red layui-btn-xs">{{= d.title }}</button>'
              }],
              click: function (menudata) {
                  if (menudata.id === 'success') {
                      console.log(data)// 这个data是后端穿过来的内容
                      layer.msg('查看操作，当前行 ID:' + data.id + ',name' + data.name + ',city' + data.info.city);
                  } else if (menudata.id === 'failed') {
                      layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
                          obj.del(); // 删除对应行（tr）的DOM结构
                          layer.msg("删除成功")
                          // layer.close(index);
                          console.log(index)
                          // 向服务端发送删除指令
                      });
                  }
              },
              align: 'right', // 右对齐弹出
              style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
          })
      } else if (obj.event === 'markfailed2') {
          layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
              console.log(index)
              // 向服务端发送删除指令
          });
      }
  });
  // 标记TaskRun回调函数
  util.on('lay-on', {
      'marksuccess': function(){
          layer.open({
            type: 1,
            area: '350px',
            resize: false,
            shadeClose: true,
            title: '标记TaskRun',
            content: `
              <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                <div class="demo-login-container">
                  <div class="layui-form-item">
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                      </div>
                      <textarea name="aone_url_1" placeholder="输入aone bug url，回车输入多个url" class="layui-textarea" lay-verify="required"></textarea>
<!--                      <input type="text" name="aone_url" value="" lay-verify="required" placeholder="aone bug url" lay-reqtext="请填Aone Bug Url" autocomplete="off" class="layui-input" lay-affix="clear">-->
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-wrap">
                      <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                      </div>
                      <input type="text" name="reason" value="" lay-verify="required" placeholder="标记成功说明" lay-reqtext="请填标记成功原因" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">提交</button>
                  </div>
                </div>
              </div>
            `, // 表格内容
            success: function(){
              // 对弹层中的表单进行初始化渲染
              form.render();
              // 表单提交事件
              form.on('submit(demo-login)', function(data){
                var field = data.field; // 获取表单字段值
                // 此处可执行 Ajax 等操作
                 $.ajax({
                     type: "POST",
                    url: '/test', // 服务器处理地址
                    dataType: 'json', // 返回类型为 JSON
                    contentType: "application/json", // 指定请求头部信息
                    data: JSON.stringify(field), // 将表单序列化为 JSON 字符串
                    success: function (res) {
                         // 根据code来判断是否成功
                        if (res.code === 0) {
                            layer.msg("提交成功！");
                        } else {
                            layer.msg("提交失败：" + res.message);
                        }
                    },
                    error: function () {
                        layer.msg("网络错误，请重试！");
                    }
                });
                return false; // 阻止默认 form 跳转
              });
            }
          });
      }
  });
});
{% endraw %}
</script>
</html>
posted @   lxd670  阅读(39)  评论(0)  编辑  收藏  举报
相关博文：
· 1.查看Sanic的request有什么
· 1.docker的下载和安装
· 1_Layui
· layui js thymeleaf 公共工具类
· Js 之treeTable树状表格
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2023-01-09 python装饰器
2023-01-09 网络
2023-01-09 进程池和线程池concurrent和multiprocessing
点击右上角即可分享
微信分享提示
AI IDE Trae