AngularJS exportiert Excel-Anweisungen

Dieser Artikel stellt hauptsächlich die Excel-Exportanweisungen von AngularJS vor, die einen gewissen Referenzwert haben. Jetzt können Freunde in Not darauf zurückgreifen.

ExcelExportideen

Referenzartikel – AngularJS verwendet Anweisungen zum Implementieren des Tabellenexports im CSV

Die Exportfunktion Excel wird im Projekt verwendet. Lehrer Pan hat in seinem Blog bereits die technischen Schwierigkeiten beim Exportieren der Tabelle nach csv implementiert. Der Rest basiert lediglich auf den tatsächlichen Geschäftsanforderungen zur Verbesserung dieser Richtlinie.

Im Allgemeinen sind die folgenden Probleme aufgetreten:

Die Funktionsschaltfläche exportiert nicht

Weil der ursprüngliche Befehl den gesamten Inhalt der Tabelle exportiert Standardmäßig haben wir beim ersten Direktexport festgestellt, dass die HTML-Codes für die Schaltflächen zum Anzeigen und Bearbeiten direkt exportiert wurden. Was wir wollen, sind Personalinformationen und Personalqualifikationsinformationen. Der Befehl

fügt Parameter hinzu: die Anzahl der gültigen Datenspalten.

Wie in der Abbildung gezeigt, sind die gültigen Datenspalten hier Städte, Bezirke, Kreise usw., bis der Gültigkeitszeitraum abläuft. Es gibt insgesamt 15 Spalten, die an den Exportbefehl übergeben werden Parameter.

self.exportCols = scope.exportCols;

for (let i = 0; i <p>Es stellt sich heraus, dass die innere Schleife alle Datenspalten umfasst, aber jetzt wird sie auf die Anzahl der übergebenen gültigen Datenspalten geändert. </p><h2 id="Zeilenübergreifende-Tabelle">Zeilenübergreifende Tabelle</h2><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/680/867/883/1531123509788663.png" class="lazy" title="1531123509788663.png" alt="AngularJS exportiert Excel-Anweisungen"></p><p>Nehmen Sie dieses Bild als Beispiel. Die erste Zeile enthält <code>15</code> Spalten, die Daten in der zweiten Zeile jedoch nur Spalte <code>4</code>, da die restlichen Spalten durch Setzen von <code>rowspan</code> in der ersten Zeile angezeigt werden. Tatsächlich stehen in der <code>tr</code> in der zweiten Zeile nur <code>4</code> Personalqualifikationen <code>td</code>. </p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/843/685/233/1531123518744940.png" class="lazy" title="1531123518744940.png" alt="AngularJS exportiert Excel-Anweisungen"></p><p>Dies führt dazu, dass die zweite Zeile beim Exportieren nur vier Daten enthält und von links ausgerichtet ist, sodass wir zeilenübergreifend leere Daten zu den Spalten hinzufügen müssen. </p><p>Fügen Sie eine bedingte Beurteilung hinzu und übergeben Sie die Länge der verbleibenden Spalten, wenn eine Spalte überspannt wird. Dies wird verwendet, um zu unterscheiden, ob es sich um eine normale Spalte oder eine Spalte mit Überbrückung handelt. </p><pre class="brush:php;toolbar:false">if (self.isNormalItem(rowData)) {
    // 如果该列为正常列，循环内容
    for (let j = 0; j <h2 id="Eine-leere-Spalte-erscheint-im-Qualifikationszertifikat">Eine leere Spalte erscheint im Qualifikationszertifikat</h2><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/802/452/143/1531123537590884.png" class="lazy" title="1531123537590884.png" alt="AngularJS exportiert Excel-Anweisungen"></p><p>Da für die Schaltfläche „Qualifikationszertifikat hinzufügen“ eine leere Spalte hinzugefügt werden muss, wird auch eine leere Spalte angezeigt erscheinen beim Exportieren. Der Effekt ist nicht gut. </p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/767/939/808/1531123544352657.png" class="lazy" title="1531123544352657.png" alt="AngularJS exportiert Excel-Anweisungen"></p><p>Wenn eine gekreuzte Spalte erscheint, muss beurteilt werden, ob die letzten vier Inhalte der vorherigen Zeile leer sind leer, sollte es sein. Der Inhalt dieser Spalte wird in die vorherige Zeile verschoben. </p><pre class="brush:php;toolbar:false">if (self.isNormalItem(rowData)) {
    // 如果该列为正常列，循环内容
    ...
} else if (self.isFirstItem(csvString)) {
    // 如果当前跨行资质是当前人员的第一个资质，则将该资质添加到上一行
    // 因为能添加人员资质的界面第一行的人员资质是空的，所以需要将该资
    // 质添加到上一行
    csvString = self.addDataToPreString(rowData, csvString);
} else {
    // 根据有效数据中的跨行列拼接空数据
    ...
}

Fügen Sie ein weiteres else hinzu. Wenn die Spalte, die gerade angekreuzt wird, die erste Qualifikation der aktuellen Person ist, fügen Sie die Qualifikationsdaten dieser Zeile in das leere Feld der vorherigen Qualifikationszeile ein.

Das Folgende ist die spezifische Implementierung der Methode:

// 判断当前表格中资质是否是第一项资质
self.isFirstItem = function(string) {
    // 分隔字符串
    var csvArray = string.split(',');
    // 循环已有字符数组的倒数四个元素，判断是否有效
    for (var i = csvArray.length - 1; i >= csvArray.length - 4; i--) {
        if (self.isValid(csvArray[i])) {
            return false;
        }
    }
    return true;
};
// 判断当前字符是否有效
// 空字符和\n视为无效
self.isValid = function(char) {
    if (char === '' || char === '\n') {
        return false;
    } else {
        return true;
    }
};
// 添加数据到字符串的上一行
self.addDataToPreString = function(data, string) {
    // 字符串分隔为数据
    var csvArray = string.split(',');
    // 循环，将有效的数据添加到上一行
    for (let i = 0; i <p>Die endgültige Implementierung des exportierten <code>csv</code>-Effekts: </p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/976/352/627/1531123556704357.png" class="lazy" title="1531123556704357.png" alt="AngularJS exportiert Excel-Anweisungen"></p><p>Die Oben finden Sie den gesamten Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website! </p><p>Verwandte Empfehlungen: </p><p class="comments-box-content"><a title="AngularJS 文档阅读的指令scope" href="http://www.php.cn/js-tutorial-406295.html" target="_blank">AngularJS-Dokumentleseanweisungsbereich</a><br></p><p class="mt20 ad-detail-mm hidden-xs"><a title="AngularJS 表格导出添加额外信息" href="http://www.php.cn/js-tutorial-406294.html" target="_blank">AngularJS-Tabellenexport zum Hinzufügen zusätzlicher Informationen</a><br></p>

Das obige ist der detaillierte Inhalt vonAngularJS exportiert Excel-Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!