2013-07-17 61 views
1

我是JavaScript和jQuery的新手。我正在嘗試通過拖放來實現表格行排序的小提琴功能linked here如何在Yii中實現表格行拖放操作?

我用來複制 - 粘貼整個代碼,使其在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> 
+0

你有類似的代碼列太排序? – StackUnder

回答

1

你最有可能需要註冊jQuery和jquery.ui在您的視圖:

<?php 
Yii::app()->clientScript->registerCoreScript('jquery'); 
Yii::app()->clientScript->registerCoreScript('jquery.ui'); 
?>