Печать строки таблицы в asp.net MVC - PullRequest
Новая
       21

Печать строки таблицы в asp.net MVC

0 голосов
/ 09 апреля 2019

Я настраиваю таблицу с транзакциями и хочу, чтобы можно было печатать каждую транзакцию отдельно одним нажатием кнопки (в основном, печать каждой строки).Но не могу понять, как.

Я пытался найти его в google / stackoverflow, но пока не могу найти то, что ищу. 

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Clientnumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LicensePlate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.AccountNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Amount)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Date)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
        <th>
            <a>Gegevens Ophalen</a>
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Clientnumber)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LicensePlate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AccountNumber)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Amount)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Status)
            </td>
            <td>
                <button id="idButton" class="btn btn-secondary">Print Transactions</button>
            </td>
        </tr>
    }
</table>

Такв конце я хочу иметь возможность нажать кнопку и получить предварительный просмотр строки, в которой находилась кнопка.

1 Ответ

1 голос
/ 09 апреля 2019

Я создал образец в javascript / jquery, использование может применяться к вашему файлу cshtml.

Вам нужно скопировать в файл HTML, чтобы запустить этот код. 

$('.idButton').on('click',function(){
     var printed = $(this).closest('tr').html();
     newWin= window.open("");
   newWin.document.write(printed);
   newWin.print();
   newWin.close();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table id="yourtable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Print</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
 <td><button class="idButton" class="btn btn-secondary">Print Transactions</button></td>
  </tr>

  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
 <td><button class="idButton" class="btn btn-secondary">Print Transactions</button></td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td><button class="idButton" class="btn btn-secondary">Print Transactions</button></td>
  </tr>
</table>

</body>
</html>
...