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

Я пытаюсь преобразовать строку таблицы (например, csv) в таблицу html. Мой код отлично работает с простой таблицей, но когда он объединяет строку и столбец, он терпит неудачу. Итак, как я могу использовать диапазон строк и диапазон столбцов в сценарии?

<!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 --- указывает, что rowspan равен 2

cs#8 --- указывает столбец из 8

| ---это разделитель для ячейки

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

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

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

выходная таблица


javascript angularjs csvtotable
person insomniac    schedule 01.12.2015    source источник
comment
ПРИМЕЧАНИЕ: вы можете изменить строку CSV на охват набора   -  person insomniac    schedule 01.12.2015

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете создать объект со строками и столбцами, чтобы использовать его как 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 в свою строку и изменить условия в соответствии с требованиями этого кода.

person Jay Shukla    schedule 01.12.2015
comment
TY jay... но он не может отображать таблицу, так как рендеринг выполняется в теге TABLE - person insomniac; 01.12.2015
comment
Для этого вам нужно изменить логику ваших строк, потому что для этого требуется 3 TR, где в последнем TR будет только 1 TD, тогда только он будет отображаться в соответствии с изображением вашей выходной таблицы. - person Jay Shukla; 01.12.2015
comment
1 последний вопрос, как я могу удалить теги RS CS, поскольку они отображаются в данных таблицы? - person insomniac; 01.12.2015
comment
Вы можете переопределить значение data[j] внутри, если такое условие, как data[j] = data[j].split(RS)[0]; Это сделает это значение, т.е. до RS. - person Jay Shukla; 01.12.2015

arrow_upward
1
arrow_downward

Контроллер

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>

person potatopeelings    schedule 01.12.2015