如何在Yii中实现表行拖放排序
How to implement table row drag and drop for sorting in Yii?
我是JavaScript和jQuery的新手。我正在尝试实现这里链接的fiddle功能,用于通过拖放对表行进行排序。
我曾经复制粘贴整个代码以使其在NetBeans中工作,但现在不工作了。仅显示表格。无法拖放。我需要添加任何jQuery文件吗。我正在使用Yii项目。我在我的PHP文件中复制了html和JavaScript代码。还有其他要求吗?
<h1>Sorting A Table With jQuery UI</h1>
<a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'>Make table rows sortable with jQuery UI</a>
<table id="sort" class="grid" title="Kurt Vonnegut novels">
<thead>
<tr><th class="index">No.</th><th>Year</th><th>Title</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class="index">1</td><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
<tr><td class="index">2</td><td>1952</td><td>Player Piano</td><td>B</td></tr>
<tr><td class="index">3</td><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
<tr><td class="index">4</td><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
<tr><td class="index">5</td><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
</tbody>
</table>
<script>
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
</script>
您很可能需要在视图中注册jquery和jquery.ui:
<?php
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
?>
相关文章:
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- Rubaxa可与聚合物进行排序/拖放不起作用,具体取决于显示器:
- 如何在Javascript中创建排序、拖放多级列表
- 在jQuery UI中获取ul和li值,拖放即可排序
- jQuery UI-拖放排序和还原
- 拖放以在 Javascript 中对矩形重新排序
- 表格拖放重新排序和列排序
- 使用 ajax 拖放功能对列字段重新排序?PHP/jQuery.
- jq网格行排序通过拖放
- HTML5拖放教程 - 可排序列表
- 使用JQuery UI双向排序/未排序拖放
- JQuery 可排序、可拖动和可拖放不协同工作
- 用angularjs对表格的行进行排序或重新排列(拖放)
- JQueryUI:创建两个拖放列表的最佳方式,其中一个是可排序的,另一个在拖放时重新排序
- 如果拖放过快,则不会调用可排序的拖放处理程序
- 在可排序的jquery ui中自定义拖放
- Onsen UI+可排序列表(拖放)
- 如何在Yii中实现表行拖放排序
- 在jQuery上更新Div隐藏字段可排序拖放更新
- Javascript复杂的拖放排序