日常

功能实现:点击"查看"按钮显示被选中行相关信息;

思路:

1. 页面内容包括两部分,一部分是点击页面时的展示页面,一个时点击查看时显示的页面. 将显示页面和隐藏页面通过show/hiden切换,并设置不显示页面为display:none. 点击按钮后出发隐藏页面显示的事件.
2. 选中内容: 通过layui中的 table.checkStatus(‘idTest’)方法获取该行的数据,将该行数据显示在页面中即可. 通过jquery中的$(选择器).text(value)

编辑功能实现:

实现思路:

1.如果数据数量较少,可以通过url直接拼接传值,并在传入的页面中通过js原生的 getUrlParamas(‘key’)的方式获取数据

1. 如果可以发送请求,就把id值通过url传出,在发送请求

2. 如果数据大于一个,可以封装方法,将data中的数据拼接在url后面

   if(config.data){
       $.each(config.data,function(k){
           sUrl += '&' + k + "=" config.data[k]
       })
   }
   

   功能实现：
   使用a标签实现下载功能：

a标签的原生属性中有download这个属性，可以定义下载的名称，并且需要在herf中给出模版的路径即可

功能实现：
实现上传功能：
<button value=“上传内容” οnclick="#"id=‘uploadFile’>

js控制小数点的位数:

function roundFun(value,n) {
    //value是数值,n是保留的位数
    return Math.round(value*Math.pow(10,n)) / Math.pow(10,n)
}
//思路: 先将value变换后四舍五入,然后再将获得的数据变为指定的位数

功能实现：

点击li，使li的箭头的方向旋转：

实现思路：

<li class='li'>
    <img class="judge" data-icon='true' src='../../img/icon-close'
</li>
 

$('li.li').on('click',function(){
    if($(this).find('img.judge').attr('data-icon') == 'true'){
        $(this).find('img.judge').attr('src','../../img/icon-open')
        $(this).find('img.judge').attr('data-icon','false')
    }else{
        $(this).find('img.judge').attr('src','../../img/icon-cloßßse')
        $(this).find('img.judge').attr('data-icon','true')
    }
})
//思路：关键是要给img设置一个属性来判断何时需要增加类名和何时需要去除类名

input框中的type：file中，可以通过 dom.click()方法出发点击事件上传文件内容

将文件转换为base64格式的方法：
const file = input.files[0]
var  reader = new FileReader（）；
reader.readAsDataURL（file）；
reader.onload = (e) => {
    reader.result; //获取到文件的base64格式
    
}
   //data:application/octet-stream;base64,5L+u5pS556ue5qCH5oiQ5Yqf55qE5aSq5Y6f55qEZGVtb++8jOebruWJjeW3sue7j+aPkOWHuueahOS/ruaUuemcgOaxguW3sue7j+WujOaIkOOAguS/ruaUueWIhue7hOWZqOezu+e7n+S4reeahOWtl+auteagoemqjO+8jOaXtumXtOa4suafk+etiWJ1Z+eahOS/ruaUue+8jOebruWJjeW3sue7j+WujOaIkOS6huS/ruaUueOAggoK5a6M5oiQ5LqGbGF5dWnkuK3lhbPkuo7mlofku7bkuIrkvKDnu4Tku7bnmoTkvb/nlKjjgILmraPlnKjlrabkuaB2dWXnmoTnm7jlhbPnn6Xor4YKCueGn+aCiWxheXVp5Lit55qE5LiK5Lyg5Yqf6IO977yM5pa55L6/5L2c5Ye65a+85YWl562J5Yqf6IO944CCCgrmnKzlkajorqHliJLnu6fnu63lvIDlj5HliIbnu4Tlmajnm7jlhbPnmoTliY3nq6/lvIDlj5HvvIzph43ngrnmmK/lrozmiJDlr7zlhaXnrYnov73liqDnmoTmlrDlip/og70KCuWtpuS5oHZ1ZeWcqOenu+WKqOerr+e7j+W4uOS9v+eUqOeahOe7hOS7tuWSjOWKn+iDvQ==