分享
三行代码  ›  专栏  ›  技术社区  ›  melx

用户单击选定按钮时显示详细信息

  •  0
  • melx  · 技术社区  · 2 天前

    我想展示 bill number

    我已经获取了数据,但我不知道如何添加这个网址 /api/sales_bill_info/{$bill_number}

    $.each(resultData, function(index, row) {
    
      // var editUrl = url+'/'+row.id+"/edit";
      bodyData += "<tr style='font-size: 0.78em;'>"
      bodyData += "<td>" + i++ + "</td>" +
        "<td><a href=" {
          {
            url('/api/sales_bill_info/'. + row.bill_number + )
          }
        }
      " class='btn btn-success btn-sm printbill' value='" + row.bill_number + "' style='margin-left:20px;'>PRINT</a></td>" +
        "<td><button class='btn btn-sm btn-danger cancelbill' id='cancelbill' value='" + row.SID + "' style='margin-left:20px;'>CANCEL BILL" + row.SID + "</button></td>" +
        "<td>" + row.bill_number + "</td>" +
        "<td>" + row.compy_name + "</td>" +
        "<td>" + row.truck_number + "/" + row.trailer_number + "</td>" +
        "<td>" + row.Devicenumber + "</td>" +
        "<td>" + row.slavename + "</td>" +
        "<td>" + row.name + "</td>" +
        "<td>" + row.tag_area + "</td>" +
        "<td>" + row.Lname + "</td>" +
        "<td>" + row.bill_number + "</td>" +
        "<td>" + row.driverPhone + "</td>" +
        "<td>" + row.created_at_sale + "</td>" +
        "<td><button class='btn btn-danger delete' value='" + row.id + "' style='margin-left:20px;'>Delete</button></td>";
      bodyData += "</tr>";
    
    })
    $("#bodyData").append(bodyData);
    }
    });

    我试着加上这个 "<td><a href="{{url('/api/sales_bill_info/'.+row.bill_number+)}}" class='btn btn-success btn-sm printbill' value='"+row.bill_number+"' style='margin-left:20px;'>PRINT</a></td>"

    但不起作用。

    有人可以帮我

    2 回复  |  直到 2 天前
        1
  •  0
  •   Donkarnash    2 天前

    $.each(resultData, function(index, row) {
      let editUrl = `/api/sales_bill_info/${row.bill_number}`;
      // var editUrl = url+'/'+row.id+"/edit";
      bodyData += "<tr style='font-size: 0.78em;'>"
      bodyData += "<td>" + i++ + "</td>" +
        "<td><a href=" + editUrl + "class='btn btn-success btn-sm printbill' value='" + row.bill_number + "' style='margin-left:20px;'>PRINT</a></td>" +
        "<td><button class='btn btn-sm btn-danger cancelbill' id='cancelbill' value='" + row.SID + "' style='margin-left:20px;'>CANCEL BILL" + row.SID + "</button></td>" +
        "<td>" + row.bill_number + "</td>" +
        "<td>" + row.compy_name + "</td>" +
        "<td>" + row.truck_number + "/" + row.trailer_number + "</td>" +
        "<td>" + row.Devicenumber + "</td>" +
        "<td>" + row.slavename + "</td>" +
        "<td>" + row.name + "</td>" +
        "<td>" + row.tag_area + "</td>" +
        "<td>" + row.Lname + "</td>" +
        "<td>" + row.bill_number + "</td>" +
        "<td>" + row.driverPhone + "</td>" +
        "<td>" + row.created_at_sale + "</td>" +
        "<td><button class='btn btn-danger delete' value='" + row.id + "' style='margin-left:20px;'>Delete</button></td>";
      bodyData += "</tr>";
    
    });
    $("#bodyData").append(bodyData);
        2
  •  0
  •   Luca Favorido    2 天前

    模板字符串 在JavaScript中。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

    它们可以真正简化您的代码并避免一些问题,例如带有引号或双引号的问题。

    const resultData = [{
      bill_number: 1,
      SID: 2,
      compy_name: 'xxx',
      truck_number: '54125',
      Devicenumber: '123456',
      slavename: 'fff',
      trailer_number: 'yyy',
      name: 'pluto',
      tag_area: 'A51',
      Lname: 'xxx',
      bill_number: '1234',
      driverPhone: '+0236851545',
      created_at_sale: '2020-01-01',
    }];
    
    function url(path) {
      return 'http://...'
    }
    
    $.each(resultData, function(i, row) {
      $(`#bodyData`).append(
        `<tr style='font-size: 0.78em;'>
          <td>${i++}</td>
          <td>
            <a 
              href="${url('/api/sales_bill_info/'+row.bill_number)}}"
              class='btn btn-success btn-sm printbill' 
              value='${row.bill_number}' style='margin-left:20px;'>
                PRINT
            </a>
          </td>
          <td>
            <button 
              class='btn btn-sm btn-danger cancelbill'
              id='cancelbill' value='${row.SID}' 
              style='margin-left:20px;'>
                CANCEL BILL ${row.SID}
            </button>
          </td>
          <td>${row.bill_number}</td>
          <td>${row.compy_name}</td>
          <td>${row.truck_number} ${row.trailer_number}</td>
          <td>${row.Devicenumber}</td>
          <td>${row.slavename}</td>
          <td>${row.name}</td>
          <td>${row.tag_area}</td>
          <td>${row.Lname}</td>
          <td>${row.bill_number}</td>
          <td>${row.driverPhone}</td>
          <td>${row.created_at_sale}</td>
          <td>
            <button 
              class='btn btn-danger delete' 
              value='${row.id}' 
              style='margin-left:20px;'>
              Delete
            </button>
          </td>
        </tr>`);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <table id='bodyData'></table>