javascript - 如何按号码订购

Question

My plunker

在这个基于 ng-repeat 中的 orderby 的 plunker 中它工作正常但是当 rowId 在父 + 按钮中超过 9 个数字时，rowid 变为 10。

父行 ID 10 显示为 1 的子行。

这里我用-分隔父子。如果 rowid 是 child ，那么我在 child 记录之前添加 - 。最后我想要实现的是我想将 10 显示为父级，将 1-10 显示为子级。

    var newRow = {
    "rowId": "1",
    "componentIdentification": "",
    "componentName": "",
    "codigo": "",
    "componentType": "",
    "componentState": "",
    "actionId": "",
    "actionPerform": ""
  }
  $scope.componentList = [];
  $scope.componentList.push(angular.copy(newRow));

  $scope.addParentRow = function(rowId) {
    var newGridRow = angular.copy(newRow);
    var lastChar = getListOfSameLevel(rowId, true); //isParentRow
    var parentId = rowId.length > 1 ? rowId.slice(0, rowId.length - 1) : "";
    newGridRow.rowId = parentId + getNextChar(lastChar); 
    $scope.componentList.push(newGridRow);
  }

  $scope.addChildRow = function(rowId) {
    var newGridRow = angular.copy(newRow);
    var lastChar = getListOfSameLevel(rowId, false);
    if (rowId.length === lastChar.length) {
      newGridRow.rowId = rowId + "-1";
    } else {
      var parentId = lastChar.length > 1 ? lastChar.slice(0, lastChar.length - 1) : "";
      newGridRow.rowId = parentId + getNextChar(getLastChar(lastChar));
    }
    $scope.componentList.push(newGridRow);
  };

  var getNextChar = function(inputChar) {
    return parseFloat(inputChar) + 1;
  };

  var getLastChar = function(fullStr) {
    return fullStr.slice(-1);
  };

  var getListOfSameLevel = function(rowId, isParentRow) {
    var compIdLength = rowId.length;
    var matchedArray = [];
    var sortedMatchedArray = [];
    var latestCompId = "";

    if (compIdLength > 1) {
      var parentId = isParentRow ? rowId.slice(0, rowId.length - 1) : rowId;
      if (!isParentRow) {
        matchedArray = _.filter($scope.componentList, function(row) {
          return ((row.rowId.length >= compIdLength) && row.rowId.startsWith(parentId));
        });
      } else {
        matchedArray = _.filter($scope.componentList, function(row) {
          return ((row.rowId.length === compIdLength) && row.rowId.startsWith(parentId));
        });
      }

      sortedMatchedArray = matchedArray.sort();
      latestCompId = sortedMatchedArray[sortedMatchedArray.length - 1].rowId;
      return isParentRow ? getLastChar(latestCompId) : latestCompId;
    } else {
      matchedArray = _.filter($scope.componentList, function(row) {
        return (row.rowId.length === compIdLength || (!isParentRow && row.rowId.startsWith(rowId)));
      });
      sortedMatchedArray = matchedArray.sort();
      latestCompId = sortedMatchedArray[sortedMatchedArray.length - 1].rowId;
      return latestCompId;
    }
  };

Answer 1

问题是您将 rowID 排序为字符串而不是 rowID 为数字的结果。

我添加了一个函数来返回 rowID 的整数值，然后对其进行排序。它将第 10 行放在列表中的正确位置(在 9 之后，而不是在 1 之后)，但在 10 时停止递增，因此您还有其他问题需要解决。

基本上你添加这个函数:

  $scope.rowIdAsNumber = function() {
    return parseInt(rowId.to);
  };

然后将您的 repeat 更改为 orderBy 该函数

  <tr data-node="treetable-1" id="basetr10" name="0" ng-repeat="rowData in componentList | orderBy:'rowIdAsNumber'">

我在这里 fork 了你的 plnkr:

https://plnkr.co/edit/Q4aQTU5CzVJ7EPUuEY4s?p=preview