javascript распечатать окно разделить репитер выход в страницах - PullRequest
0 голосов
/ 23 сентября 2018

Я разрабатываю систему управления школой для своей школы.Он работает под DotNetNuke (у меня есть некоторый опыт работы с ним), поэтому платформа asp.net, и я разрабатываю на C #.

Проект находится в продвинутом состоянии.В настоящее время я пытаюсь написать функции печати для некоторых таблиц, которые я разработал.Поскольку вывод на принтер должен идти на принтер, подключенный к клиенту, я должен разработать его в javascript.Проблема: у меня ограниченный опыт работы с javascript, и мне нужна помощь.

Таблица, которую я хочу напечатать, выглядит следующим образом: Данные книги учета .После довольно сложной магии с процедурами сервера sql и кодом C # эта таблица создается с вложенным повторителем.Код в файле ascx выглядит следующим образом:

<div id="RecordTable" style="@media print and (width:21cm) and (height:29.7cm) {@page {margin: 3cm;} } @page {size:A4 portrait; margin:10%;}" runat="server">
<asp:Repeater ID="StudentRepeater" OnItemDataBound="StudentRepeater_ItemDatabound" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td style="padding-top: 15px; padding-bottom: 5px; font-size: 18px">Student: &nbsp &nbsp;</td>
            <td style="padding-top: 15px; padding-bottom: 5px; font-size: 18px"><%#Eval("DisplayNameEng") %></td>
            <td>
                <asp:HiddenField ID="hfStudentID" Value='<%#Eval("StudentID") %>' runat="server" />
            </td>
        </tr>
            <td style="padding-top: 2px; padding-bottom: 12px; font-size: 22px">សិស្ស &nbsp &nbsp;</td>
            <td style="padding-top: 2px; padding-bottom: 12px; font-size: 22px"><%#Eval("DisplayNameKhm") %></td>
            <td>&nbsp;</td>
        <tr>

        </tr>
        <tr>
            <td colspan="3">
                <asp:Repeater ID="CourseRepeater" runat="server">
                    <HeaderTemplate>
                        <table style="border-style: solid; padding: 5px">
                            <thead>
                                <tr>
                                    <th style="padding-left:9px; border-right:thin solid">Course</th>
                                    <th style="padding-right: 8px; padding-left:6px; border-right:thin solid" colspan="2">CW+Ex</th>
                                    <th style="padding-right: 20px; padding-left:6px; border-right:thin solid" colspan="2">Homew</th>
                                    <th style="padding-right: 12px;; padding-left:6px">Rank</th>
                                </tr>
                            </thead>
                            <tbody>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td style="font-size: 15px; padding-left: 10px; padding-right: 25px; padding-top:5px; border-right:thin solid"><%#Eval("Course") %></td>
                            <td style="font-size: 15px; text-align: right; padding-right: 12px; padding-left:7px"><%#Eval("CEAvg") %></td>
                            <td style="font-size: 15px; padding-left: 4px; padding-right: 18px; border-right:thin solid"><%#Eval("CEAss") %></td>
                            <td style="font-size: 15px; text-align: right; padding-right: 12px"><%#Eval("HWAvg") %></td>
                            <td style="font-size: 15px; padding-left: 4px; padding-right: 15px; border-right:thin solid"><%#Eval("HWAss") %></td>
                            <td style="font-size: 15px; text-align: right; padding-right: 12px;"><%#Eval("ScoreRank") %></td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </tbody>
                                <tfoot>
                                    <tr style="border-top: 1px solid">
                                        <td style="font-size: 15px; padding-left: 10px; padding-right: 12px; padding-top:5px; border-right:thin solid">
                                            Total</td>
                                        <td style="font-size: 15px; text-align: right; padding-right: 12px; padding-left:7px">
                                            <asp:Label ID="lblCETotal" runat="server" /></td>
                                        <td style="font-size: 15px; padding-left: 4px; padding-right: 12px; border-right:thin solid">
                                            <asp:Label ID="lblCETotalAss" runat="server" /></td>
                                        <td style="font-size: 15px; text-align: right; padding-right: 12px">
                                            <asp:Label ID="lblHWTotal" runat="server" /></td>
                                        <td style="font-size: 15px; padding-left: 4px; padding-right: 15px; border-right:thin solid">
                                            <asp:Label ID="lblHWTotalAss" runat="server" /></td>
                                        <td style="font-size: 15px; text-align: right; padding-right: 12px">
                                            <asp:Label ID="lblTotalRank" runat="server" /></td>
                                    </tr>
                                </tfoot>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>            
    </FooterTemplate>
</asp:Repeater>

Я не знаю, будет ли работать встроенный стиль css тега div, но я планирую переместить все ввнешний файл CSS, когда эта часть проекта завершена.Это не проблема сейчас.

Я хочу отправить этот вывод ретранслятора на принтер.Я использовал некоторый код javascript, который работает для другой таблицы:

<script type="text/javascript">
function printRecordbook() {
    var prntData = document.getElementById("<%=RecordTable.ClientID%>");
    var prntWindow = window.open("", "Print", "width=650,height=300,left=0,top=0,toolbar=0,scrollbar=0,status=0");
    prntWindow.document.writeln("<h1>Recordbook totals</h1>");
    prntWindow.document.writeln("<p>Period:  <%=drdownPeriod.SelectedItem%></p>");
    prntWindow.document.writeln("<p>Grade:  <%=drdownGrade.SelectedItem%></p>");
    prntWindow.document.write(prntData.outerHTML);
    prntWindow.document.close();
    prntWindow.focus();
    prntWindow.print();
    prntWindow.close();
}

Проблема в том, что для другой таблицы гарантировано было меньше 1 страницы (1 строка на одного учащегося в течение 15-25 лет)ученики).Текущая таблица будет занимать несколько страниц, и я хочу сохранить данные для каждого учащегося вместе.

Разрабатывая дома, у меня нет принтера для проверки результата.Мне нужен совет, как сохранить каждый элемент внешнего повторителя вместе и как сделать заголовок страницы на всех страницах, кроме первой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...