原生 js 和 vue+ element-ui 分别实现树形表格 ? (JSONP 和 Axios 请求本地 JSON 文件)

最新推荐文章于 2024-07-26 15:35:35 发布
最新推荐文章于 2024-07-26 15:35:35 发布
阅读量542 收藏 3
点赞数 4
分类专栏： vue2.x ，vue_cli javascript，es6 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44722915/article/details/118991314
版权

使用原生 JS 实现树形表格 ？

【 如需查看完整示例请点击：tree-table_JS: 使用原生 JS 实现，树形表格案例。支持多级数据渲染，新增，删除，编辑等操作。 】

  • 请求本地 JSON 文件获取数据 。
  1. 问题：cors ，跨域问题 。
  2. 解决：使用 jsonp 方式，请求相关数据 。
  3. 注意：在 json 文件中，json 数据使用 callback( json数据 ) 包裹，才能保持浏览器控制台打印出数据无报错。我这里回调函数是 getData( json数据 )。
  4. 代码： 
    <script type="text/javascript">
 /*
  getData 函数: JSONP 的函调函数，解决跨域问题。请求本地 JSON 文件
  参数: data---》拿到的 JSON 数据
*/
 function getData(data) {
     // initData---》存放当前操作完的全局树形数据
     var initData = [] 
     initData = JSON.parse(JSON.stringify(formatData(data.menuTree,'')))
     initTable(initData)
 }
</script>
<script type="text/javascript" src="./data.json?callback=getData"></script>
  • 一维数组数据转换为树形数据 （递归）。
  1. 思路：使用递归的方式将一维数组转换成树形数据，根据 menuParentid 和 menuId 的对比，对数据进行分类，添加到合适的位置上。
  2. 代码： 
    /* 
 formatData 函数：数据转换，将一维数组数据转换为树形数据
 参数：data---》原始一维数组数据
 返回值：resultArr---》格式化好的树形数据
*/
function formatData(data, pid) {
    var resultArr = [], temp;
    for (var i = 0; i < data.length; i++) {
        if (data[i].menuParentid == pid) {
            var obj = JSON.parse(JSON.stringify(data[i]));
            temp = formatData(data, data[i].menuId);
            if (temp.length > 0) {
                obj.children = temp;
            }
            resultArr.push(obj);
        }
    }
    return resultArr;
}
  • JS 中初始化表格 。
  1. 思路：在 initTR_DG 函数中递归的根据数据，动态新增 tr 到 table 中。根据 当前数据项的 menuType 是否为菜单，决定是否有前缀的展开和收起按钮。
  2. 代码： 
    /* 
  initTable 函数: 初始化表格
  参数: data---》转换的树形数据
*/
function initTable(data) {
    globalData = JSON.parse(JSON.stringify(data))
    var tableEL = document.createElement('table')
    var containerEL = document.getElementById('container')
    containerEL.appendChild(tableEL)
    tableEL.appendChild(createTH())
    initTR_DG(data,tableEL,'')
}
function initTR_DG(data,tableEL,index){
    if(data && data.length != 0){
        for(var i=0; i<data.length; i++){
            if(data[i].menuType == '菜单') {
                var trEL = createTR(data[i], 1, index+'.'+(i+1))
            } else {
                var trEL = createTR(data[i], 0, index+'.'+(i+1))
            }
            tableEL.appendChild(trEL)
            if(data[i].children && data[i].children.length != 0){
                initTR_DG(data[i].children,tableEL,index+'.'+(i+1))
            }
        }
    }
}
/*
  createTH 函数: 创建表头
  返回值: trEL---》表头元素
*/
function createTH() {
    var trEL = document.createElement('tr')
    var thEL0 = document.createElement('th')
    thEL0.innerHTML = '序号'
    trEL.appendChild(thEL0)
    var thEL1 = document.createElement('th')
    thEL1.innerHTML = '功能名称'
    trEL.appendChild(thEL1)
    var thEL2 = document.createElement('th')
    thEL2.innerHTML = '是否启用'
    trEL.appendChild(thEL2)
    var thEL3 = document.createElement('th')
    thEL3.innerHTML = '功能类型'
    trEL.appendChild(thEL3)
    var thEL4 = document.createElement('th')
    thEL4.innerHTML = '创建时间'
    trEL.appendChild(thEL4)
    var thEL5 = document.createElement('th')
    thEL5.innerHTML = '功能备注'
    trEL.appendChild(thEL5)
    var thEL6 = document.createElement('th')
    thEL6.innerHTML = '相关操作'
    trEL.appendChild(thEL6)
    return trEL
}
/* 
  createTR 函数: 创建每一列
  参数1: currentData---》当前列的数据
  参数2: type---》类型，决定有没有展开折叠按钮，1 有，其他无
  参数3 index---》计算的当前列的标号
  参数4: tier---》第几层
  返回值: trEL---》创建的当前 tr
*/
function createTR(currentData, type, index) {
    var trEL = document.createElement('tr')
    if (type == 1) {
        var tdEL0 = document.createElement('td')
        tdEL0.innerHTML = index
        tdEL0.style.fontWeight = 'bold'
        tdEL0.style.fontSize = '8px'
        trEL.appendChild(tdEL0)
        var spanEL = document.createElement('span')
        spanEL.classList.add('span')
        spanEL.title = '展开'
        spanEL.onclick = clickZK
        var spanEL1 = document.createElement('span')
        spanEL1.classList.add('span1')
        spanEL1.title = '收起'
        spanEL1.onclick = clickSQ
        var tdEL1 = document.createElement('td')
        tdEL1.innerHTML = currentData.menuText
        tdEL0.style.textAlign = 'left'
        tdEL0.appendChild(spanEL)
        tdEL0.appendChild(spanEL1)
        trEL.appendChild(tdEL1)
        var tdEL2 = document.createElement('td')
        tdEL2.innerHTML = currentData.menuIsmodify
        trEL.appendChild(tdEL2)
        var tdEL3 = document.createElement('td')
        tdEL3.innerHTML = currentData.menuType
        currentData.menuType == '菜单' ? tdEL3.style.color = '#409EFF' : tdEL3.style.color = 'green'
        trEL.appendChild(tdEL3)
        var tdEL4 = document.createElement('td')
        tdEL4.innerHTML = datefomate(currentData.menuCreatetime)
        trEL.appendChild(tdEL4)
        var tdEL5 = document.createElement('td')
        tdEL5.innerHTML = currentData.menuNote
        trEL.appendChild(tdEL5)
        var tdEL6 = document.createElement('td')
        var editBtn = document.createElement('button')
        editBtn.innerText = '编辑'
        editBtn.classList.add('button1')
        editBtn.onclick = editTableData
        tdEL6.appendChild(editBtn)
        var delBtn = document.createElement('button')
        delBtn.innerText = '删除'
        delBtn.classList.add('button2')
        delBtn.onclick = delTableData
        tdEL6.appendChild(delBtn)
        var addBtn = document.createElement('button')
        addBtn.innerText = '新增'
        addBtn.onclick = addTableData
        tdEL6.appendChild(addBtn)
        addBtn.classList.add('button0')
        trEL.appendChild(tdEL6)
    } else {
        var tdEL0 = document.createElement('td')
        var strongEL = document.createElement('strong')
        strongEL.innerHTML = index
        tdEL0.appendChild(strongEL)
        tdEL0.style.fontSize = '8px'
        trEL.appendChild(tdEL0)
        var tdEL1 = document.createElement('td')
        tdEL1.innerHTML = currentData.menuText
        trEL.appendChild(tdEL1)
        var tdEL2 = document.createElement('td')
        tdEL2.innerHTML = currentData.menuIsmodify
        trEL.appendChild(tdEL2)
        var tdEL3 = document.createElement('td')
        tdEL3.innerHTML = currentData.menuType
        currentData.menuType == '菜单' ? tdEL3.style.color = '#409EFF' : tdEL3.style.color = 'green'
        trEL.appendChild(tdEL3)
        var tdEL4 = document.createElement('td')
        tdEL4.innerHTML = datefomate(currentData.menuCreatetime)
        trEL.appendChild(tdEL4)
        var tdEL5 = document.createElement('td')
        tdEL5.innerHTML = currentData.menuNote
        trEL.appendChild(tdEL5)
        var tdEL6 = document.createElement('td')
        var editBtn = document.createElement('button')
        editBtn.innerText = '编辑'
        editBtn.classList.add('button1')
        editBtn.onclick = editTableData
        tdEL6.appendChild(editBtn)
        var delBtn = document.createElement('button')
        delBtn.innerText = '删除'
        delBtn.classList.add('button2')
        delBtn.onclick = delTableData
        tdEL6.appendChild(delBtn)
        trEL.appendChild(tdEL6)
    }
    return trEL
}
  • 列收起和列展开。
  1. 思路：根据 clickSQ 的点击事件，确定点击的数据项，在根据 clickSQ_DG 函数，递归的找出当前数据项，让它的 children = [ ]，重新初始化表格。根据 clickZK 的点击事件，清空原始 table 表格结构，使用缓存的 initData 数据去重新初始化表格。
  2. 代码： 
    // clickSQ 函数: 列收起
function clickSQ() {
    initData = JSON.parse(JSON.stringify(globalData))
    var currentText = this.parentNode.parentNode.children[1].innerText
    clickSQ_DG(globalData,currentText)
    document.getElementById('container').innerHTML = ''
    initTable(globalData)
    SQstatus = false
}
function clickSQ_DG(globalData,currentText){
    for (var i = 0; i < globalData.length; i++) {
        if (globalData[i].menuText == currentText) {
            globalData[i].children = []
            SQstatus = true
            break
        }
        if(SQstatus == false){
            if(globalData[i].children && globalData[i].children.length != 0){
                clickSQ_DG(globalData[i].children,currentText)
            }
        }
    }
}
// clickZK 函数: 列展开
function clickZK() {
    document.getElementById('container').innerHTML = ''
    initTable(initData)
}
  • 删除操作 。
  1. 思路：根据 delTableData 确定当前操作的数据列，使用 delTableData_DG 函数递归来找到当前的数据，进行删除 ，重新初始化表格 。
  2. 表格： 
    // delTableData函数: 删除操作
function delTableData() {
    var currentText = this.parentNode.parentNode.children[1].innerText
    delTableData_DG(globalData,currentText)
    document.getElementById('container').innerHTML = ''
    initTable(globalData)
    SQstatus = false
}
function delTableData_DG(globalData,currentText){
    for (var i = 0; i < globalData.length; i++) {
        if (globalData[i].menuText == currentText) {
            globalData.splice(i, 1)
            SQstatus = true
            break
        }
        if(SQstatus == false){
            if(globalData[i].children && globalData[i].children.length != 0){
                delTableData_DG(globalData[i].children,currentText)
            }
        }
    }
}
  • 编辑操作 。
  1. 思路：根据 editTableData 确定当前操作的数据列，使用 editTableData_DG 函数递归来找到当前的数据，使用 setEditData 函数进行数据回显，使用 getCurrentEdit 函数进行数据缓存，当点击编辑保存事件时进行当前缓存数据的更改，最后重新初始化表格 。
  2. 代码： 
    // editTableData 函数: 编辑操作
function editTableData() {
    document.getElementById('edit').style.display = 'block'
    var currentText = this.parentNode.parentNode.children[1].innerText
    editTableData_DG(globalData,currentText)
    SQstatus = false
}
function editTableData_DG(globalData,currentText){
    for (var i = 0; i < globalData.length; i++) {
        if (globalData[i].menuText == currentText) {
            setEditData(globalData[i])
            getCurrentEdit(globalData[i])
            SQstatus = true
            return
        }
        if(SQstatus == false){
            if(globalData[i].children && globalData[i].children.length != 0){
                editTableData_DG(globalData[i].children,currentText,currentGlobalData)
            }
        }
    }
}
function getCurrentEdit(data){
    return currentGlobalData = data
}
/* 
  etEditData 函数: 编辑数据回显
  参数: data---》编辑回显的当前数据
*/
function setEditData(data) {
    document.getElementById('menuText').value = data.menuText
    document.getElementById('menuIsmodify').value = data.menuIsmodify == '启用' ? 1 : 0
    document.getElementById('menuType').value = data.menuType == '菜单' ? 1 : 0
    document.getElementById('menuCreatetime').value = datefomate(data.menuCreatetime)
    document.getElementById('menuNote').value = data.menuNote
}
// 编辑关闭
document.getElementById('editClose').onclick = function() {
    document.getElementById('edit').style.display = 'none'
}
// 编辑保存
document.getElementById('editSave').onclick = function() {
    currentGlobalData.menuText = document.getElementById('menuText').value
    currentGlobalData.menuIsmodify = document.getElementById('menuIsmodify').value == 1 ? '启用' : '禁用'
    currentGlobalData.menuType = document.getElementById('menuType').value == 1 ? '菜单' : '链接'
    currentGlobalData.menuCreatetime = document.getElementById('menuCreatetime').value
    currentGlobalData.menuNote = document.getElementById('menuNote').value
    document.getElementById('container').innerHTML = ''
    initTable(globalData)
    document.getElementById('edit').style.display = 'none'
}
// 编辑取消
document.getElementById('editCancle').onclick = function() {
   document.getElementById('edit').style.display = 'none'
}
  • 新增操作 。
  1. 思路：根据 addTableData 确定当前操作的数据列，使用 addTableData_DG 函数递归来找到当前的数据，使用 getCurrentAdd 函数进行数据缓存，当点击新增保存事件时进将数据添加到缓存的当前数据项的 children 中，最后重新初始化表格 。
  2. 代码： 
    // addTableData 函数：新增操作
function addTableData() {
    document.getElementById('add').style.display = 'block'
    document.getElementById('menuCreatetime1').value = datefomate(Date.now())
    var currentText = this.parentNode.parentNode.children[1].innerText
    addTableData_DG(globalData,currentText)
    SQstatus = false
}
function addTableData_DG(globalData,currentText){
    for (var i = 0; i < globalData.length; i++) {
        if (globalData[i].menuText == currentText) {
            getCurrentAdd(globalData[i])
            SQstatus = true
            return
        }
        if(SQstatus == false){
            if(globalData[i].children && globalData[i].children.length != 0){
                addTableData_DG(globalData[i].children,currentText)
            }
        }
    }
}
function getCurrentAdd(data){
    return currentGlobalData1 = data
}
// 新增关闭
document.getElementById('addClose').onclick = function() {
    document.getElementById('menuText1').value = ''
    document.getElementById('menuNote1').value = ''
    document.getElementById('add').style.display = 'none'
}
//新增保存
document.getElementById('addSave').onclick = function() {
    var obj = {}
    obj.children = []
    obj.menuText = document.getElementById('menuText1').value
    obj.menuIsmodify = document.getElementById('menuIsmodify1').value == 1 ? '启用' : '禁用'
    obj.menuType = document.getElementById('menuType1').value == 1 ? '菜单' : '链接'
    obj.menuCreatetime = document.getElementById('menuCreatetime1').value
    obj.menuNote = document.getElementById('menuNote1').value
    if(!currentGlobalData1.children){
        currentGlobalData1.children = []
        currentGlobalData1.children[0] = obj
    }else{
        currentGlobalData1.children.push(obj)
    }
    document.getElementById('container').innerHTML = ''
    initTable(globalData)
    document.getElementById('menuText1').value = ''
    document.getElementById('menuNote1').value = ''
    document.getElementById('add').style.display = 'none'
}
// 新增取消
document.getElementById('addCancle').onclick = function() {
    document.getElementById('menuText1').value = ''
    document.getElementById('menuNote1').value = ''
    document.getElementById('add').style.display = 'none'
}
  • 格式化日期 。
  1. 思路：使用 new Date(value) 方法返回值提供的一系列方法进行详细日期时间子项的提取，然后在根据合适的格式进行返回。
  2. 代码： 
    // datefomate函数: 格式化日期
function datefomate(value) {
    if (value == null || value == undefined) {
        return "";
    }
    var date = new Date(value);
    Y = date.getFullYear(),
    m = date.getMonth() + 1,
    d = date.getDate(),
    H = date.getHours(),
    i = date.getMinutes(),
    s = date.getSeconds();
    return Y + '-' + m + '-' + d + '    ' + H + ':' + i + ':' + s;
};

使用 VUE 和 Element-UI  实现树形表格 ？

【 如需查看完整示例请点击：tree_table_vue_element: 使用 vue 和 element-ui 实现，树形表格案例，支持多级数据渲染，新增，数辑，删除等操作。 】

  •  请求本地 JSON 文件获取数据 。
  1. 思路：使用 axios.get( ) 的方法，请求本地 JSON 文件，获取数据 。
  2. 注意：cli2 需要把  json 放在 static 目录下，cli3 中静态资源文件目录由 static 变为 public 不能把 .json 文件直接放到 public 下，必须放到 public/js 下（自己创建 js 目录），否则会报 404 错误 。
  3. 代码： 
    axios.get('/js/data.json').then((res) => {
  this.defaultData = res.data.menuTree
  this.tableData = this.formatData(this.defaultData)
})
  • 一维数组数据转换为树形数据（三级）。
  1. 思路：数据格式转换，根据自己需求场景的不同来决定。我这里只涉及三级数据，选择使用 for 循环嵌套去实现（第一层判断 menuParentid 是否为空，第二三层根据比对 menuParentid 和 menuId 的值来确定存放的合适 children 位置）。更多级推荐使用递归方式实现，具体使用参考上面 。
  2. 代码： 
    formatData(data) {
  let resultArr = []
  for (let i = 0; i < data.length; i++) {
    if (data[i].menuParentid == '') {
      resultArr.push(data[i])
    }
  }
  for (let i = 0; i < resultArr.length; i++) {
    let newArr = []
    for (let j = 0; j < data.length; j++) {
      if (data[j].menuParentid == resultArr[i].menuId) {
        newArr.push(data[j])
      }
    }
    resultArr[i].children = newArr
  }
  for (let i = 0; i < resultArr.length; i++) {
    for (let k = 0; k < resultArr[i].children.length; k++) {
      let newArr1 = []
      for (let j = 0; j < data.length; j++) {
        if (data[j].menuParentid == resultArr[i].children[k].menuId) {
          newArr1.push(data[j])
        }
      }
      resultArr[i].children[k].children = newArr1
    }
  }
  return resultArr
}
  • 数据渲染，使用 Element-UI 中提供的表格组件 。
  1. 思路：这里使用 Element-UI 中的表格组件去实现，也可以使用 layui 或者其他 UI 库中的组件去实现 。
  2. 代码： 
    <el-table :data="tableData" height="500" style="width: 100%;margin-bottom: 20px;" row-key="id" border
      :expand-row-keys="['1','2','16','17','18']" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="index" width="60" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="menuText" label="功能名称" width="180" align="center">
      </el-table-column>
      <el-table-column prop="menuIsmodify" label="是否启用" width="180" align="center">
      </el-table-column>
      <el-table-column prop="menuType" label="功能类型" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.menuType === '菜单' ? 'primary' : 'success'" disable-transitions>{{scope.row.menuType}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="menuCreatetime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column prop="menuNote" label="备注" width="200" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button style="color:#67C23A;" @click="addHandle(scope.row)" type="text" size="small"
             v-if="scope.row.menuType === '菜单'" icon="el-icon-circle-plus-outline">新增</el-button>
          <el-button type="text" size="small" @click="editHandle(scope.row)" icon="el-icon-edit">编辑</el-button>
          <el-button style="color:red;" @click="delHandle(scope.row)" type="text" size="small" icon="el-icon-delete">删除
      </el-button>
    </template>
  </el-table-column>
</el-table>
  • 删除操作 。
  1. 思路：遍历 defaultData 中的数据，找到删除的那一项进行删除，在使用 formatData 函数对数据进行格式化树形数据，重新赋值给 tableData ，进行表格的重新渲染。
  2. 代码： 
     delHandle(row) {
  this.$confirm('此操作将永久删除此项, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    for (let i = 0; i < this.defaultData.length; i++) {
      if (this.defaultData[i].id == row.id) {
        this.defaultData.splice(i, 1)
      }
    }
    this.tableData = this.formatData(this.defaultData)
    this.$message({
      type: 'success',
      message: '删除成功!'
    });
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });
  });
}
  • 编辑操作 。
  1. 思路：遍历 defaultData 中的数据，找到要编辑的那一项进行修改，在使用 formatData 函数对数据进行格式化树形数据，重新赋值给 tableData ，进行表格的重新渲染。
  2. 代码： 
    editHandle(row) {
  this.isExit = true
  this.timer = new Date().getTime()
  for (let i = 0; i < this.defaultData.length; i++) {
    if (this.defaultData[i].id == row.id) {
      this.currentEdit = this.defaultData[i]
    }
  }
},
eventHandle($event) {
  for (let i = 0; i < this.defaultData.length; i++) {
     if (this.defaultData[i].id == $event.id) {
      this.defaultData[i] = $event
    }
  }
  this.tableData = this.formatData(this.defaultData)
}
  • 新增操作 。
  1. 思路：遍历 defaultData 中的数据，找到要新增项的父级，使得新增项的 menuParentid 等于新增项的父级的 menuId ，同时将新增项添加到 defaultData  中 。在使用 formatData 函数对数据进行格式化树形数据，重新赋值给 tableData ，进行表格的重新渲染。
  2. 代码： 
    addHandle(row) {
  this.isExit1 = true
  this.timer1 = new Date().getTime()+'1'
  for (let i = 0; i < this.defaultData.length; i++) {
    if (this.defaultData[i].id == row.id) {
      this.currentAdd = this.defaultData[i]
    }
  }
},
eventHandle1($event) {
  this.defaultData.push($event)
  $event.id = this.defaultData.length
  $event.menuParentid = this.currentAdd.menuId
  this.tableData = this.formatData(this.defaultData)
 }
}
『九离~空白』
关注
专栏目录
[Ext JS]3.8 树状表格TreeGrid
oscar999的专栏
06-15 633
Ext JS 树状表格TreeGrid
Vue和Vue-Element-Admin（六）：集成中的CORS（跨域资源共享）问题
叶子叶来
11-24 9146
在vue-element-admin登录集成时候碰到跨域资源共享问题，CORS（Cross-origin resource sharing）是浏览器的技术规范，浏览器可以发起跨域请求但Javascript脚本不能，传统的ajax只能获取在同域名下的资源，但Html5允许ajax发起跨域请求，解决方案有：JSONP、Flash、IFrame、CORS。 一、CORS（跨域资源共享）问题 针对vue-element-admin的登录模块的后端接口完成后，前端调用时候出现报错，因为前端的端口是9527而后.
树形表格js
05-17
树形表格，支持折叠展开，行点击获取当前行，父节点，子节点，级联勾选 使用文档https://blog.csdn.net/u012796085/article/details/80357317
JS树形表格（可分级展开）
04-10
otreetable.js 原生JS树形表格，调用非常简单（只需一句代码即可调用），获取HTML中输出的表格数据重构表格，以树形方式显示，可展开/收缩，不破坏表格原有数据格式及内容，支持无限级，兼容所有浏览器。当前版本支持分级展开、收缩。
原生JS实现树级表格
一个前端工作者的博客
07-18 2110
一级数据直接展示，其余的数据暂时不生成。带到点击某一个一级在去生成其对应的二级数据，并且后续只需要判断是否存在，存在则隐藏。需要准备一个记录隐藏状态的数组，及存子集的对象，便于快速访问。在tr上可以通过处理好的数据添加自定义属性，便于后续操作。实列中的图标可以自己去引入，使用UI组件库中的图标，对于none的图标也可以依据自己的需求进行改变。...
js实现树状表
weixin_46389242的博客
05-22 548
项目中需要展示表格结构为父子关系
Element-Ui和Vue项目的结合 实现前后台分离
qq_44424498的博客
11-05 1021
Element-Ui和Vue项目的结合 第一步：使用脚手架创建一个Vue项目 vue init webpack 项目名 创建在线项目 vue init webpack 项目名 创建离线项目 第二步：在项目中下载element-ui的模板 cd pro01 cd 项目名 npm install element-ui -S ...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3928
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
qq_61686552的博客
06-16 851
前端 重点，重点，重点
bootstrap树形表格js插件
04-08
创建bootsstrap的树形表格，用于显示权限页面的树形结构
go.js实现表格树形连接
10-03
go.js实现:table格式展示数据，通过线连接多个table，体现表格上下或者从属关系。坑踩多了什么奇葩需求都有
js树形模板
11-30
原生js对于我来说确实用的很少，但是今天就想着把原生的js的一些基础知识重新复习一下，毕竟现在关于的原生js的一些插件再复杂也是万变不离其综。 先复习一下原生js的一些属性值的添加，替换，修改等。（其实添加和替换的效果差不多） 案例1：是添加替换input中的value值，更改button的value值
jquery 实现的树形表格结构
01-16
treeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。 优点 ◦兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari ◦接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以 ◦组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等 ◦提供两种风格: 通过参数来设置风格
树形表格 treetable 完整版 带演示demo例子
12-15
对网上的树形表格treeTable进行了二次开发扩展，带演示demo例子
html+js实现树形表格
最新发布
huaweichenai的博客
07-26 394
【代码】html+js实现树形表格。
js生成树形列表（一般用于菜单树结构的生成）
Lsir1998的博客
09-05 331
js无限生成属性结构
js-树形列表
felice_zhao的博客
12-30 958
测试数据： [{ id: 1, title: 'list-1' }, { id: 2, title: 'list-2', children: [{ id: 21, title: 'list-2-1' }, { id: 22, title
vue树形表格
weixin_49393290的博客
10-18 615
先来看一眼效果图 总结： 自己写代码的缺点表面描述的逻辑复杂了一些就难以静下来去思考以及搜寻资料，还是典型的学生思维，遇到不会的就想寻求帮助，自己不愿意以及难以思考。 是 ...
vue2.0 + vue-cli + element-ui：详解树形table实现
本文将详细介绍如何使用Vue 2.0结合vue-cli和element-ui创建一个树形treeTable组件。首先，我们回顾一下vue-cli的基础安装与项目结构生成。vue-cli是一个用于构建Vue项目的脚手架工具，全局安装后，通过`vue init ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值