制作了一个上移下移的功能,留着以后万一用得上

浏览:446 发布日期:2018/04/04 分类:技术分享 关键字: html列表上移下移
仅供参考(有很多可以优化的地方,我节后再改):
以下是列表html代码:
{notempty name='info'}
{volist name='info' id='vo'}
<tr class="text-c" data_id="{$vo.id}">
<td><input type="checkbox" value="1" name="" class="id{$vo.id}"></td>
<td>{$vo.id}</td>
<td>{$vo.type}</td>
<td>{$vo.sort}</td>
<td class="td-manage">
<a title="新增|编辑" href="javascript:;" onclick="layer_show('查看或编辑','{:url(\'edit\')}?id={$vo.id}','','500','1000')" class="ml-5" style="text-decoration:none">
<input class="btn radius btn-success" type="button" value="查看详情">
</a>
<a title="删除" href="javascript:;" onclick="del('{$vo.id}')" class="ml-5" style="text-decoration:none">
<input class="btn radius btn-warning" type="button" value="删除">
</a>
{if $key == 0 }
<a title="下移" href="javascript:;" onclick="sortMove(this, {$vo.id}, false)" class="ml-5" style="text-decoration:none">
<input class="btn radius " type="button" value="下移">
</a>
{elseif $key==count($info)-1}
<a title="上移" href="javascript:;" onclick="sortMove(this, {$vo.id},true)" class="ml-5" style="text-decoration:none">
<input class="btn radius " type="button" value="上移">
</a>
{else /}
<a title="上移" href="javascript:;" onclick="sortMove(this, {$vo.id},true)" class="ml-5" style="text-decoration:none">
<input class="btn radius " type="button" value="上移">
</a>
<a title="下移" href="javascript:;" onclick="sortMove(this, {$vo.id},false)" class="ml-5" style="text-decoration:none">
<input class="btn radius " type="button" value="下移">
</a>
{/if}
</td>
</tr>
{/volist}
{/notempty}
这里的关键地方
1、是在tr上加data_id="{$vo.id}";
2、加上按钮;
{if $key == 0 }
<a title="下移" href="javascript:;" onclick="sortMove(this, {$vo.id}, false)" class="ml-5" style="text-decoration:none">
<input class="btn radius " type="button" value="下移">
</a>
{elseif $key==count($info)-1}
<a title="上移" href="javascript:;" onclick="sortMove(this, {$vo.id},true)" class="ml-5" style="text-decoration:none">
<input class="btn radius " type="button" value="上移">
</a>
{else /}
<a title="上移" href="javascript:;" onclick="sortMove(this, {$vo.id},true)" class="ml-5" style="text-decoration:none">
<input class="btn radius " type="button" value="上移">
</a>
<a title="下移" href="javascript:;" onclick="sortMove(this, {$vo.id},false)" class="ml-5" style="text-decoration:none">
<input class="btn radius " type="button" value="下移">
</a>
{/if}

以下是js代码:
/**
* 排序
* @param id
*/
function sortMove(obj, id, method){
if(method == true){
//上移
var data_id = $(obj).parent().parent().prev().after().attr('data_id');//这里可能跟你们的不一样,如果不行就改一下
}else {
var data_id = $(obj).parent().parent().next().after().attr('data_id');
}
if(!id || !data_id || typeof (data_id) == 'undefined')return;
$.post('{:url("sortMove")}',{id:id, data_id:data_id}, function (res) {
layer.msg(res.msg, function () {
location.reload();
});
},'json');
}

以下是php代码是放在控制器里面的:
function sortMove(){
$id = input('id/d');
$data_id = input('data_id');
if(!$id || !$data_id){
return json(set_res('无更新', 1));
}
$info = $this->m->get(['id'=>$id]);
$data = $this->m->where(['id'=>$data_id])->find();

if($info && $data){
$this->m->saveAll([
['id'=>$id,'sort'=>$data['sort']],
['id'=>$data_id,'sort'=>$info['sort']],
]);
return json(set_res('更新完成', 0));
}
return json(set_res('无更新哦', 1));
}

//其实也可以使用表格插件,个人比较喜欢手写的,经过多次使用之后会越来越好用的。
最佳答案
评论( 相关
后面还有条评论,点击查看>>