Question

我正在使用angularjs并创建了一个从范围对象填充的表。

如果我能以某种方式设法为此添加“拖放”功能，那将是非常酷的，我的意思是改变列的顺序，而不是行的顺序。

我该怎么做？

http://plnkr.co/edit/svSbXBmr2oP0PMDDpHtv?p=preview

<!doctype html>
<html ng-app="plunker">

<head>
<script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div ng:controller="MainCtrl">
<table border="1">
  <thead style="font-weight: bold;">
    <tr>
      <th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td ng-repeat="column in columnsTest" ng-if="column.checked">
        {{ getCellValue(row, column) }}
      </td>
    </tr>
  </tbody>
</table>

<br>
<br>
<br>
<p ng-repeat="c in columnsTest">Column {{$index}}: {{c}}</p>
</div>

<script>
console.clear();

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter, $parse) {

  $scope.getCellValue = function(row, column) {

    var getter = $parse(column.value);
    return getter(row);

    // Alternatively:
    // return $parse(column.value)(row);
  };

  $scope.columnsTest = [{
    id: 'Value1',
    checked: true,
    value: 'Value1'
  }, {
    id: 'Value2',
    checked: true,
    value: 'Value2'
  }, {
    id: 'Value3',
    checked: true,
    value: 'Value3'
  }];

  $scope.rows = [{
    id: 1,
    "Value1": 911,
    "Value2": 20,
    "Value3": 20
  }, {
    id: 2,
    "Value1": 200,
    "Value2": 20,
    "Value3": 20
  }];
});
</script>
</body>

</html>

拖放表列

0 个答案: