组织树题型设计

最新推荐文章于 2024-02-18 10:23:55 发布

蛋蛋的忧伤ss

最新推荐文章于 2024-02-18 10:23:55 发布

阅读量4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/dongchengxuyuan/article/details/88840778

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #qtreeContent .folderContent{
               margin-left: 100px;
           }

           #qtreeContent .addBranchBtn{
               margin-left: 100px;
           }

       </style>
</head>
   <body>
       <div>
           <button id='createQtreeBtn'>新建树根</button>
           <div id='qtreeContent'>
           </div>
       </div>
       <script>
       /**
       * 创建组织树题型方法
       * @param {Element} qtreeContent 存放组织树的div元素
       */
           function QtreeUtil(qtreeContent){
               this.qtreeContent = qtreeContent;//存放组织树内容区域
           }

           /**
           * 添加树枝
           */
           QtreeUtil.prototype.addFolder = function(content){
           var root = document.createElement('div');
           root.classList.add('folder');
           //树展开关闭按钮
           this.operateBranch(root);
           //树标题输入区域
           var titleContent = document.createElement('input');
           titleContent.classList.add('title')
           titleContent.placeholder = '请输入标题';
           root.appendChild(titleContent);
           //添加内容区域
           var folderContent = document.createElement('div');
           folderContent.classList.add('folderContent');
           //添加树枝按钮组件
           this.addBranch(root);
           //添加题目按钮组件
           this.addQuestion(root);
           //删除树枝组件
           this.delBranch(root);
           content.appendChild(root);
           content.appendChild(folderContent);
           }

           /**
           * 展开关闭树组件
           * @param {Element} content 存放内容区域
           */
           QtreeUtil.prototype.operateBranch = function(content){
               var operateBranch = document.createElement('span');
               operateBranch.innerHTML = '关闭';
               operateBranch.classList.add('operateBranch');
               content.appendChild(operateBranch);
               var that = this;
               operateBranch.onclick = function(event){
                   that.operateBranchFun(this);
               }
           }

           /**
           * 递归方法
           * @param {Element} operateElement 打开关闭树元素
           * @param {qtree} qtreeElement 对象元素
           */
           QtreeUtil.prototype.operateBranchFun = function(operateElement){
               var branchContent = operateElement.parentNode.nextSibling;
                   if(operateElement.innerHTML=='打开'){
                       operateElement.innerHTML='关闭';
                       branchContent.style.display = 'block';
                       var folderChildren = branchContent.querySelectorAll('.folderContent');
                       for(var i = 0 ; i < folderChildren.length ; i++){
                           folderChildren[i].style.display = 'block';
                       }
                       var opearateBranchChildren = branchContent.querySelectorAll('.operateBranch');
                       for(var i = 0 ; i < opearateBranchChildren.length ; i ++){
                           opearateBranchChildren[i].innerHTML='关闭';
                       }
                   }else{
                       operateElement.innerHTML='打开';
                       branchContent.style.display = 'none';
                       var folderChildren = branchContent.querySelectorAll('.folderContent');
                       for(var i = 0 ; i < folderChildren.length ; i++){
                           folderChildren[i].style.display = 'none';
                       }
                       var opearateBranchChildren = branchContent.querySelectorAll('.operateBranch');
                       for(var i = 0 ; i < opearateBranchChildren.length ; i ++){
                           opearateBranchChildren[i].innerHTML='打开';
                       }
                   }
           }

           /**
           * 添加树枝组件
           * @param {Element} content 存放内容区域
           */
           QtreeUtil.prototype.addBranch = function(content){
               //添加树枝按钮
           var addBranch = document.createElement('button');
           addBranch.classList.add('addBranchBtn');
           addBranch.innerHTML = '添加树枝';
           var that = this;
           addBranch.onclick = function(event){
               var addContent = this.parentNode.nextSibling;
               that.addFolder(addContent);
           }
           content.appendChild(addBranch);
           }

           /**
           * 删除树枝组件
           * @param {Element} content 存放内容区域
           */
           QtreeUtil.prototype.delBranch = function(content){
               var delBranch = document.createElement('button');
               delBranch.classList.add('delBranch');
               delBranch.innerHTML = '删除树枝';
               delBranch.onclick = function(event){
                   var branch = this.parentNode;
                   var branchContent = this.parentNode.nextSibling;
                   this.parentNode.parentNode.removeChild(branchContent);
                   this.parentNode.parentNode.removeChild(branch);
               }
               content.appendChild(delBranch);
           }

           /**
           * 添加题目按钮组件
           * @param {Element} content 存放内容区域
           */
           QtreeUtil.prototype.addQuestion = function(content){
               var that = this;
               //添加题型下拉框
           var select = document.createElement('select');
           select.classList.add('questionTypeDropDown');
           select.options.add(new Option('单选','singleChoice'));
           select.options.add(new Option('多选','multiChoice'));
           select.options.add(new Option('单行文本','singleInput'));
           select.options.add(new Option('多行文本','multiInput'));
           content.appendChild(select);
           //添加题型按钮
           var addQuestion = document.createElement('button');
           addQuestion.classList.add('addQuestionBtn');
           addQuestion.innerHTML = '添加题目';
           content.appendChild(addQuestion);
           addQuestion.onclick = function(event){
               var selectElement = this.previousSibling;
var selectIndex = selectElement.selectedIndex;
var questionType = selectElement.options[selectIndex].value;
var content = this.parentNode.nextSibling;
               switch(questionType){
                   case 'singleChoice'://添加单选题目
                   that.addSingleChoice(content);
                   break;
                   case 'multiChoice'://多选题目
                   that.addMultiChoice(content);
                   break;
                   case 'singleInput'://添加单行文本
                   that.addSingleInput(content);
                   break;
                   case 'multiInput'://添加单行文本
                   that.addMultiInput(content);
                   break;
               }

           }
           }

           /**
           * 添加单选题目
           * @param {Element} content 存放内容区域
           */
           QtreeUtil.prototype.addSingleChoice = function(content){
               var questionContent = document.createElement('div');
               questionContent.classList.add('questionContent');
               questionContent.dataset.questionType = 'singleChoice';
               //标题区域
               var titleContent = document.createElement('input');
           titleContent.classList.add('title')
           titleContent.placeholder = '请输入标题';
           questionContent.appendChild(titleContent);
               //加载工具区域toobar
               var toobar = document.createElement('div');
               toobar.classList.add('toobarContent');
               questionContent.appendChild(toobar);
               //添加选项
               var addSingleChoiceBtn = document.createElement('button');
               addSingleChoiceBtn.classList.add('addSingleChoiceBtn');
               addSingleChoiceBtn.innerHTML = '添加单选选项';
               toobar.appendChild(addSingleChoiceBtn);
               addSingleChoiceBtn.onclick = function(event){
                   var content = this.parentNode.nextSibling;
                   var singleItem = document.createElement('div');
                   singleItem.innerHTML = '<div class="singleItem"><input type="text" placeholder="key"/><span>:</span><input type="text" placeholder="value"/><button class="delSingleBtn">删除</button></div>'
                   singleItem.querySelector('.delSingleBtn').onclick = function(event){
                       this.parentNode.parentNode.removeChild(this.parentNode);
                   }
                   content.appendChild(singleItem);
               }
               //删除题目
               var delQuestionContent = document.createElement('button');
               delQuestionContent.classList.add('delSingleChoiceBtn');
               delQuestionContent.innerHTML = '删除本题';
               toobar.appendChild(delQuestionContent);
               delQuestionContent.onclick = function(event){
                   this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
               }
               //内容区域
               var questionItem = document.createElement('div');
               questionItem.classList.add('questionItem');
               questionContent.appendChild(questionItem);
               content.appendChild(questionContent);
           }

           /**
           * 添加多选题目
           * @param {Element} content 存放内容区域
           */
           QtreeUtil.prototype.addMultiChoice = function(content){
               var questionContent = document.createElement('div');
               questionContent.classList.add('questionContent');
               questionContent.dataset.questionType = 'multiChoice';
               //标题区域
               var titleContent = document.createElement('input');
           titleContent.classList.add('title')
           titleContent.placeholder = '请输入标题';
           questionContent.appendChild(titleContent);
               //加载工具区域toobar
               var toobar = document.createElement('div');
               toobar.classList.add('toobarContent');
               questionContent.appendChild(toobar);
               //添加选项
               var addMultiChoiceBtn = document.createElement('button');
               addMultiChoiceBtn.classList.add('delMultiChoiceBtn');
               addMultiChoiceBtn.innerHTML = '添加多选选项';
               toobar.appendChild(addMultiChoiceBtn);
               addMultiChoiceBtn.onclick = function(event){
                   var content = this.parentNode.nextSibling;
                   var multiItem = document.createElement('div');
                   multiItem.innerHTML = '<div class="multiItem"><input type="text" placeholder="key"/><span>:</span><input type="text" placeholder="value"/><button class="delMultiBtn">删除</button></div>'
                   multiItem.querySelector('.delMultiBtn').onclick = function(event){
                       this.parentNode.parentNode.removeChild(this.parentNode);
                   }
                   content.appendChild(multiItem);
               }
               //删除题目
               var delQuestionContent = document.createElement('button');
               delQuestionContent.classList.add('delMultiChoiceBtn');
               delQuestionContent.innerHTML = '删除本题';
               toobar.appendChild(delQuestionContent);
               delQuestionContent.onclick = function(event){
                   this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
               }
               //内容区域
               var questionItem = document.createElement('div');
               questionItem.classList.add('questionItem');
               questionContent.appendChild(questionItem);
               content.appendChild(questionContent);
           }

           var createQtbtn = document.getElementById('createQtreeBtn');
           var qtreeContent = document.getElementById('qtreeContent');
           var qtree = new QtreeUtil(qtreeContent)
           createQtbtn.onclick = function(){
               qtree.addFolder(qtree.qtreeContent);
           }

       /**
           * 添加单行文本题目
           * @param {Element} content 存放内容区域
           */
           QtreeUtil.prototype.addSingleInput = function(content){
               var questionContent = document.createElement('div');
               questionContent.classList.add('questionContent');
               questionContent.dataset.questionType = 'singleInput';
               //标题区域
               var titleContent = document.createElement('input');
           titleContent.classList.add('title')
           titleContent.placeholder = '请输入标题';
           questionContent.appendChild(titleContent);
               //加载工具区域toobar
               var toobar = document.createElement('div');
               toobar.classList.add('toobarContent');
               questionContent.appendChild(toobar);
               //删除题目
               var delQuestionContent = document.createElement('button');
               delQuestionContent.classList.add('delSingleInputBtn');
               delQuestionContent.innerHTML = '删除本题';
               toobar.appendChild(delQuestionContent);
               delQuestionContent.onclick = function(event){
                   this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
               }
               //内容区域
               var questionItem = document.createElement('div');
               //放置input
               var singleInput = document.createElement('input');
               singleInput.type='text';
               singleInput.classList.add('singleInput');
               singleInput.readOnly = true;
               singleInput.placeholder='单行文本';
               questionItem.appendChild(singleInput);
               questionItem.classList.add('questionItem');
               questionContent.appendChild(questionItem);
               content.appendChild(questionContent);
           }

           /**
           * 添加多行文本题目
           * @param {Element} content 存放内容区域
           */
           QtreeUtil.prototype.addMultiInput = function(content){
               var questionContent = document.createElement('div');
               questionContent.classList.add('questionContent');
               questionContent.dataset.questionType = 'multiInput';
               //标题区域
               var titleContent = document.createElement('input');
           titleContent.classList.add('title')
           titleContent.placeholder = '请输入标题';
           questionContent.appendChild(titleContent);
               //加载工具区域toobar
               var toobar = document.createElement('div');
               toobar.classList.add('toobarContent');
               questionContent.appendChild(toobar);
               //删除题目
               var delQuestionContent = document.createElement('button');
               delQuestionContent.classList.add('delMultiInputBtn');
               delQuestionContent.innerHTML = '删除本题';
               toobar.appendChild(delQuestionContent);
               delQuestionContent.onclick = function(event){
                   this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
               }
               //内容区域
               var questionItem = document.createElement('div');
               //放置input
               var multiInput = document.createElement('textarea');
               multiInput.classList.add('multiInput');
               multiInput.readOnly = true;
               multiInput.placeholder='多行文本';
               multiInput.rows =2
               multiInput.cols =40;
               questionItem.appendChild(multiInput);
               questionItem.classList.add('questionItem');
               questionContent.appendChild(questionItem);
               content.appendChild(questionContent);
           }

           var createQtbtn = document.getElementById('createQtreeBtn');
           var qtreeContent = document.getElementById('qtreeContent');
           var qtree = new QtreeUtil(qtreeContent)
           createQtbtn.onclick = function(){
               qtree.addFolder(qtree.qtreeContent);
           }
       </script>
   </body>
</html>