发布于 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>
©2020 edoou.com   京ICP备16001874号-3