这周写了很多项目，也遇到了很多看似很简单的问题，但是实际操作起来发现其实还是有点复杂的，当然也是一些常用的方法，掌握的话，以后也是会经常遇到。当然在此之前，自己也是去网上搜索过，不过网上的东西都是比较杂乱，可能有的满足不了项目的需求，我们可以在一个基础的方法上进行扩展，去达到自己的需求。
近期遇到的第一个常用的方法就是关于table表格固定表头的问题，网上的方法非常多，有的也是非常的复杂，有的简单但是却满足不了自己的项目，自己遇到的这个项目中，table里面的thead和tbody，都是动态生成的，在加载以后，会出现一个表头，但是没有身体部分，所以表头都是缩小的表头，从服务器取到数据以后，身体部分出现，表头也随着展开。因为字段比较多，所以还出现了横向的滚动条，因此使用fixed的定位，会导致只有表头前几个字段可以看见，后面拉动横向滚动条的时候，表头依然是固定不变的，这样显然达不到自己预想的效果。然后在网上搜到了一个利用滚动事件进行固定的例子，一下子让自己茅塞顿开，对上面的方法也是进行了自己的扩展，下面是代码：
$(window).scroll(function(){
let scroll = $(window).scrollTop();
//获取滚动条距离顶部的距离
$(selector)[0].style.transform = 'translateY("+scrollTop+"px)';
});这个主要就是利用了css3的平移变换的transform方法，让表头始终固定在顶部的位置，代码也是非常的简单，当然这个是基于window的滚动事件，如果是某个元素滚动，则在某个元素身上绑定滚动事件即可。另外一个则是如何将json转换成树形结构，这个网上的代码非常多，自己也是看了很多，一直没有能明白其中的意思，后来也是将代码写一遍，并且log了很多次，才明白了原理，这里也是详细解释一下这个代码的意思。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
/*
*@param {json} 需要转换的json数据
*@param {string} 数组的id属性字符串
*@param {string} 数组元素父级元素的id属性，也就是pid的意思
*@param {string} 数组元素子元素的属性名
*@return {array} 返回数组
*/
function transJson(jsonData,id,pid,children){
let arr = [],hash = [],len = jsonData.length;
for(let i = 0;i < len;i++){
hash[jsonData[i][id]] = jsonData[i];
//将数组转换成对象的形式，即a[i][id]是数组中的id属性作为hash数组的属性名
}
for(let j = 0;j < len;j++){
//aVal实际就是jsonDate数组，hashVP则代表hash数组的父元素的id，即pid
let aVal = jsonData[j],hashVP = hash[aVal[pid]]；
if(hashVP){
!hashVP[children] && (hashVP[chilren] = [])
//判断父对象是否存在，即pid是否存在，不存在，则将对象放到第一层
hashVP[children].push(aVal); //存在的话就将本对象放入chilren属性
}else{
r.push(aVal);
}
}
}
</script>
</body>
</html> 自己看这段代码的时候，开始始终无法理解pid的意思，尝试了很多次，最后再知道pid就是指向父元素的id的意思，如果pid不存在的话，那就将这个对象放在最外层。当然转换json的结构，也只是第一步，如何将json属性结构去体现在dom上，自己也是尝试写过，但是抽象不出来方法，面对那些无限嵌套的情况，也是束手无策，网上看到的方法也是比较复杂，难以理解，如果有小伙伴知道，也可以和我分享