在angularjs中对表格的行进行排序或重新排列(拖放)
Posted
技术标签:
【中文标题】在angularjs中对表格的行进行排序或重新排列(拖放)【英文标题】:Sort or Rearrange Rows of a table in angularjs (drag and drop) 【发布时间】:2013-09-08 00:15:52 【问题描述】:我想要重新排列表格中的行的功能(使用拖放对行进行排序)。 而且模型中行排列的索引也应该发生变化。
我该如何做类似的事情:http://jsfiddle.net/tzYbU/1162/ 使用 Angular 指令?
我将表格生成为:
<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>
【问题讨论】:
【参考方案1】:我做到了。请参阅下面的代码。
<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']);
【讨论】:
将 ng:model 放在 ui:sortable 上似乎是使模型中的索引与 DOM 排序顺序保持同步的关键。谢谢! 知道如何在没有 jQuery 的情况下使用纯 Angular.js 处理这个问题吗? 非常感谢您。太棒了,以至于没有人碰巧提到,可排序的不仅仅是 UL/LI 结构!刚刚花了很多时间试图修复我的 HTML 以使用 UL/LI 布局而不是表格,因为没有很好的用于列拖动的 jquery 插件替代品并最终报废了它。 @Sushrut 您应该在回答中注意,此答案依赖于 jQuery UI 的使用,而不是纯 Angular 或 javascript 解决方案。 如何获取选中和拖动的项目索引和值?场景是 user1, user2, user3, user4 将 user4 移动到 user2 我怎样才能改变这些值?【参考方案2】:还有另一个库:RubaXa/Sortable:https://github.com/RubaXa/Sortable
它适用于现代浏览器并且没有 jQuery 依赖。包括一个角度指令。我现在去看看。
您还可以获得良好的触控支持。
【讨论】:
这个好像不支持表格。 似乎对我有用。确保将指令放在 TBODY 元素上 > jsbin.com/gebirenoje/1/edit?html,js,output 看起来像一个没有 jQuery 依赖的可靠解决方案。看看他们的网站,那里也有很多例子:rubaxa.github.io/Sortable【参考方案3】:AngularJS 并不是真正为操作 DOM 元素而构建的,而是扩展页面的HTML。
请参阅此 question 和 this ***条目。
对于 DOM 操作,jQuery/mootools/etc 将非常适合您(提示:您的 jsFiddle 链接中的示例)。
您可能可以使用 AngularJS 来跟踪元素的顺序以更新模型。我不确定如何使用指令来执行此操作,但以下代码可能很有用
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()
并使用更改后的规则及其在模型中的新位置。
【讨论】:
是的,我同意,它必须由一些 DOM 操纵器(如 jQuery)来完成,但我希望它具有相同的 jQuery 函数以位于 angular 指令中。 不幸的是,我对 AngularJS 的了解非常,但是,this page 有一些将 AngularJS 与 jQuery datepicker 结合在一起的代码。也有一个工作示例。我敢肯定,只要稍加修改,就可以改用 jQuery Sortable 小部件。【参考方案4】:任何想要这样但不理解接受的答案的人。这是 AngularJS 的指令 UI.Sortable,它允许您通过拖放对数组/表格行进行排序。
要求
JQuery v3.1+ (for jQuery v1.x & v2.x use v0.14.x versions)
JQueryUI v1.12+
AngularJS v1.2+
用法
在你的应用程序中加载脚本文件:sortable.js:(你可以从here找到这个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>
开发笔记:
-
ng-model 是必需的,以便指令知道要更新哪个模型。
ui-sortable 元素应该只包含一个 ng-repeat
操纵模型的过滤器(如 filter、orderBy、limitTo 等)应在控制器中应用,而不是在 ng-repeat 中应用
第三点非常重要,因为花了将近一个小时才明白 为什么我的排序不起作用?这是因为 html 中的 orderBy 那是再次重置排序。
更多了解可以查看详情here。
【讨论】:
喜欢答案真棒【参考方案5】:如果我理解正确,您希望能够对行进行排序吗?如果是这样,请使用 UI-Sortable:GitHub 演示:codepen.io/thgreasi/pen/jlkhr
【讨论】:
UI-Sortable 是否适用于表格行?还是只列出项目? 我与表格行一起使用。它工作正常。你可以使用它。【参考方案6】:除了 RubaXa/Sortable 之外,还有一个可用的 angularjs 库,即 angular-ui-tree。除了拖放之外,我们还可以将元素排列成树状结构,还可以添加和删除元素(节点)
示例请查看此链接
http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example.
请在 github 上查看此内容
https://github.com/angular-ui-tree/angular-ui-tree.
【讨论】:
以上是关于在angularjs中对表格的行进行排序或重新排列(拖放)的主要内容,如果未能解决你的问题,请参考以下文章