今天运用所学的知识,实现了对列表进行刷新修改排序值并且自动重新排序,其实就是运用一个input标签,首先先遍历出value,之后给这个标签添加一个修改的js事件,并且获得该input标签对应的ID,并获取修改的value,采用Ajax的方式传输到后台进行修改,按照后台传过来的状态码进行局部更新,其实就是刷新局部,达到无刷新修改的效果,好了 话不多说,上代码:
Route::post('pic/sort', 'PicController@sort'); //图片无刷新排序控制器
<thead>
<tr>
<th></th>
<th>ID</th>
<th>标题</th>
<th>排序</th>
<th>缩略图</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<input type="hidden" value="{{ $i=1 }}">
@foreach($data as $value)
<tr>
<td>
<div class="layui-form">
<input type="checkbox" value="{{ $value->id }}" lay-skin="primary" lay-filter="RandomCheckbox">
</div>
</td>
{{--按序号输出数值--}}
<td>{{ $i++ }}</td>
<td>{{ $value->title }}</td>
<td>
<input type="text" onchange="change(this, {{ $value->id }});" class="layui-input" value="{{ $value->sort }}" name="sort">
</td>
<td>
<img class="admin-pic-index-img" src="{{ url($value->img) }}" alt="{{ $value->title }}">
</td>
<td>
<a class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius" href="/admin/pic/edit/{{ $value->id }}">
<i class="layui-icon layui-icon-edit"></i>
</a>
<button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius" href="javascript:;" onclick="del(this, {{ $value->id }});">
<i class="layui-icon layui-icon-delete"></i>
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
其中就是添加了一个input标签,获取数据库中对应排序字段,之后进行无刷先排序。
/**
* 无刷新修改排序值
*/
function change(obj, id){
//获取id
var id = id;
//获取用户改变的值
var val = $(obj).val();
//判断获取值是否为证书并且获取值是否操作
if(!isNaN(val)){
$.post(
/*请求地址*/
'/admin/pic/sort',
/*请求数值 方式 及 CSRF认证*/
{'id':id, 'val':val, '_method':'post', '_token':'{{ csrf_token() }}'},
/*请求回调方法*/
function(res){
if(res.code > 0 ){
layer.alert(res.msg,{icon:2})
}else{
layer.msg(res.msg);
//页面自动刷新
setTimeout(function () {
window.location.reload();
},1000);
}
},
'json'
);
}else{
layer.msg("格式有误,请重新输入数值");
setTimeout(function () {
window.location.reload();
},1000);
}
}
/**
* 图片加载首页
* @return view
*/
public function index(){
$data = DB::select("select * from pic where status=0 order by sort desc");
//加载用户管理界面
return view("admin.pic.index")->with('data',$data);
}
/**
* 无刷新排序操作
* @param Request $request
*/
public function sort(Request $request){
$id = $request->input('id');
$val = $request->input('val');
$db = DB::update("update pic set sort=$val where id=$id");
if($db){
exit(json_encode(array('code'=>0, 'msg'=>'排序修改成功')));
}else{
exit(json_encode(array('code'=>1, 'msg'=>'排序修改异常')));
}
}
好了,最终就是实现了对页面的无刷新修改排序功能。
本文链接:https://cloud.tencent.com/developer/article/1558260
本文采用CC BY-NC-SA 3.0 Unported协议进行许可,转载请保留此文章链接