代码编织梦想

 <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>  

html动态生成模板(2)-爱代码爱编程

如何通过模板动态生成HTML代码? 看过我写的(1)版本的可能都很清楚,如何通过text/html类型的script标签动态生成html代码。 那么今天我就和大家说说另一种更加牛掰的方式,那就是通过text/te

js动态生成html表格-爱代码爱编程

刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有如下代码: <

简单快速的用java动态生成jsp/html前端页面。_刘信晨的博客-爱代码爱编程_java生成前端页面

首先给大家说说动态生成jsp、html的好处,大家都应该见过“淘宝”和“京东”,在每个节日会将他们菜单栏变成与节日相匹配的图片,和页面。这样就避免了项目修改完成之后再从新部署。 首先给大家看一下看一下效果图: ![test

用js动态生成html页面_人若初见的博客-爱代码爱编程_js动态写html

首先思路明确:生成的元素是一个完整的DOM对象;这些DOM对象的属性可以是字符串,xml文件,也可以是json格式的数据,存储在后台或者其它位置;通过层层解析,顺着DOM层级关系动态创建在html文档流中;这些html文档放于不同的模板文件中相应生成不同样式的效果。 以下就json格式存储的数据,简单示例一下: 第一步:获取attribute数据 var

根据html模板动态生成html_柒秋啦的博客-爱代码爱编程

public class GeneratingHTML {     /**      * 读取HTML文件      *@param filePath      *@return      */     public static String retrieveHtmlFile(String filePath) {          File fil

动态生成html页面内容_iteye_4537的博客-爱代码爱编程

using System; using System.Text; using System.IO; public class CreateHtml { public string ReadHtmlTemplate() { string message = null; try { FileStream fs = new FileStream(Request.

html 页面生成,动态生成Html页面内容-爱代码爱编程

using System; using System.Text; using System.IO; public class CreateHtml { public string ReadHtmlTemplate() { string message = null; try { FileStream fs = new FileStr

ts动态修改html属性,ts怎样实现,防止类中的属性被直接赋值修改?-爱代码爱编程

`export class Animal { privateAttribute setPrivateAttribute(value) { this.privateAttribute = value } } new Animal().setPrivateAttribute(‘good way’) //ok new Animal().priv

nodejs如何动态生成html页面,nodejs 简单实现动态html的方法-爱代码爱编程

动态替换html内容 1.实现的功能及原理 实现了将,用户表单的数据,与html相结合,将用户输入的数据,显示到html对应的位置。 原理:通过正则表达式,替换html中的模板数据 如用户名{name},可以通过拿到用户提交的name的值value,通过 replace(正则表达式,value)的方式替换掉原模板数据,并输出到客户端。 2.主