原生JS_JQuery实用技巧（上）

element:not(:last-child) {
}

// 自定义上传样式
<li id="upload-btn" class="default-image">
    <img src="=" alt="">
    <div>请上传图片</div>
    <!-- 上传(隐藏原生的input) -->
    <input type="file" id="upload" class="hide">
</li>

// 模拟原生input点击事件
 $('#upload-btn').click(function() {
    $('#upload').click();
})

<!-- 这里的id、class、data-id均为div的attr -->
<div id="demo" class="demo" data-id="1"></div>

// 这里的name、age均为obj对象的prop
let obj = {
  name: 'wen',
  age: 18,
}

var url = `/export?start_time=${start_time}`
var xhr = new XMLHttpRequest()
// 也可以使用POST方式，根据接口
xhr.open('GET', url, true)
// 返回类型blob，XMLHttpRequest支持二进制流类型
xhr.responseType = 'blob'
xhr.onload = function () {
  if (this.status === 200) {
    //使用response作为返回，而非responseText
    var blob = this.response
    var reader = new FileReader()
    // 转换为base64，可以直接放入a标签href
    reader.readAsDataURL(blob)
    reader.onload = function (e) {
      // 转换完成，创建一个a标签用于下载
      var a = document.createElement('a')
      // 获取当前导出时间
      var nowDate = format(new Date())
      a.download = `文件名_${nowDate}.xlsx`
      a.href = e.target.result
      a.click()
    }
  }
}
xhr.send()

// -----------远程搜索 start------------

// 远程搜索接口路径
var searchUrls = ['/productManager/index']

// 请求下拉列表
function remoteSearch(val, idx) {
  var that = $('#' + val + '')
  $('#' + val + '-dropdown').show()
  $('#select-' + val + '-id').val('')
  var name = $(that).val().trim()
  var data = { name }
  $('#' + val + '-dropdown').html('<div class="search-loading">加载中...</div>')
  $.ajax({
    type: 'GET',
    url: searchUrls[idx],
    data,
    success: function (res) {
      var list = res.data || []
      var str = ''
      if (list.length) {
        $.each(list, function (index, item) {
          str += `
                        <li class="select-item" data-id=${item.id} data-name=${item.name}>
                        ${item.name}
                        </li>`
        })
        $('#' + val + '-dropdown').html(str)
      } else {
        $('#' + val + '-dropdown').html('<div class="empty-search">无匹配数据</div>')
      }
    },
    error: function (error) {
      console.log(error)
    },
  })
}

// 防抖函数
function debounce(fn, delay = 500) {
  var timer = null
  return function () {
    var context = this
    var args = arguments
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(context, args)
    }, delay)
  }
}

var debounceCategory = debounce(remoteSearch.bind(null, 'category', 0), 500)

// 绑定input事件
$('#category').on('input', debounceCategory)

// 失焦隐藏下拉列表
function hideDropdown(str) {
  setTimeout(() => {
    var id = $('#select-' + str + '-id').val()
    if (!id) $('#' + str + '').val('')
    $('#' + str + '-dropdown').hide()
  }, 200)
}

// 失焦
$('#category').blur(hideDropdown.bind(null, 'category'))

// 选择下拉列表某一项
function selectItem(that, str) {
  var id = $(that).attr('data-id')
  var name = $(that).attr('data-name')
  $('#' + str + '').val(name)
  $('#select-' + str + '-id').val(id)
  $('#' + str + '-dropdown').hide()
}

// 选择
$('#category-dropdown').on('click', '.select-item', function () {
  selectItem($(this), 'category')
})

function toggleModal(str, bool) {
  var modal = modalInfo[str]
  bool ? $(modal).stop().fadeIn(300) : $(modal).stop().fadeOut(300)
}

// 点击导入
function selectFile() {
  $('#import-product-file').click()
}

// 导入文件
$('#import-product-file').change(function () {
  var fileItem = $(this)[0].files[0]
  var fileName = fileItem.name
  $('#import-file-name').html(fileName)
})

// 确认导入
function submitImport() {
  var fileItem = $('#import-product-file')[0].files[0]
  if (!fileItem) return alert('请先选择文件！')
  var formData = new FormData()
  formData.append('file', fileItem)
  $('#import-product-file').val('')
  $.ajax({
    type: 'POST',
    url: '/import',
    data: formData,
    contentType: false,
    processData: false,
    dataType: 'json',
    success: function (res) {
      if (res.code === 0 && res.status) {
        alert('导入成功！')
        getList()
      } else {
        alert(res.msg || '导入失败！')
      }
    },
    error: function (error) {
      console.log(error)
    },
  })
}

// 监听键盘输入事件(实时字数)
$('#category-desc').on('input', function () {
  var currentCount = $(this).val().length
  $('#category-current-count').html(currentCount)
})