需求分析：多行数据分组排序之后，如何获取第一行数据？具体案例如下：

根据要求查询结果：

查询结果username不能重复；
username重复的选择条件是status为1则选择该条，多个1则按照createtime选取最近的一条；
status都为0，根据createtime选择最新的一条；

按照上述要求，筛选出来的结果应为红色框选的结果。



![在这里插入图片描述](https://img-blog.csdnimg.cn/20190225230802569.png

MySQL的解决方法如下：
select 
substring_index(group_concat(userid order by status desc, createtime desc),',',1) as userid,
username,
substring_index(group_concat(status order by status desc, createtime desc),',',1) as status,
substring_index(group_concat(createtime order by status desc, createtime desc),',',1) as createtime
from sysuser group by username;
使用了group_concat()和substring_index()两个函数的结合。

group_concat()：根据group by分组和排序参数之后，将字段使用‘,’连接起来；

substring_index()：使用‘,’分割，而后取第一个元素。

工作几年，越来越发现行列转换非常重要，为了和上篇文章（hive函数--排序row_number,rank over）保持一致，这次继续用学生成绩的例子吧。
1.行转列 union all：
表result：student_id,class,score
学生的语数外物化都在一张表里，每个学生对应有五行数据，如何变成：
student_id,chinese_score,math_score,english_score,physics_score,chemical_score，这样一行显示五列的结构呢？其实非常简单，用union all 即可。注意下面的语句，其实是有些小技巧在里面的：
select student_id,max(chinese_score),max(math_score)math_score ,max(english_score)english_score,max(physics_score)physics_score,
max(chemical_score)chemical_score from(
select student_id,score chinese_score,0 math_score,0 english_score,0 physics_score, 0 chemical_score from result where class="语文"
union all
select student_id,0 chinese_score,score math_score,0 english_score,0 physics_score, 0 chemical_score from result where class="数学"
union all
select student_id,0 chinese_score,0 math_score,score english_score,0 physics_score, 0 chemical_score from result where class="英语"
union all
select student_id,0 chinese_score,0 math_score,0 english_score,score physics_score, 0 chemical_score from result where class="物理"
union all
select student_id,0 chinese_score,0 math_score,0 english_score,0 physics_score, score chemical_score from result where class="化学"
)a
group by student_id
注意：
1）union all 需要所有union的数据列名一致，所以所有的数据都有五列。
2）虽然所有的数据都有五列，但是实际有数据的只有一列，其余数据以0补齐
3）最后结果出来的时候，要用max函数来取出实际的score。
4）实际处理数据的过程当中，可能存在并不是每个学生五门成绩都有的情况，而有的学生可能就是考了0分，这时候想要知道到底是没有成绩还是成绩为0的话，可以设默认值为-1（看情况自己决定，不冲突即可，string类型的数据可以设null哦）然后再取max，就可以区分了。
其实就是根据限制条件取出不同的数据放到不同列中，其余数据以默认值补齐，最后取max即可


2.一行转多行 lateral view explode()
实际的日志为了传输方便，很可能将很多数据放在一条记录里，如果表变成了这样：
result:
student_id
score_list
1
语文-90;数学-100;英语-100;物理-98;化学-99
想要把合在一起的数据拆成5行能够看的清晰一点又该怎么样呢？
注意，我之前遇到过平台不支持分号的情况，这里可以用\074来代替。
select student_id,split(scores,"-")[0] class ,split(scores,"-")[1] score
 from result a lateral view explode(split(score_list,"\074")) scores as scores
这个后面的as就是语法，还有explode里面的得是一个数组
这样就会产生5条记录了，如果想分别用五列展示的话，用上面的union all就好啦
split函数功能：按照后面的分隔符分解前面的字符串

3.多行转一行group_concat
与上述问题相反，如果有5行数据想要合并成上述一列数据该如何操作呢？
select student_id,group_concat(concat(class,"-",score),"\074") from result group by student_id
concat:字符串拼接，直接按顺序来
group_concat:一看名字就知道和group有关，使用的时候得和group一起使用，按student_id分组之后，将分组的内容以;连接成一个字符串。

       在前面教程讲过一些使用RANK函数和“数据/排序”菜单来实现excel教程中的排序操作。使用排序的方法通常只能解决一行或一列数字的排序。
　　如果是多行或多列区域数据排序，可以参考下面的方法来实现。
　　下面我们以一个实例加以讲解。详见下图。


　　其中A到E列为原始数据，如何将A1至E8区域的数据，让每行的数据按照从小到大的顺序重新排序？
　　excel教程数据排序的操作步骤是这样的：
　　单击G1单元格，在编辑栏输入公式：=SMALL($A1:$E1,COLUMN(A1))，确定。并再次选中G1单元格，向右复制至K1单元格。然后再选中G1:K1单元格区域,向下复制公式至K8单元格结束。
　　通过公式的形式，即可完成数据从小到大的排序。注：如果是将数据按照从大到小来排序，只需将SMALL变为LARGE即可。
　　完成排序操作后，也可以根据实际需要隐藏原数据列A:E区域；也可以将G:K列的数据复制后，进行选择性粘贴－数值，覆盖原始数据列。
       对excel感兴趣的朋友可加Excel学习交流群：284029260
　　Excel排序关联阅读文章：

　　《excel 教程列排序实例讲解》

　　《excel 教程排名函数公式讲解》

最近几天在研究有关vue实现拖拽的功能，不过跟一般的拖拽排序有点不同，这个需求可能出现多行多列嵌套的表单元素，数据也是递归形式的出现。我也是在vuedraggable的基础上扩展实现的，如何想了解更多的拖拽排序功能可以参考https://sortablejs.github.io/Vue.Draggable/#/simple

需要实现的功能

表单元素可能出现嵌套，数据出现树形结构
实现拖拽功能，表单元素可以移动到空的列里面，但是表单元素内容的不能来回拖拽排序
行与行之间可以拖动排序，列与列直接不能移动排序，能移动的只是字段数据也就是表单元素
右边列表里的字段可以拖拽添加到左边的空白没内容的列里面

用的技术点

vue组件递归实现
vuedraggable拖拽排序
vuedraggable的例子Functional third party，主要是元素移动
vuedraggable实现拖拽复制功能
vuetify :vue ui组件，这里面主要用了它的删格系统和vcard卡片

实现功能的部分代码
Drag组件也是要递归的组件代码
<template>
  <draggable
    v-model="datas"
    tag="v-layout"
    class="row wrap fill-height align-center sortable-list"
    style="background: grey;"
  >
    <v-flex
      v-for="row in datas"
      :key="row.index"
      class="sorttable"
      xs12
      my-2
      style="background: red"
    >
      <div class="row wrap justify-space-around">
        <v-flex
          v-for="item in row.items"
          :key="item.id"
          xs4
          pa-3
          class="row-v"
        >
          <!-- 加判断如果item存在rows数组,则递归继续执行这个组件-->
          <template v-if="item.rows && Array.isArray(item.rows)">
            <drag :data="item.rows" />
          </template>
          <draggable
            v-else
            :list="item.data"
            tag="div"
            :group="{ name: 'row'}"
            :move="getData"
            :animation="100"
            :empty-insert-threshold="60"
            @change="log"
          >
            <v-card
              v-for="item2 in item.data"
              :key="item2.title"
              style="height: 100px;"
            >
              {{ item2.title }}
            </v-card>
          </draggable>
        </v-flex>
      </div>
    </v-flex>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default {
  name: 'Drag',
  order: 17,
  components: {
    draggable
  },
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      datas: this.data,
      controlOnStart: true
    }
  },
  methods: {
  // 限制移动的方法
    getData (e, d) {
      if (e.relatedContext.list.length > 0) {
        return false
      }
    },
    log: function (evt) {
      // window.console.log(evt)
      // console.log(this.data)
      if (Object.keys(evt)[0] === 'added') {
        this.arrLoop(this.data, evt.added.element)
      }
    },
    addHandler (e, d) {
      // console.log(e)
    },
    endHandler (e, b) {
      console.log(b)
    },
    // 递归实现遍历数据
    arrLoop (arr, ele) {
      arr.forEach(item => {
        const itemArr = item.data
        if (itemArr && itemArr.length > 1) {
          for (let i = 0; i < itemArr.length; i++) {
            if (itemArr[i].title === ele.title) {
              itemArr.splice(i, 1)
            }
          }
        }
        if (item.items && item.items.length) {
          this.arrLoop(item.items, ele)
        }
      })
    }
  }
}
</script>
<style>
.buttons {
  margin-top: 35px;
}
.row-v {
  /* height: 150px;
  width: 200px; */
  width: 33%;
  height: 100px;
  display: inline-block;
  background: blue;
  border: 1px solid #ebebeb;
}
.row {
  margin-left: 0;
  margin-right: 0;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>


注意：实现递归一定定义Drag组件的name值，要不就容易报错


emptyInsertThreshold:拖动时，鼠标必须与空的可排序对象之间的距离（以像素为单位），以便将拖动元素插入到该可排序对象中。默认为5。设置为0禁用此功能。这个参数要适当的设置，如果是默认值，当列为空的时候，很难把元素拖进去，这个也是一个比较难解决的点，因为需要把右边字段元素拖动到左边空列中，或者左边的元素移动到空的列里。

move对应方法getData的方法主要实现如果relatedContext.list.length 大于0，则取消移动功能。

Drag的数据：
rows: [
        {
          index: 1,
          items: [
            {
              id: 1,
              data: [{
                title: 'item 1'
              }]
              
            },
            {
              id: 11,
              data: [{
                title: 'item 11'
              }]
            },
            {
              id: 12,
              data: [
              ]
            }
          ]
        },
        {
          index: 2,
          items: [
            {
              id: 0,
              rows: [
                {
                  index: 1,
                  items: [
                    {
                      id: 2,
                      data: [{
                        title: 'item 211'
                      }]
                    },
                    {
                      id: 3,
                      data: [{
                        title: 'item 212'
                      }]
                      
                    }
                  ]
                },
                {
                  index: 2,
                  items: [
                    {
                      id: 4,
                      data: [
                        {
                          title: 'item 222'
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              id: 5,
              data: [{
                title: 'item 3'
              }]
            }
          ]
        },
        {
          index: 3,
          items: [
            {
              id: 6,
              data: [{
                title: 'item 4'
              }]
            },
            {
              id: 7,
              data: [{
                title: 'item 5'
              }]
            },
            {
              id: 8,
              data: []
            }
            
          ]
        }
      ]

右边列表的组件代码：
<template>
  <div>
    <div
      v-for="item in datas"
      :key="item.id"
      class="item-box"
    >
      <h2>{{ item.title }}</h2>
      <div class="item-con">
        <draggable
          class="dragArea list-group"
          :list="item.items"
          :group="{ name: 'row', pull: 'clone', put: false }"
          :clone="cloneDog"
        >
          <span
            v-for="item2 in item.items"
            :key="item2.id"
          >
            {{ item2.title }}
          </span>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'Drag',
  components: {
    draggable
  },
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      datas: [
        {
          id: 1,
          title: '标题1',
          items: [
            {
              id: 11,
              title: 'item 11'
            },
            {
              id: 12,
              title: 'item 12'
            }
          ]
        },
        {
          id: 2,
          title: '标题2',
          items: [
            {
              id: 21,
              title: 'item 21'
            },
            {
              id: 22,
              title: 'item 22'
            }
          ]
        }
      ]
    }
  },
  methods: {
    cloneDog (ele) {
      // console.log(ele)
      let b = this.arrLoop(this.rows, ele)
      if (!b) {
        return ele
      }
    },
    arrLoop (arr, ele) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id === ele.id) {
          return true
        }
        if (arr[i].items && arr[i].items.length) {
          return this.arrLoop(arr[i].items, ele)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
 .list-group{
   span {
     display: inline-block;
     padding: 0 12px;
     border-radius: 4px;
     border: 1px solid #ebebeb;
     line-height:  32px;
     height: 32px;
     background: #f5f5f5;
     margin-right: 15px;
   }
 }
</style>


clone的cloneDog方法实现复制功能，首先递归循环数据判断是需要复制的元素在左边的列表中是否存在，若是存在，则取消复制，不存在，则复制。
效果如下图：


总结
这篇文章分享的主要技术点就是vuedraggable拖拽排序和复制、嵌套拖拽排序功能、vue组件递归功能。