精华内容
下载资源
问答
  • 我们用手机进行点餐,作为商家端在管理商品列表中,要对商品数据进行置顶上移下移的操作。 前端 小程序前端代码脚本,如下: 置顶 // 临时如下处理,原本:const {gId, gTypeId = 0, gStatus = 2, gType, gSort}...

    我们用手机进行点餐,作为商家端在管理商品列表中,要对商品数据进行置顶、上移、下移的操作。

    前端

    小程序前端代码脚本,如下:

    置顶

    // 临时如下处理,原本:const {gId, gTypeId = 0, gStatus = 2, gType, gSort} = e.currentTarget.dataset
    const { gId, gTypeId = 15, gStatus = 2, gType = 21, gSort = 5 } = []; 
    if (gSort == 1) {
      console.log("商品已处于置顶位置啦");
    }
    

    上移

    // 临时如下处理,原本:const {gId, gTypeId = 0, gStatus = 2, gType, gSort} = e.currentTarget.dataset
    const { gId, gTypeId = 15, gStatus = 2, gType = 21, gSort = 5 } = []; 
    if (gSort == 1) {
      console.log("商品已在最上面啦");
    }
    

    下移

    点击下移,将商品下移一个位置,如果已经处于分类最后的位置,则tips提示“商品已在最底下啦”

    // 临时如下处理,原本:const {gId, gTypeId = 0, gStatus = 2, gType, gSort} = e.currentTarget.dataset
    const { gId, gTypeId = 15, gStatus = 2, gType = 21, gSort = 5 } = []; 
    // 1. 获取商品列表数据, 说明:typeId-分类ID,status-状态(0-已下架,2-已上架),type-类型(11-店内,21-外卖)
    const goodsData = [
      { gId: 1001, gTitle: "苹果", gTypeId: 15, gStatus: 2, gType: 21, gSort: 4 },
      { gId: 1002, gTitle: "香蕉", gTypeId: 15, gStatus: 2, gType: 21, gSort: 3 },
      { gId: 1003, gTitle: "油奈", gTypeId: 15, gStatus: 2, gType: 21, gSort: 5 },
      { gId: 1004, gTitle: "白菜", gTypeId: 16, gStatus: 2, gType: 21, gSort: 1 },
      { gId: 1005, gTitle: "长豆", gTypeId: 16, gStatus: 2, gType: 21, gSort: 2 },
      { gId: 1006, gTitle: "花菜", gTypeId: 16, gStatus: 2, gType: 21, gSort: 4 },
    ];
    console.log("1. 获取商品列表数据", goodsData);
    // 2. 获取到指定类型的商品数据的序号
    const goodsMap = goodsData.map((goods) => {
      if (goods.gTypeId == gTypeId && goods.gStatus == gStatus && goods.gType == gType) {
        return goods.gSort;
      } else {
        return 0;
      }
    });
    console.log("2. 获取指定商品数据的序号", goodsMap);
    // 3. 获取最大值
    const currentMaxSort = Math.max(...goodsMap);
    console.log("3. 获取最大值", currentMaxSort);
    
    if (gSort == currentMaxSort) {
      console.log("商品已在最底下啦");
    }
    // 4. 下移接口操作API
    

    后端

    置顶

    获取置顶数据,将表中字段小于对象顺序的所有数据的gSort+1,再将对象的gSort设置为1,查询的时候安装gSort增序排列。

    select * from goods ORDER BY gSort asc;
    -- 置顶id=4,seq=4的数据
    update goods set gSort = gSort + 1 where gSort < 6;
    update goods set gSort = 1 where gId = 1006;
    select * from goods ORDER BY gSort asc;
    

    置顶前查询:
    在这里插入图片描述
    置顶后查询:
    在这里插入图片描述

    上移

    获取当前本条数据和上一条数据对象,将两条数据的序号进行交换

    select * from goods ORDER BY gSort asc;
    -- 1001	葡萄	15	2	21	1
    select * from goods where gId=1001;
    -- 1002	西瓜	16	2	21	2
    SELECT * from goods WHERE ( gSort < 3  OR gSort=(SELECT MIN(gSort) FROM goods ) )  ORDER BY gSort DESC limit 1;
    
    update goods set gSort=2 where gId=1001;
    update goods set gSort=1 where gId=1002;
    
    select * from goods ORDER BY gSort asc;
    

    上移前查询
    在这里插入图片描述

    上移后查询
    在这里插入图片描述

    下移

    获取本条数据和下一条数据内容,将两条数据的sort进行交换

    select * from goods ORDER BY gSort asc;
    -- 1001	葡萄	15	2	21	2
    select * from goods where gId=1001;
    -- 1002	西瓜	16	2	21	1
    SELECT * from goods WHERE ( gSort < 2  OR gSort=(SELECT MIN(gSort) FROM goods ) )  ORDER BY gSort DESC limit 1;
    
    update goods set gSort=1 where gId=1001;
    
    update goods set gSort=2 where gId=1002;
    
    select * from goods ORDER BY gSort asc;
    

    下移前查询:

    在这里插入图片描述

    下以后查询:

    在这里插入图片描述

    附件

    • 数据库表设计样例
    SET NAMES utf8mb4;
    SET FOREIGN_KEY_CHECKS = 0;
    
    -- ----------------------------
    -- Table structure for goods
    -- ----------------------------
    DROP TABLE IF EXISTS `goods`;
    CREATE TABLE `goods`  (
      `gId` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '商品编号',
      `gTitle` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '商品标题',
      `gTypeId` bigint(20) NULL DEFAULT NULL COMMENT '商品分类ID',
      `gStatus` tinyint(2) NULL DEFAULT NULL COMMENT '商品状态 0 已下架  1 审核中 2 已上架',
      `gType` tinyint(1) NULL DEFAULT NULL COMMENT '商品分类类型 0 店外 1 店内',
      `gSort` int(11) NOT NULL,
      PRIMARY KEY (`gId`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 1007 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
    
    -- ----------------------------
    -- Records of goods
    -- ----------------------------
    INSERT INTO `goods` VALUES (1001, '葡萄', 15, 2, 21, 1);
    INSERT INTO `goods` VALUES (1002, '西瓜', 16, 2, 21, 2);
    INSERT INTO `goods` VALUES (1003, '香蕉', 15, 2, 21, 3);
    INSERT INTO `goods` VALUES (1004, '苹果', 15, 2, 21, 4);
    INSERT INTO `goods` VALUES (1005, '油奈', 15, 2, 21, 5);
    INSERT INTO `goods` VALUES (1006, '橘子', 16, 2, 21, 6);
    
    SET FOREIGN_KEY_CHECKS = 1;
    

    参考资料
    https://www.cnblogs.com/wulisz/p/9714726.html

    个人笔记,再次做个笔记。交流学习,如有更好,欢迎留言。

    展开全文
  • 实现思路: 在数据库中对要进行排序那张表新增一个sort字段用于排序。...(一)java后台实现置顶 上下 <el-button size="small" plain type="info" @click="setTop(scope.row)" v-if="scope.row.sor

    实现思路:

    1. 在数据库中对要进行排序那张表新增一个sort字段用于排序。
    2. 列表向上移动的时候通过列表下标index查询出当前数据的上一条数据的sort值,两者交换sort值,同理向下移动的时候,查询出下一条数据的sort值,两者交换。
      springboot+mybatis代码实现:


    在这里插入图片描述

    (一)java后台实现置顶 上下移

    <el-button size="small"  plain  type="info" @click="setTop(scope.row)" v-if="scope.row.sort!=1">置顶</el-button>
    <el-button size="small"  plain  type="info" @click="seton(scope.row.id,scope.$index)" v-if="scope.$index!=0">上移</el-button>
    <el-button size="small"  plain  type="info" @click="setunder(scope.row.id,scope.$index)" v-if="scope.$index!=bannertable.length-1">下移</el-button>
    
    
    //置顶
                setTop:function (row) {
                    if (row.state==0){
                        this.$http.post("/banner/top/"+row.id).then((res)=>{
                            if(res.data.code == 20000){
                                this.$message.success(res.data.message)
                                this.bannersearch();
                            }else{
                                this.$message.error(res.data.message);
                            }
                        })
                    }else {
                        this.$message.error("该状态不能置顶,请修改其状态")
                    }
                },
                //上移
                seton(id,index){
                    let banner = this.bannertable[index-1]
                    this.$http.post("/banner/setPosition/"+id,banner).then((res)=>{
                        if(res.data.code == 20000){
                            this.$message.success(res.data.message)
                            this.bannersearch();
                        }else{
                            this.$message.error(res.data.message);
                        }
                    })
                },
                //下移
                setunder(id,index){
                    let banner = this.bannertable[index+1]
                    this.$http.post("/banner/setPosition/"+id,banner).then((res)=>{
                        if(res.data.code == 20000){
                            this.$message.success(res.data.message)
                            this.bannersearch();
                        }else{
                            this.$message.error(res.data.message);
                        }
                    })
                },
    
    @PostMapping("/setPosition/{id}")
        public Result setPosition(@PathVariable("id")String id,@RequestBody HsBanner hsBanner){
            int i = bannerService.setPosition(id,hsBanner);
            if(i>0){
                return new Result(true, StatusCode.OK,"移动成功");
            }else{
                return new Result(false, StatusCode.ERROR,"移动失败");
            }
        }
    
    
    @Transactional
        public int setPosition(String id, HsBanner hsBanner) {
            HsBanner banner = bannerMapper.selectByPrimaryKey(id);
            String sort = banner.getSort();
            banner.setSort(hsBanner.getSort());
            hsBanner.setSort(sort);
            int j=0;
            j = bannerMapper.updateByPrimaryKeySelective(hsBanner);
            if(j>0){
                j = bannerMapper.updateByPrimaryKeySelective(banner);
            }
            return j;
        }
    

    (二)vue前台实现上下移

    <el-button size="small"  plain type='info' @click.stop="sortUp(scope.$index)">向上↑ </el-button>
    <el-button size="small"  plain type='info'  @click.stop="sortDown(scope.$index)">向下↓</el-button>
    
    // 上移按钮
                sortUp (index) {
                    if (index === 0) {
                        this.$message({
                            message: '已经是列表中第一个素材!',
                            type: 'warning'
                        })
                    } else {
                        let temp = this.bannertable[index - 1]
                        Vue.set(this.bannertable, index - 1, this.bannertable[index])
                        Vue.set(this.bannertable, index, temp)
                    }
                },
                // 下移按钮
                sortDown (index) {
                    if (index === (this.bannertable.length - 1)) {
                        this.$message({
                            message: '已经是列表中最后一个素材!',
                            type: 'warning'
                        })
                    } else {
                        let i = this.bannertable[index + 1]
                        Vue.set(this.bannertable, index + 1, this.bannertable[index])
                        Vue.set(this.bannertable, index, i)
                    }
                },
    
    展开全文
  • jQuery实现table上移下移置顶 jQuery实现table上移下移置顶
  • 主要介绍了jQuery表格行上移下移置顶的实现方法,需要的朋友可以参考下
  • 主要介绍了jQuery实现表格行上移下移置顶的方法,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下
  • jQuery实现表格行上移下移置顶 第一行文字 2018-01-01 移 下移 置顶 第二行文字 2018-01-02 移 下移 置顶 第三行文字 2018-01-03 移 下移 置顶 第四行文字 2018-01-04 移 下移 置顶 ...

    注意引本地的jquery~

    jQuery实现表格行上移下移和置顶
    第一行文字2018-01-01上移 下移 置顶
    第二行文字2018-01-02上移 下移 置顶
    第三行文字2018-01-03上移 下移 置顶
    第四行文字2018-01-04上移 下移 置顶
    龙华大道1号http://www.kinghill.cn/LongHuaDaDao1Hao/index.html
    展开全文
  • 今天做后台管理系统时候,要实现上移下移 置顶的功能,记录一下。 mysql 上移下移 置顶1.上移2.下移3.置顶 首先呢,先创建一张表 CREATE TABLE `a` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar...

    今天做后台管理系统时候,要实现上移和下移 置顶的功能,记录一下。

    mysql 上移和下移 置顶


    首先呢,先创建一张表

    CREATE TABLE `a` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `name` varchar(255) NOT NULL,
      `age` int(11) NOT NULL,
      `gender` varchar(255) NOT NULL,
      `psw` varchar(255) NOT NULL,
      `seq` int(11) NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
    
    INSERT INTO `a`(`id`, `name`, `age`, `gender`, `psw`, `seq`) VALUES (1, 'zsan', 30, 'f', '123456', 1);
    INSERT INTO `a`(`id`, `name`, `age`, `gender`, `psw`, `seq`) VALUES (2, 'lisi', 31, 'f', '123456', 2);
    INSERT INTO `a`(`id`, `name`, `age`, `gender`, `psw`, `seq`) VALUES (3, 'wangwu', 32, 'm', '123456', 3);
    INSERT INTO `a`(`id`, `name`, `age`, `gender`, `psw`, `seq`) VALUES (4, 'zhaoliu', 33, 'm', '123456', 4);
    INSERT INTO `a`(`id`, `name`, `age`, `gender`, `psw`, `seq`) VALUES (5, 'baiqi', 34, 'm', '123456', 5);
    INSERT INTO `a`(`id`, `name`, `age`, `gender`, `psw`, `seq`) VALUES (6, 'hongba', 35, 'f', '123456', 6);
    

    字段中有用的是id和seq,id作为主键标识一条数据,seq标记这条数据的顺序,也是在上移、下移以及置顶操作中,order by的字段。

    1.上移

    获取本条数据和上一条数据内容,将两条数据的seq作交换

    将原数据库中id为2和3的数据内容交换,从前端传入本条数据的id,即3,获取本条数据内容,将获取到的内容存入POJO3

    select * from a where id=3
    

    获取上一条数据内容(这里POJO3.getSeq()的值为4,各位小伙伴执行SQL语句时,自行替换),将获取到的内容存入POJO2。

    SELECT * from a WHERE ( seq < POJO3.getSeq()  OR seq=(SELECT MIN(seq) FROM a ) )  ORDER BY seq DESC limit 1
    

    交换POJO2和POJO3的顺序。

    update a set seq=POJO3的seq值 where id=2;
    update a set seq=POJO2的seq值 where id=3;
    

    2.下移

    获取本条数据和下一条数据内容,将两条数据的seq作交换

    将原数据库中id为3和4的数据内容交换,从前端传入本条数据的id,即3,获取本条数据内容,将获取到的内容存入POJO3

    select * from a where id=3
    

    获取下一条数据内容(这里POJO3.getSeq()的值为3,各位小伙伴执行SQL语句时,自行替换),将获取到的内容存入POJO4。

    SELECT * from a WHERE ( seq > POJO3.getSeq()  OR seq=(SELECT MAX(seq) FROM a ) )  ORDER BY seq ASC limit 1
    

    交换POJO3和POJO4的顺序。

    update a set seq=POJO4的seq值 where id=3;
    update a set seq=POJO3的seq值 where id=4;
    

    3.置顶

    需要获取需要置顶的数据POJO,将表中seq字段小于POJO顺序的所有数据的seq增加1,再将POJO的seq设置为1,最后在查询表时,按seq增序排列,就能看到置顶的效果。
    上SQL代码:

    -- 置顶id=4,seq=4的数据
    update a set seq = seq+1 where seq<4;
    update a set seq=1 where id=4;
    select * from a ORDER BY seq asc
    
    展开全文
  • 主要介绍了jquery实现标签上移下移置顶的相关资料,并附上示例,非常实用,需要的朋友可以参考下
  • 上移 < / a > < a href = "#" class = "down" > 下移 < / a > < a href = "#" class = "top" > 置顶 < / a > < a href = "#" class = "bottom" > 置底 < / a > < a href = "#" class = "delate...
  • HTML页面是一个简单的数据表格,我们在数据行中分别放置“上移”,“下移”和“置顶”三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作。HTML5获取地理位置定位信息2015-04-25上移 下移 置顶...
  • jQuery实现表格行上移下移置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现...
  • tbody class="table"> tr> td class="storegoodslist_tools"> a onclick="" class=" up">上移a> a onclick="" class=" down">下移a> a onclick="" class=" top">置顶a>
  • PHP上移下移置顶置底操作

    千次阅读 2018-05-15 17:47:14
    * 上移下移置顶置底操作 * */ public function goodsResort(){ $this-&gt;load-&gt;model('CmsFilmGoods'); //获取参数 $params = $this-&gt;input-&gt;post(NULL, true); ...
  • 使用JS技术实现数据行的动态置顶、置底、上移下移
  • mysql 实现上移下移置顶实现上移下移置顶上移下移置顶 实现上移下移置顶 今天实现一个功能 就是对数据的上移下移和顶置 // An highlighted block CREATE TABLE `test` ( `id` int(11) NOT NULL ...
  • 实现上移下移 置顶置底效果

    千次阅读 2017-12-10 21:41:57
    up down top bottom
  • easyUI datagrid 行上移 下移 置顶 置底

    千次阅读 2018-11-19 14:12:39
    //上移 function MoveUp() { var row = $("#Student_Table").datagrid('getSelected'); var index = $("#Student_Table").datagrid('getRowIndex', row); mysort(index, 'up', 'Stud...
  • 上移下移代码

    2013-06-10 09:49:53
    代 码 好的 参考

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 623
精华内容 249
关键字:

置顶上移下移