嗨,我喜欢一些帮助,因为我在jQuery方面的技能不太好。我要实现的是更改图像的顺序。
我的数据库看起来像这样:
table: Gallery
img_id (pk)
image
caption
order
我还创建了这两个视图: index.php
<!-- will display the ajax result -->
<div id="orderResult"></div>
<hr/>
<input type="button" id="save" value="Save Order" class="btn btn-primary">
<script type="text/javascript">
$(function () {
$.post('<?php echo site_url('admin/galleries/order_ajax'); ?>', {}, function(data) {
$('#orderResult').html(data);
});
// save order
$('#save').click();
});
</script>
order_ajax.php
<?php if(count($images)>0): ?>
<div class="sortable-list">
<ol id="sortable">
<?php foreach($images as $image): ?>
<li <?php echo 'id="li_'.html_escape($image->img_id).'"'; ?>><?php echo img(array('src' => 'uploads/thumbs/'.html_escape($image->image)); ?></li>
<?php endforeach; ?>
</ol>
</div>
<?php endif; ?>
<script type="text/javascript">
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
我也创建了order_ajax控制器
public function order_ajax(){
// save order from pages
var_dump($_POST);
// if (isset($_POST['sortable'])) {
// $this->gallery->save_order($_POST['sortable']);
// }
// fetch all images (fetch all data)
$this->data['images'] = $this->gallery->get();
// load the view
$this->load->view('admin/gallery/order_ajax', $this->data, false);
}
因此,我基本上想做的是将图像拖动以更改其顺序,当我单击"保存"按钮时,将(新的)数据/订单传递给控制器并将其存储在数据库中。我该如何使这项工作?
好吧,解决方案比我想象的要简单。
在index.php视图上,我放了此
<script type="text/javascript">
$(function () {
$.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", {}, function(data) {
$('#orderResult').html(data);
});
// save order
$('#save').click(function(){
var new_order = $("#sortable").sortable( "toArray" );
$.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", { order_array: new_order }, function(data) {
$('#orderResult').html(data);
});
});
});
</script>
这是控制器函数
public function order_ajax(){
// save order from pages
if (isset($_POST['order_array'])) {
$this->gallery_model->save_order($_POST['order_array']);
}
// fetch all images
$this->data['images'] = $this->gallery->get();
// load the view
$this->load->view('admin/gallery/order_ajax', $this->data, false);
}