layui表单

{include file="Public:inner_header" /}
  <link rel="stylesheet" href="__STATIC__/add/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

  <!-- 表单搜索 -->
<div class="layui-input-inline" style="margin-top:1em;margin-bottom: 1em; width: 100%">
<form class="layui-form" lay-filter="component-form-group" id="search_submits" onsubmit="return false">

       <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-useradmin-formlist">
          <div class="layui-inline">
              <label class="layui-form-label">名称：</label>
              <div class="layui-input-inline">
                  <input type="text" class="layui-input" id="name" name="name" placeholder="用户名称"  width="80px">
              </div>
          </div>
          <div class="layui-inline">
                  <label class="layui-form-label">处理状态</label>
                  <div class="layui-input-block">
                      <select name="statusFeed" id="statusFeed" lay-filter="" lay-search>
                          <option value="">选择状态</option>
                          <option value="0">未处理</option>
                          <option value="1">已处理</option>
                      </select>
                  </div>
              </div>
          <div class="layui-inline">
              <button class="layui-btn" lay-submit="search_submits" lay-filter="reloadlst_submit">查询</button>
          </div>
      </div>

</form>
</div>

<div class="layui-btn-group demoTable">
  <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
  <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>

<table class="layui-table" lay-data="{height:'', url:'{:url('Achievementactivity/fenye')}', page:true, id:'demo', skin: 'row', even: true}"  lay-filter="demo" id="demo">
  <thead>
    <tr>
      <th lay-data="{type:'checkbox'}">ID</th>
      <th lay-data="{field:'id', sort: true}">ID</th>
      <th lay-data="{field:'title'}">标题</th>
      <th lay-data="{field:'start_time'}">开始时间</th>
      <th lay-data="{field:'end_time'}">结束时间</th>
      <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>

    </tr>
  </thead>
</table>

<!-- 日志弹出层 -->
<div id="tanchu" style="display: none">
    <table class="layui-hide" id="rizhi"  lay-filter="rizhi"></table>
</div>

<!-- 编辑弹出层 -->

  <form class="layui-form" id="testbj" style="display:none" name="testbj" >
  <div class="layui-form-item" style="padding-top: 1em;">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="on" class="layui-input" id="username" style="width:200px">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
     <select name="quiz" lay-search>
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
</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="写作" lay-skin="primary">
      <input type="checkbox" name="like[read]" title="阅读" checked lay-skin="primary">
      <input type="checkbox" name="like[dai]" title="发呆" lay-skin="primary">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch" lay-text="开启|关闭">
    </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="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text" style="padding-right:1em;">
    <label class="layui-form-label" >文本域</label>
    <div class="layui-input-block">
      <textarea lay-verify="required" name="wenben" id="wenben" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
</form>

 <!-- 切换卡 -->
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" id="docDemoTabBrief"  style="display: none">
  <ul class="layui-tab-title" id="xuanbiaoti">

  </ul>
  <div class="layui-tab-content" style="height: 100px;" id="xuanxiang">  </div>
</div>
<!-- <table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script> -->

<script src="__STATIC__/js/jquery.min.js" charset="utf-8"></script>
<script src="__STATIC__/add/layui/layui.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 

<script type="text/html" id="usernameTpl">
  <a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.title }}</a>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" href='{:url("Achievementactivity/layuiadd")}'>添加</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs" lay-event="rizhi">日志</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="qiehuan">切换</a>
</script>

<script>
  //使用from搜索，可以使用 form.on监听表单搜索动作，但必须在下面定义
layui.use(['table', 'form','element'], function(){
  var $ = layui.jquery;
  var table = layui.table;
 //layui.use中加入form后使用form监听提交表单事件，此处必须进行定义否则报错
  var form = layui.form;
  var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块,只需要把这个放到这里效果就有

  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    //console.log(obj)
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      // 自动获取id
      layer.msg('ID：'+ data.id + ' 的查看操作');

    } else if(obj.event === 'del'){
      alert(data.id);
      layer.confirm('真的删除'+data.id+'行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
     // layer.alert('编辑行：<br>'+ JSON.stringify(data))

      var tebj = $("#testbj").serialize() + '&id='+data.id;
      console.log(tebj);
      var id = data.id;
      alert(id);
      $.ajax({
          url:'{:url("Achievementactivity/edits")}',
          type:'get',
          async:true,
          data:"id=" + id,
          dataType: 'json',
          success:function(data){
            console.log(data.msg);
            $('#wenben').val(data.msg.aa);
          }
      });

       layer.open({
           type:1,
           area:['500px','600px'],
            title: 'tianxie'
            ,content: $("#testbj"),
            shade: 0,
            btn: ['提交', '重置']
            ,btn1: function(index, layero){

            var kk=$("#username").val();
               //ajax
              $.ajax({
                  //请求方式
                  type : "POST",
                  //请求地址
                  url : "",
                  //数据，json字符串
                  data : $("#testbj").serialize(),
                  //请求成功
                  success : function(result) {
                    //JSON.stringify($("#testbj").serialize())
                    console.log($("#testbj").serialize());
                    layer.close(index);
                     // console.log(result);
                  },
                  //请求失败，包含具体的错误信息
                  error : function(e){alert(7777);
                      //console.log(e.status);
                  }
              });

            },
            btn2: function(index, layero){

             return false;
            },
          cancel: function(layero,index){
             layer.closeAll();
            }

        });

    } else if(obj.event === 'rizhi') {
        //页面层
        layer.open({
          type: 1,
          skin: 'layui-layer-rim', //加上边框
          area: ['95%', '500px'], //宽高
          title:'日志详情',
          content:$("#tanchu"),
          // 日志弹框列表 js 实现代码
          success: function(layero, index){
                layui.use('table', function(){
                    var table = layui.table;
                    var cols =  [[ //标题栏
                         {field:'id', title: 'ID', sort: true}
                          ,{field:'title', title: '标题'}
                          ,{field:'status', title: '状态', sort: true},
                          {field:'start_time', title: '开始时间', sort: true}

                    ]]
                    //展示已知数据
                    table.render({
                        elem: '#rizhi'
                        , url: '{:url("Achievementactivity/fenye")}'
                        ,size:'sm'
                        ,cols:cols
                        ,even: true
                        , height: '420'

                        ,page: true //是否显示分页
                    });
                });
            }
        });
        //layer.msg('日志ID：'+ data.id + ' 的日志操作');
    } else if(obj.event === 'qiehuan') {

      //iframe层-父子操作,弹出ifram层并传递id给他，后端只需要接受即可
      layer.open({
        type: 2,
        area: ['700px', '550px'],
        title:'切换卡'+data.id,
        fixed: false, //不固定
        maxmin: true,
        content: '{:url("Achievementactivity/qiehuan")}?id='+data.id,
      });

         //页面层,此处考虑单独写一个选项卡表单提交页面，然后这里弹窗调用它
       /* layer.open({
          type: 1,
          skin: 'layui-layer-rim', //加上边框
          area: ['65%', '500px'], //宽高
          title:'切换卡'+data.id,
          content:$("#docDemoTabBrief"),
          //弹框列表 js 实现代码，显示该id下的几个内容
          success: function(layero, index){
            var urlList=[];
            var titlelist = [];
                $.ajax({
                    url:'{:url("Achievementactivity/qiehuan")}',
                    type:'get',
                    async:true,
                    data:"id=" + data.id,
                    dataType: 'json',
                    success:function(res){

                      titlelist.push('<li class="layui-this">网站设置</li>');
                      titlelist.push('<li >用户管理</li>');
                      titlelist.push('<li >权限分配</li>');
                      titlelist.push('<li >商品管理</li>');
                      titlelist.push('<li >订单管理</li>');

                        urlList.push('<div class="layui-tab-item layui-show">'+res.data.detail_img+'</div>');
                        urlList.push('<div class="layui-tab-item">'+res.data.title+'</div>');
                        urlList.push('<div class="layui-tab-item">'+res.data.add_time+'</div>');
                        urlList.push('<div class="layui-tab-item">'+res.data.reference_money+'</div>');
                        urlList.push('<div class="layui-tab-item">'+res.data.id+'</div>');
                      $('#xuanbiaoti').html(titlelist);
                      $('#xuanxiang').html(urlList);
                    }
                });
            }
        });*/
    }

  });

  var $ = layui.$, active = {
    getCheckData: function(){ //获取选中数据
      var checkStatus = table.checkStatus('idTest'),
      data = checkStatus.data;
      layer.alert(JSON.stringify(data));
    }
    ,getCheckLength: function(){ //获取选中数目
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.msg('选中了：'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
  };

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

    //列表搜索
    form.on('submit(reloadlst_submit)', function (data) {
        var name = data.field.name;
        var statusFeed = data.field.statusFeed;
  console.log(name);console.log(statusFeed);
       table.render({
            elem: '#demo' // 此处id为table的id
            , url: "{:url('Achievementactivity/formsousuo')}?name="+name+"&status="+statusFeed
            , cols: [[
                {field: 'id', title: '问题编号'}
                , {field: 'id', title: 'ID编号'}
                , {field: 'title', title: '标题'}
                , {field: 'status', title: '状态'}
               // , {field: 'start_time', title: '开始时间'}
                , {
                    field: 'start_time',
                    title: '开始时间',
                    templet: '<div>{{ layui.util.toDateString(d.开始时间*1000) }}</div>'
                }
                , {
                    field: 'end_time',
                    title: '创建时间',
                    templet: '<div>{{ layui.util.toDateString(d.end_time*1000) }}</div>'
                }
                , {field: 'is_check', title: '核算'}
                , {title: '操作', align: 'center', toolbar: '#sousuocaozuo', minWidth: 150}
            ]]
             ,page: true
        });
        return false;

    });
//列表搜索jieshu

});
</script>

<script type="text/html" id="sexTpl">
  {{#  if(d.status === '0'){ }}
    <span style="color: #ff0023;">未上架</span>
   {{#  } else if(d.status === '1'){ }}
   <span >已上架</span>
  {{#  } else if(d.status === '2'){ }}
   <span style="color: #009688;" >已下架</span>
  {{#  } }}
</script>

<script type="text/html" id="sousuocaozuo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="barDemo1">
  <a class="layui-btn layui-btn-xs" lay-event="edit">工具性按钮</a>
</script>

<!-- <script>
layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#test'
    ,url:'{:url("Achievementactivity/fenye")}'
    ,toolbar: '#toolbarDemo'
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
      //,curr: 5 //设定初始在第 5 页
      ,groups: 1 //只显示 1 个连续页码
      ,first: true //不显示首页
      ,last: true //不显示尾页
    }
    ,cols: [[
      {type:'checkbox'}
      ,{field:'id', title: 'ID', sort: true}
      ,{field:'title', title: '标题'}
      ,{field:'status', title: '状态', sort: true}
      ,{field:'start_time', title: '开始时间'}
      ,{field:'end_time', title: '结束时间', minWidth: 150}
      ,{field:'is_check', title: '核算', sort: true}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}

    ]]
    ,page: true
  });

  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选');
      break;

      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break;
    };
  });

  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2
        ,value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      });
    }
  });
});
</script>
 -->
</body>
</html>