动态生成html

60 篇文章 0 订阅
54 篇文章 1 订阅
 <tbody class="js-material-lists">
 </tbody>
 
<template class="template-tpl">
        <tr class="init_row">
          <td>
            {{--权限控制--}}
            <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#fabModal" onclick="show_detail_fabric(this,id___LAS_KEY__)" >查看</button>
          </td>
          <td style="color:{{ system_color()['exploitStyle']['color'] }};" class="exploit_no___LA_KEY__"></td>
          <td class="place_name___LA_KEY__"></td>
          <td class="color_no___LA_KEY__"></td>
          <td class="color_name___LA_KEY__"></td>
          <td  class="paper_type_id___LA_KEY__"></td>
          <td  class="type_id___LA_KEY__"></td>
          <td  class="properties_id___LA_KEY__"></td>
          <td  class="area_id___LA_KEY__">
          <td  class="paper_delivery_date___LA_KEY__"></td>
          <td  class="all_material_date___LA_KEY__"></td>
          <td  class="delivery_date___LA_KEY__"></td>
        </tr>
      </template>
<script>
  // TODO 搜索
  function jsSearchFor() {
    var exploit_no = $('.exploit_no').val();
    if(exploit_no.length < 4){
      swal('查询请输入4位以上款号')
    }else{
      $('.js-material-lists').empty();
      var data = {
        'exploit_no': exploit_no,
        '_token': LA.token,
      };
      $.ajax({
        url: '{{ route('getProofing') }}',
        type: "GET",
        data: data,
        dataType: 'json',
        success: function (data) {
          if (data.status == 100){
            if (data.list.length >= 1){
              for (var i = 0; i < data.list.length; i++) {
                addmaterialsHtml(data.list[i],data.exploit_no);
              }
            }
          }
          else{
           // swal(data.message);
          }
        }
      });
    }
  }

  // TODO 初始化列表 HTML
  var tpl =  $('template.template-tpl');
  var index_search = 0;
  function addmaterialsHtml(list=null,exploit_no=null){
    index_search ++;
    var template = tpl .html().replace(/__LA_KEY__/g, index_search).replace(/id___LAS_KEY__/g, list.id);
    $('.js-material-lists').append(template);
    
    $('.exploit_no_'+index_search).text(exploit_no);
    $('.place_name_'+index_search).text(list.place_name);
    $('.color_no_'+index_search).text(list.color_no);
    $('.color_name_'+index_search).text(list.color_name);
    $('.paper_type_id_'+index_search).text(list.paper_type_name + list.type_name);
    $('.type_id_'+index_search).text(list.type_name);
    $('.properties_id_'+index_search).text(list.properties_name);
    $('.area_id_'+index_search).text(list.area_name);
    $('.paper_delivery_date_'+index_search).text(list.paper_delivery_date);
    $('.all_material_date_'+index_search).text(list.all_material_date);
    $('.delivery_date_'+index_search).text(list.delivery_date);
  }
  
  function show_detail_fabric(e,notice_id)
  {
    console.log(notice_id)
    $.ajax({
      url: "/admin/samproofing/getFabricDetail",
      type: "get",
      data:{
        '_token':LA.token,
        'notice_id':notice_id,
      },
      dataType:'json',
      success: function (res) {
        if(res.data.length > 0){
          show_view(res.data)
        }
      }
    });
  }
  
  function show_view(data)
  {
    var show_view = $(".show_view");
    show_view.empty()
    var html = "";
    html += `
            <tr>
                <td style="width: 5%;text-align: center;">序号</td>
                <td style="width: 11%;text-align: center;" class='td_class_modal'>材料名称</td>
                <td style="width: 5%;text-align: center;"class='td_class_modal'>类型</td>
                <td style="width: 5%;text-align: center;">数量</td>
                <td style="width: 15%;text-align: center;">缩水率</td>
                <td style="width: 12%;text-align: center;">规格</td>
                <td style="width: 7%;text-align: center;">颜色</td>
                <td style="width: 5%;text-align: center;">克重</td>
                <td style="width: 7%;text-align: center;">可裁幅宽</td>
                <td style="width: 18%;text-align: center;">使用部位</td>
                <td style="width: 10%;text-align: center;">备注说明</td>
            </tr>
            `;

    if (data != undefined) {
      $("#myModalLabel1").html("材料详情信息");
      for(var i in data)
      {
        var xh = parseInt(i)+1;
        var quantity ='';
        if (data[i]['quantity'] != null){
          quantity = data[i]['quantity'];
        }
        var water_rate ='';
        if (data[i]['water_rate'] != null){
          water_rate = data[i]['water_rate']+'%';
        }
        var water_rate_wd ='';
        if (data[i]['water_rate_wd'] != null){
          water_rate_wd = data[i]['water_rate_wd']+'%';
        }
        var water = "经:"+water_rate +"纬:"+ water_rate_wd;
        var specs ='';
        if (data[i]['specs'] != null){
          specs = data[i]['specs'];
        }
        var color_name ='';
        if (data[i]['colour'] != null){
          color_name = data[i]['colour'];
        }
        var grammage ='';
        if (data[i]['grammage'] != null){
          grammage = data[i]['grammage'];
        }
        var breadth ='';
        if (data[i]['breadth'] != null){
          breadth = data[i]['breadth'];
        }
        var parts ='';
        if (data[i]['parts'] != null){
          parts = data[i]['parts'];
        }
        var remark ='';
        if (data[i]['remark'] != null){
          remark = data[i]['remark'];
        }
        html += `
                    <tr>
                        <td class='td_class_modal'>`+ xh +`</td>
                        <td class='td_class_modal'>`+ data[i]['material_name'] +`</td>
                        <td class='td_class_modal'>`+ data[i]['type_name'] +`</td>
                        <td class='td_class_modal'>`+ quantity +`</td>
                        <td class='td_class_modal'>`+ water +`</td>
                        <td class='td_class_modal'>`+ specs +`</td>
                        <td class='td_class_modal'>`+ color_name +`</td>
                        <td class='td_class_modal'>`+ grammage +`</td>
                        <td class='td_class_modal'>`+ breadth +`</td>
                        <td class='td_class_modal'>`+ parts +`</td>
                        <td class='td_class_modal'>`+ remark +`</td>

                    </tr>
                `;
      }
    }else{
      $("#myModalLabel1").html("暂无材料详情信息");
    }
    show_view.append(html);
  }
</script>  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值