layui弹窗 下拉框显示

在这里插入图片描述

<a href="javascript:;" class="btn btn btn-danger redo" style="margin-left: 0.5rem;" onclick="redo()">新重做</a>

<form class="layui-form" id="test" style="display:none">
  <div class="layui-form-item">
    <div class="col-md-12">
      <table class="layui-table" id="serviceTables" >
        <colgroup>
          <col width="50%">
          <col width="20%">
          <col width="30%">
        </colgroup>
        <thead>
        <tr>
          <th>
            责任部门
          </th>
          <th>占比
          <th>操作</th>
        </thead>
        <tbody>
        <tr>

        </tr>
        </tbody>
      </table>
      <button id="newBtn" type="button" class="layui-btn layui-btn-primary layui-btn-fluid" > <i class="layui-icon"></i> 新增</button><br>
  </div>
  </div>
</form>
function redo(){
    layer.open({
      type:1,
      area:['500px','600px'],
      title: '重做',
      content: $("#test"),
      // shade: 0,
      // btn: ['提交', '取消'],
      // btn1: function(index, layero){
      //   var kk=$("#username").val();
      //   var kk1=$("#quiz").val();
      //
      //   alert(kk + kk1);
      // },
      // btn2: function(index, layero){
      //   layer.closeAll();
      // },
      cancel: function(layero,index){
        layer.closeAll();
      }
    });

    // 新增服务项目
    $("#newBtn").click(function() {
      var str = '';
      str += '<tr>';
      str += '<td>';
      str += '<select name="depart" id="depart" class="form-control depart" lay-verify="required" lay-search>';
      str += '   <option value="">请选择</option>';
      str += '   <option value="秃毛呀">秃毛?</option>';
      str += '   <option value="秃驴呀">秃驴?</option>';
      str += '   <option value="秃牙呀">秃牙?</option>';
      str += '   <option value="秃顶呀">秃顶?</option>';
      str += '</select></td>';

      str += '<td>';
      // str += '<input type="text" id="depart_per" placeholder="占比" autocomplete="off"';
      // str += 'class="layui-input">';

      str += '<input type="number" name="title" class="layui-input username" id="username" style="width:90%;" min="0" max="100"';
      str += 'onmousewheel="$.fn.commonBulkJs.stopScrollFun()" οnscrοll="$.fn.commonBulkJs.stopScrollFun()"  required  lay-verify="required" placeholder="占比" autocomplete="on">';
      str += '</td>';

      str += '<td><button type="button" class="layui-btn layui-btn-xs qrBtn"> <i class="layui-icon">确定</i></button>';
      str += '<button type="button" class="layui-btn layui-btn-xs delBtn"> <i class="layui-icon">删除</i></button></td>';

      str += '</tr>';

      $("#serviceTables").append(str);

      layui.use('form', function() {
        var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
        //……
        //但是,如果你的HTML是动态生成的,自动渲染就会失效
        //因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();
        form.render();
      });

    });

 // 确定
    $("#myTable").on("click",".qrBtn",function(){
      $("#myTable tr:last").remove();
      var newStr = '';
      var serviceName = $(this).parent().parent().find("td:nth-child(1)").find("input").val();
      var servicePrice = $(this).parent().parent().find("td:nth-child(2)").find("input").val();

      newStr += '<tr>';
      newStr += '<td>';
      newStr += serviceName;
      newStr += '</td>';
      newStr += '<td>' + servicePrice + '</td>';
      newStr += '<td><a href="#" class="co-green bjBtn">编辑</a>  <a href="#" class="co-green delBtn">删除</a></td>';
      newStr += '</tr>';

      $("#myTable").append(newStr);

      layui.use('form', function() {
        var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
        //……
        //但是,如果你的HTML是动态生成的,自动渲染就会失效
        //因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();
        form.render();
      });
    });

    // 编辑
    $("#myTable").on("click", ".bjBtn", function () {
      var thinLine = $(this).parents('tr');
      thinLine.each(function (i) {
        // var id = $(this).find("input[name='id']").val();
        var reg = /编辑/;// 遍历 tr
        $(this).children('td').each(function (j) {  // 遍历 tr 的各个 td
          // alert("第"+(i+1)+"行,第"+(j+1)+"个td的值:"+$(this).text()+"。");

          var tdDom = $(this);
          //保存初始值
          var tdPreText = $(this).text();
          //给td设置宽度和给input设置宽度并赋值
          if (reg.test(tdPreText)) {
            var newBtns = '<button type="button"  class="layui-btn layui-btn-xs qrBtn"><i class="layui-icon">确定</i></button>';
            newBtns += '<button type="button" class="layui-btn layui-btn-xs cancelBtn"><i class="layui-icon">取消</i></button>';
            $(this).html(newBtns);
          } else {
            $(this).html("<input type='text'>").find("input").addClass('layui-input').val(tdPreText);
          }

        });
      });
    });

  //新事件
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值