发布于 5年前
jQuery 拖动排序和开关事件
<!-- 右侧内容区域 -->
<div class="col-md-9">
@include('admin/comm/message')
<!-- 自定义内容区域 -->
<div class="panel panel-default">
<div class="panel-heading">新闻列表</div>
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>ID</th>
<th>标题</th>
<th>类别</th>
<th>显示状态</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody id="wrap">
@foreach($news as$key => $item)
<tr>
<input class="sort_input" type="hidden" id="{{ $item->id }}" />
<th scope="row">{{ $item->id }}</th>
<td>{{ $item->title }}</td>
<td>{{ $item->category }}</td>
<td>
<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" id="{{$item->id}}" onchange="status(this)" name="my-checkbox" @if($item->status==1) value="on" checked @elseif($item->status==0) value="off" @endif >
</div>
</td>
<td>
<a href="{{ url('detail',['id'=>$item->id]) }}">详情</a>
<a href="{{ url('updateNews',['id'=>$item->id]) }}">修改</a>
<a href="{{ url('deleteNews',['id'=>$item->id])}}"
onclick="if (confirm('确定要删除吗?')==false)return false;"
>删除</a>
</td>
</tr>
@endforeach
</tbody>
<thead>
<tr>
<th><button onclick="sort_list()" class="button-raised button-primary button-pill"><p style="color: white">排序</p></button></th>
{{--拖动排序js--}}
<script>
function sort_list() {
var num=0;
$(".sort_input").each(function () {
var sort=num;
var id =$(this).attr('id');
$.ajax({
type:'get',
url:'{{ url('ddNewsSort') }}',
data:{'id':id,'sort':sort},
dataType:'JSON',
success:function (data) {
if (data == 1){
$.session.set('success','排序成功!');
}else {
$.session.set('success','未知错误!');
}
}
});
num++;
})
}
</script>
<td style="color: red;"><p style="padding-top: 12px">可以通过拖动来排序,最后请点排序按钮确定!</p></td>
</tr>
</thead>
</table>
</div>
</div>
<script>
// 排序
function sorts(e) {
$.ajax({
type:'get',
url:'{{ url('changeNewsStatus') }}',
dataType:"JSON",
data:{'id':id, 'status':status },
success:function (data) {
if (data == 0){
alert('发生未知错误!');
}
}
})
}
$('#wrap').DDSort({
target:'tr'
});
// 更改显示状态
function status(e) {
var id=$(e).attr('id');
if($(e).val()=='on'){
$(e).val('off')
var status = '0';
}else {
$(e).val('on')
var status = '1';
}
$.ajax({
type:'get',
url:'{{ url('changeNewsStatus') }}',
dataType:"JSON",
data:{'id':id, 'status':status },
success:function (data) {
if (data == 0){
alert('发生未知错误!');
}
}
})
}
</script>