Как я могу ввести диапазон строк и столбцов в моем скрипте?

Question

Как я могу ввести диапазон строк и столбцов в моем скрипте?

Я пытаюсь преобразовать строку таблицы (например, CSV) в таблицу HTML. Мой код отлично работает с простой таблицей, но при объединении строки и столбца происходит сбой. Так как же я могу использовать rowspan и столбец span в сценарии?

<!DOCTYPE html>
<html ng-app="" ng-controller="myCtrl">
<style>
table, th, td {
border: 1px solid black;
padding:5px;
}
table {
   border-collapse: collapse;
   margin:10px;
}
</style>
<body>
    <button ng-click="processData(allText)">
        Display CSV as Data Table
    </button>
    <div id="divID">
        <table>
            <tr ng-repeat="x in data">
                <td ng-repeat="y in x">{{ y }}</td>
            </tr>
        </table>
    </div>
    <div>
        <table>
        </table>
    </div>

JS

<script>
function myCtrl($scope, $http) {

    $scope.allText="Series |Wire Range\n (AWG) |"+
           "Wire Type |FW |Voltage\n (V) |Current \n (A) |"+
           "UG |CA |\nSL-6100 RS#2|26 16, SOL,\n Unprepared |"+
           "Cu RS#2|2 RS#2|300 RS#2|7 RS#2|B, D RS#2|"+
           "2(105), 4 RS#2|\n24 - 16, STR,\n Unprepared |"+
           "\nNominal Strip length: 9 - 10 mm CS#8|"+
           "\nEnvironmental - Maximum ambient temperature"+
           " rating for CNR: 85 C CS#8|\n";
    $scope.processData = function(allText) {
        // split content based on new line
        var allTextLines = allText.split(/\|\n|\r\n/);
        var headers = allTextLines[0].split('|');
        var lines = [];

        for ( var i = 0; i < allTextLines.length; i++) {
            // split content based on comma
            var data = allTextLines[i].split('|');
            if (data.length == headers.length) {
                var temp = [];
                for ( var j = 0; j < headers.length; j++) {
                    temp.push(data[j]);
                }
                lines.push(temp);
            }
        };
        $scope.data = lines;
    };
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

RS # 2 --- указывает на диапазон строк 2

CS #8 --- указывает Colspan 8

| --- это разбавитель для клетки

|\n --- для новой строки

и значение в $scope.allText является строкой таблицы CSV

по сути, я должен получить эту таблицу в качестве выходной

выходной стол

4

javascript angularjs csvtotable

Источник

user5621044 01 дек '15 в 09:46

2 ответа

Решение

контроллер

function myCtrl($scope, $http) {
    $scope.allText = "Series |Wire Range\n (AWG) |Wire Type |FW |Voltage\n (V) |Current \n (A) |UG |CA |\nSL-6100 RS#2|26 16, SOL,\n Unprepared |Cu RS#2|2 RS#2|300 RS#2|7 RS#2|B, D RS#2|2(105), 4 RS#2|\n24 - 16, STR,\n Unprepared |\nNominal Strip length: 9 - 10 mm CS#8|\nEnvironmental - Maximum ambient temperature rating for CNR: 85 C CS#8";
    $scope.processData = function (allText) {
        var table = [];
        allText.split(/\|\n|\r\n/).forEach(function (line) {
            var tr = [];
            line.split('|').forEach(function (cell) {
                tr.push({
                    text: cell.replace(/RS#.*$/, '').replace(/CS#.*$/, ''),
                    rowspan: (cell + 'RS#1').replace(/^[\S\s]*?RS#(\d*).*$/, '$1'),
                    colspan: (cell + 'CS#1').replace(/^[\S\s]*?CS#(\d*).*$/, '$1'),
                })
            })
            table.push(tr)
        });
        $scope.table = table;
    };
}

HTML

<table>
    <tr ng-repeat="tr in table">
        <td ng-repeat="td in tr" ng-attr-colspan="{{td.colspan}}"  ng-attr-rowspan="{{td.rowspan}}">{{ td.text }}</td>
    </tr>
</table>

Фрагмент кода

function myCtrl($scope, $http) {
  $scope.allText = "Series |Wire Range\n (AWG) |Wire Type |FW |Voltage\n (V) |Current \n (A) |UG |CA |\nSL-6100 RS#2|26 16, SOL,\n Unprepared |Cu RS#2|2 RS#2|300 RS#2|7 RS#2|B, D RS#2|2(105), 4 RS#2|\n24 - 16, STR,\n Unprepared |\nNominal Strip length: 9 - 10 mm CS#8|\nEnvironmental - Maximum ambient temperature rating for CNR: 85 C CS#8";
  $scope.processData = function (allText) {
    var table = [];
    allText.split(/\|\n|\r\n/).forEach(function (line) {
      var tr = [];
      line.split('|').forEach(function (cell) {
        tr.push({
          text: cell.replace(/RS#.*$/, '').replace(/CS#.*$/, ''),
          rowspan: (cell + 'RS#1').replace(/^[\S\s]*?RS#(\d*).*$/, '$1'),
          colspan: (cell + 'CS#1').replace(/^[\S\s]*?CS#(\d*).*$/, '$1'),
        })
      })
      table.push(tr)
    });
    $scope.table = table;
  };
}

angular.module('myApp', [])
.controller('ctrlr', myCtrl)

table, th, td {
    border: 1px solid black;
    padding: 5px;
}

table {
    border-collapse: collapse;
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="ctrlr">
    <button ng-click="processData(allText)">
      Display CSV as Data Table
    </button>
    <div id="divID">
      <table>
        <tr ng-repeat="tr in table">
          <td ng-repeat="td in tr" ng-attr-colspan="{{td.colspan}}"  ng-attr-rowspan="{{td.rowspan}}">{{ td.text }}</td>
        </tr>
      </table>
    </div>
    <div>
      <table></table>
    </div>
  </div>
</div>

1

Источник

user360067 01 дек '15 в 10:16

Другие вопросы по тегам javascript angularjs csvtotable

user1502868 01 дек '15 в 10:03 2015-12-01 10:03 · Accepted Answer · 2015-12-01 10:03

Вы можете создать объект со строками и столбцами, чтобы использовать его как rowspan и colspan.

Как это

демонстрация

$scope.processData = function(allText) {
    // split content based on new line
    var allTextLines = allText.split(/\|\n|\r\n/);
    var headers = allTextLines[0].split('|');
    var lines = [];
    var r,c;
    for ( var i = 0; i < allTextLines.length; i++) {
        // split content based on comma
        var data = allTextLines[i].split('|');
        if (data.length == headers.length) {
            var temp = [];
            for ( var j = 0; j < headers.length; j++) {
                if(data[j].indexOf("RS") !== -1) {
                    r = data[j].split("#").reverse()[0];
                }
                else {
                    r = 0;
                }
                if(data[j].indexOf("CS") !== -1) {
                    c = data[j].split("#").reverse()[0];

                }
                else {
                    c = 0;
                }
                temp.push({"rows":r,"cols":c,"data":data[j]});
            }
            lines.push(temp);
        }
    }
    alert(JSON.stringify(lines));
    $scope.data = lines;
}

Вы можете добавить CS к вашей строке и изменить условия, как требуется в этом коде.