PHP 实现上移下移置顶功能

本文介绍了如何在PHP Laravel框架下实现列表项的上移、下移以及置顶操作。通过修改数据库中的排序字段,并在视图、JS代码、控制器和模型层进行相应处理,完成动态调整列表显示顺序的功能。
摘要由CSDN通过智能技术生成

1.数据库:



id主键 int(11)    

sort int(11)     1 排序

top int(1)     1 是否置顶 1为不置顶,2为置顶

2.视图:

sort int(11)     1 排序

<div class="layui-form news_list">
            <table class="layui-table" lay-filter="test" >
                <colgroup>
                    <col width="">
                    <col width="">
                    <col width="">
                    <col width="350">
                </colgroup>
                <thead>
                <tr>
                    <th>名称</th>
                    <th>图片</th>
                    <th>启用状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="listbox"></tbody>
            </table>
            </div>
        </div>
    </div>
@stop
@section("javascript")
    <script src="{
 {
 asseturl("js/beginbanner/index.js")}}"></script>

3.js代码:

sort int(11)     1 排序

top:function () {
    var id = $(this).data("id");
    var state = $(this).data("state");
    var auditMsg = "";
    if(state==1){
        auditMsg = "您确认取消置顶吗?";
    }else{
        auditMsg = "您确认置顶吗?";
    }
    layer.confirm(auditMsg, {
        btn: ['确认', '取消'] //按钮
        , title: '<i class="layui-icon"></i> 确认提示'
        , icon: 0
    }, function () {
        $.ajax({
            url: adminurl + "/beginbanner/topstatus",
            data: {
                id: id,
                status:state,
                _token: _token,
            },
            type: "PUT",
            dataType: "json",
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端实现下移底需要使用 JavaScript 来操作 DOM 元素。 具体实现可以参考以下代码: ```html <ul id="list"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul> <button onclick="moveUp()">上</button> <button onclick="moveDown()">下移</button> <button onclick="moveTop()"></button> <button onclick="moveBottom()">底</button> ``` ```javascript // 获取列表元素和当前选中的项 var list = document.getElementById("list"); var selectedItem; // 上操作 function moveUp() { if (selectedItem) { var prevItem = selectedItem.previousElementSibling; if (prevItem) { list.insertBefore(selectedItem, prevItem); } } } // 下移操作 function moveDown() { if (selectedItem) { var nextItem = selectedItem.nextElementSibling; if (nextItem) { list.insertBefore(nextItem, selectedItem); } } } // 操作 function moveTop() { if (selectedItem) { list.insertBefore(selectedItem, list.firstChild); } } // 底操作 function moveBottom() { if (selectedItem) { list.appendChild(selectedItem); } } // 监听列表项点击事件,记录当前选中的项 list.addEventListener("click", function(e) { selectedItem = e.target; }); ``` 这段代码实现了一个简单的列表操作,通过点击按钮可以实现下移底等操作。需要注意的是,这里的操作只是在前端进行了 DOM 元素的动,如果需要将这些操作的结果保存到后端,还需要进行相应的 AJAX 请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值