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

Question

当用户从列表中单击它时，我想显示bill number，

我也已经获取了数据，但我不知道如何添加此 url /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>"

但不起作用。

有人可以帮我解决这个问题

Answer 1

您可以尝试将编辑 url 的值分配给一个变量，然后使用相同的值。

$.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);

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