테이블의 행을 angularjs로 정렬 또는 재배치(드래그 앤 드롭)

테이블의 행을 angularjs로 정렬 또는 재배치(드래그 앤 드롭)

테이블 내의 행을 재배치하는 기능(드래그 앤 드롭을 사용하여 행을 정렬)을 가지고 싶다고 생각하고 있었습니다.그리고 열 배열의 지표도 모델에서 변화해야 합니다.

Angular Directive를 사용하여 http://jsfiddle.net/tzYbU/1162/과 유사한 작업을 수행하려면 어떻게 해야 합니까?

다음과 같이 테이블을 생성합니다.

<table id="sort" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th class="header-color-green"></th>
      <th ng-repeat="titles in Rules.Titles">{{titles.title}}</th>
    </tr>
  </thead>
  <tbody ng-repeat="rule in Rules.data">
    <tr>
      <td class="center"><span>{{rule.ruleSeq}}</span></td>
      <td ng-repeat="data in rule.ruleData">{{statusArr[data.value]}}</td>
    </tr>
  </tbody>
</table>

내가 했어.아래 코드를 참조하십시오.

HTML

<div ng:controller="controller">
    <table style="width:auto;" class="table table-bordered">
        <thead>
            <tr>
                <th>Index</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody ui:sortable ng:model="list">
            <tr ng:repeat="item in list" class="item" style="cursor: move;">
                <td>{{$index}}</td>
                <td>{{item}}</td>
            </tr>
        </tbody>{{list}}
        <hr>
</div>

지시(JS)

var myapp = angular.module('myapp', ['ui']);

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "thre", "four", "five", "six"];
});

angular.bootstrap(document, ['myapp']);

다른 라이브러리: RubaXa/Sortable: https://github.com/RubaXa/Sortable

최신 브라우저용이며 jQuery 의존관계가 없습니다.각도 지시어가 포함되어 있습니다.지금 확인해 보겠습니다.

터치 지원도 충실합니다.

AngularJS는 실제로 DOM 요소를 조작하기 위해 만들어진 것이 아니라 페이지의 HTML을 확장하기 위해 만들어졌습니다.

이 질문과 Wikipedia 항목을 참조하십시오.

DOM 조작의 경우, jQuery/mootools/etc는 매우 적합합니다(hint: jsFiddle 링크의 예).

아마도 Angular를 사용할 수 있습니다.JS: 모형을 업데이트하기 위해 요소의 순서를 추적합니다.지시어를 사용하여 이 작업을 수행하는 방법은 잘 모르겠지만 다음 코드가 유용할 수 있습니다.

var MyController = function($scope, $http) {
    $scope.rules = [...];
    ...

}

var updateRules = function(rule, position) {
    //We need the scope
    var scope = angular.element($(/*controller_element*/)).scope(); //controller_element would be the element with ng-controller='MyController'

    //Update scope.rules
}

목록을는 그냥 만 하면 .updateRules()변경된 규칙과 모델 내 새 위치에 대한 정보를 제공합니다.

이런 걸 원하지만 받아들여진 답을 이해하지 못하는 사람.다음은 지시 UI입니다.각도 정렬 가능드래그 앤 드롭으로 배열/테이블 행을 정렬할 수 있는 JS.

요구 사항들

JQuery v3.1+ (for jQuery v1.x & v2.x use v0.14.x versions)
JQueryUI v1.12+
AngularJS v1.2+

사용.

스크립트 파일:sortable.js 를 애플리케이션에 로드합니다(이 sortable.js 는 여기서 찾을 수 있습니다).

<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>

이 정렬 가능한 파일 앞에 JQuery, AngularJs 및 JQueryUI js 파일을 순서대로 포함했는지 확인합니다. 정렬 가능한 모듈을 응용 프로그램 모듈에 종속적으로 추가합니다.

 var myAppModule = angular.module('MyApp', ['ui.sortable'])

지시문을 양식 요소에 적용합니다.

<ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

메모 작성 중:

1. ng-model은 디렉티브에서 갱신할 모델을 인식하기 위해 필요합니다.
2. UI 설정 가능 요소는 ng-module을 하나만 포함해야 합니다.
3. 모델을 조작하는 필터(필터, orderBy, limitTo 등)는 ng-repeat 대신 컨트롤러에 적용해야 합니다.

세 번째 포인트는 매우 중요합니까?왜 내 정렬이 작동하지 않았는지 이해하는 데 거의 1시간이 걸렸습니까?html에서의 orderBy 때문에 다시 정렬을 리셋하고 있었습니다.

자세한 내용은 여기를 참조하십시오.

제 말이 맞다면 행을 정렬할 수 있을까요?만약 그렇다면 UI-Sortable: GitHub 데모: codepen.io/thgreasi/pen/jlkhr 를 사용합니다.

RubaXa/Sortable과 함께 anguljs 라이브러리를 사용할 수 있는 angular-ui-tree가 하나 더 있습니다.드래그 앤 드롭과 함께 트리 구조의 요소를 정렬할 수 있으며 요소(노드)를 추가 및 삭제할 수 있습니다.

예에 대해서는, 이 링크를 참조해 주세요.

http://angular-ui-tree.github.io/angular-ui-tree/#/basic-displays.

github에 대해서는, 이것을 봐 주세요.

https://github.com/angular-ui-tree/angular-ui-tree 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/18614695/sort-or-rearrange-rows-of-a-table-in-angularjs-drag-and-drop