如何将一个表行移动到角度js中的另一个表?

时间:2015-10-07 00:43:40

标签: javascript angularjs css3

我想通过单击按钮将行移动到另一个表。 点击向上按钮将第二个表格行移动到第一个,然后点击向下移动第一个表格到第二个。

在HTML中:

Sub tgr()

    Dim appOL As Object
    Dim oGAL As Object
    Dim oContact As Object
    Dim oUser As Object
    Dim arrUsers(1 To 75000, 1 To 2) As String
    Dim UserIndex As Long
    Dim i As Long

    Set appOL = CreateObject("Outlook.Application")

    Set oGAL = appOL.GetNameSpace("MAPI").AddressLists("Global Address List").AddressEntries

    For i = 1 To oGAL.Count
        Set oContact = oGAL.Item(i)
        If oContact.AddressEntryUserType = 0 Then
            Set oUser = oContact.GetExchangeUser
            If Len(oUser.lastname) > 0 Then
                UserIndex = UserIndex + 1
                arrUsers(UserIndex, 1) = oUser.Name
                arrUsers(UserIndex, 2) = oUser.PrimarySMTPAddress
            End If
        End If
    Next i

    appOL.Quit

    If UserIndex > 0 Then
        Range("A2").Resize(UserIndex, UBound(arrUsers, 2)).Value = arrUsers
    End If

    Set appOL = Nothing
    Set oGAL = Nothing
    Set oContact = Nothing
    Set oUser = Nothing
    Erase arrUsers

End Sub
JS中的

: -

        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>Tag Name</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="tag in vm.tags | filter: searchBar"
                    ng-init="selectedIndex = $index">
                    <td><span ng-click="vm.editTags(selectedIndex);"
                        tooltip="Click to edit tag">{{tag.name}}</span></td>
                    <td><span ng-click="vm.editTags(selectedIndex);"
                        tooltip="Click to edit tag">{{tag.status}}</span></td>
                    <td><span class="glyphicon glyphicon-remove change-color"
                        ng-click="vm.removeTag(selectedIndex)" tooltip="Delete tag">
                    </span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="top-bottom-padding col-sm-1">
        <button type="button" class="btn change-color bg-white">
            <span class="glyphicon glyphicon-arrow-down glyphicon-lg"></span>
        </button>
    </div>
    <br />
    <div class="top-bottom-padding col-sm-1">
        <button type="button" class="btn change-color bg-white">
            <span class="glyphicon glyphicon-arrow-up glyphicon-lg"></span>
        </button>
    </div>

        <div class="clear pull-right col-sm-1">
          <br/>
            <button ng-disabled="vm.selectedOrder.status == 'Activated'"
                class="pull-left btn btn-primary margin-Left"
                ng-click="vm.editStatus();">Activated</button>
            <button ng-disabled="vm.selectedOrder.status == 'Paused'"
                class="pull-left btn btn-primary margin-Left"
                ng-click="vm.editStatus();">Paused</button>
        </div>
    <div class="clear top-bottom-padding col-sm-1">
        <table class="table table-color table-bordered table-hover">
            <thead>
                <tr>
                    <th>Rotation Order</th>
                    <th>Tag Name</th>
                    <th>Status</th>
                </tr>
            </thead>
            <!-- ng-sortable - External component used for re-arranging rows of table -->
            <tbody ng-sortable="{animation:150}">
                <tr ng-repeat="orders in  vm.rotationTable"
                    ng-class="{selected : orders == vm.selectedOrder}"
                    ng-click="vm.setSelected(orders)">
                    <td>{{orders.rotationOrder}}</td>
                    <td>{{orders.tagName}}</td>
                    <td>{{orders.status}}</td>
                </tr>
            </tbody>
        </table>
</div>

你可以在这里看到mu代码:http://plnkr.co/edit/bsoTjFpJrEu3nG6cnjci?p=preview

2 个答案:

答案 0 :(得分:0)

将项目从vm.tags移动到顶部的vm.rotationTable

var selectedIndex = 0;// or any valid index from vm.tags
vm.rotationTable.splice(0, 0, vm.tags.splice(selectedIndex, 1)[0]);

将项目从vm.rotationTable移动到底部的vm.tags

var selectedIndex = 0;// or any valid index from vm.rotationTable
vm.tags.splice(vm.tags.length - 1, 0, vm.rotationTable.splice(selectedIndex, 1)[0]);

答案 1 :(得分:0)

in html:-
<button type="button" class="btn change-color bg-white" ng-click="vm.moveRight();">
  <span class="glyphicon glyphicon-arrow-right  glyphicon-lg"></span>
 </button>

<button type="button" class="btn change-color bg-white" ng-click="vm.moveLeft();">
    <span class="glyphicon glyphicon-arrow-left  glyphicon-lg"></span>
</button>

在js中: -

vm.moveRight = function () {
             var selectedIndex = vm.selectedTag;
              vm.rotationTable.push(vm.selectedTag);
              vm.tags.splice(index,1);
             };

      vm.moveLeft = function () {
          var selectedIndex = vm.selectedOrder;// or any valid index from vm.tags
          vm.tags.push(vm.selectedOrder);//({ name: vm.tagsData.name, status: vm.tagsData.status });
          vm.rotationTable.splice(index, 1);
      };