Yii Framework 开发教程(46) Zii组件-Sortable示例

太过爱你忘了你带给我的痛 2023-10-16 19:22 69阅读 0赞

CJuiSortable显示一个列表，列表中的列表项可以通过拖放重新调整顺序，它封装了 [JUI Sortable][]插件。

其基本用法如下：

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <?php
2.  Yii::app()->clientScript->registerCss('sortable', "
3.  \#sortable \{list-style-type: none; margin: 0; padding: 0; width: 60%;\}
4.  \#sortable li \{margin: 2px; padding: 4px;
5.  border: 1px solid \#e3e3e3; background: \#f7f7f7\}
6.  ", 'screen', CClientScript::POS\_HEAD);
7.  ?>
8.  
9.  <h2><?php echo Yii::t('ui','Sortable');?></h2>
10. 
11. <?php $this\->widget('zii.widgets.jui.CJuiSortable', array(
12. 'id'=>'sortable',
13. 'items'=>array(
14. 'id1'=>'Item 1',
15. 'id2'=>'Item 2',
16. 'id3'=>'Item 3',
17. ),
18. 'options'=>array(
19. 'cursor'=>'n-resize',
20. ),
21. ));
22. ?>

<?php
    Yii::app()->clientScript->registerCss('sortable', "
    #sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
    #sortable li {margin: 2px; padding: 4px;
    border: 1px solid #e3e3e3; background: #f7f7f7}
    ", 'screen', CClientScript::POS_HEAD);
    ?>
    
    <h2><?php echo Yii::t('ui','Sortable');?></h2>
    
    <?php $this->widget('zii.widgets.jui.CJuiSortable', array(
    	'id'=>'sortable',
    	'items'=>array(
    		'id1'=>'Item 1',
    		'id2'=>'Item 2',
    		'id3'=>'Item 3',
    	),
    	'options'=>array(
    		'cursor'=>'n-resize',
    	),
    ));
    ?>

[![201212129015][]][201212129015 1]本例[下载][Link 1]

[JUI Sortable]: http://jqueryui.com/demos/sortable/
[view plain]: http://blog.csdn.net/mapdigit/article/details/8479345#
[201212129015]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2012/12/201212129015.png
[201212129015 1]: http://www.imobilebbs.com/wordpress/archives/4155/attachment/201212129015
[Link 1]: http://www.imobilebbs.com/download/yii/JuiSortableDemo.zip