多层级表格js

Posted 2020-11-17 笨笨！

self.FishConfigList = ko.observableArray();
self.GetFishConfigList = function (dept_code, report_id) {
  self.FishConfigList.removeAll();
  var objdata = { DEPT_CODE: dept_code, REPORT_ID: report_id };

  KEAPIHelper.GetMeaasge(new ActionUrl.Quality().GetFishConfigList, objdata, function (data) {
    //Success

    if (data.Data) {
      self.FishConfigList(data.Data);





      //将数据加载进来
      var _data = $.map(data.Data, function(item) {
        return item;
      });
      function loadhtml(_data){
        var str = ‘‘;
        $.each(_data,function(i, item) {
          var _string = ‘‘;
          var _strings = ‘‘;
         if(item.WIDGETLIST==null){
           
         }else{
           $.each(item.WIDGETLIST,function(i, ite){
             _string += ite.WIDGET_NAME+‘$‘;
             _strings+= ite.WIDGET_ID+‘$‘;
           });
         }
          var pid = item.PARENT_ID ? ‘data-tt-parent-id=‘ + item.PARENT_ID : ‘‘;
          str += ‘<tr data-tt-id="‘ + item.ID + ‘" ‘ + pid + ‘   data-tt-branch="‘ + (item.LEAF ? "false" : "true") + ‘">‘ +
            ‘<td class="titles" data-select="‘+ _string +‘" , data-widid="‘+ _strings +‘">‘ +
            (item.LEAF ? ‘<span class="file" style=" padding: 13px 0 13px 0;"></span>‘ : ‘<span class="folder"  style=" padding: 13px 0 13px 0;"></span>‘) + item.FISH_NAME + ‘</td>‘ +
            ‘<td  class="active show-name">‘ + item.FISH_SHOW_NAME + ‘</td>‘ +
            ‘<td class=" fish-level">‘ + item.FISH_LEVEL + ‘</td>‘ +
            ‘<td ><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>‘ +
            ‘</tr>‘;
        });
        return str;
      }



      var html = loadHtml(_data);
      //添加开始
      $(‘#example-basic‘).find(‘tbody‘).html(loadHtml(_data));


    $(function(){
      var counter = 0;
      //添加
      self.add = function add(e) {
        e.preventDefault();
        var id = $(this).closest("tr").data("ttId");
        var FISH_LEVEL = parseFloat($(this).closest("tr").find(‘td:eq(2)‘).text());
        var FISH_NAME = $(this).closest("tr").find(‘td:eq(0) input‘).val()|| $(this).closest("tr").find(‘td:eq(0)‘).text();
        var index = 0;

        //  换图标
        $.map(_data, function (item, i) {
          if (item.ID === id) {
            if (_data[i + 1] && typeof _data[i + 1].ID === ‘string‘) {
              counter = _data[i + 1].ID.split(‘-‘)[1];
            }
            _data[i].LEAF = false;
            index = i;
          }
        });

        // 请求新建选择项
        self.GetFishConfigSubList(FISH_NAME, FISH_LEVEL, function(data) {

          _data.splice(index + 1, 0, {
            PARENT_ID: id,
            FISH_LEVEL:FISH_LEVEL+1,
            ID: 0,
            REPORT_ID:0,
            FISH_NAME:‘请选择...‘,
            FISH_SHOW_NAME: ‘‘,
            LEAF: true,
            DEPT_CODE: "54",
            WIDGETLIST: $.extend({}, data),
          });

          console.log(_data);

          $(‘#example-basic‘).find(‘tbody‘).html(loadHtml(_data));

          $("#example-basic").treetable("destroy");

          $("#example-basic").treetable({expandable: true});
          //添加字节点，让点击的节点展开
          $("#example-basic").treetable("expandNode", id);

        });


      };
    });



      //添加结束
       $(‘#example-basic‘).find(‘tbody‘).html(html);
      //
       $("#example-basic").treetable("destroy");
      // //添加字节点，让点击的节点展开
      $("#example-basic").treetable({
        expandable: true,
        //展开
        onNodeExpand: function () {
          var node = this;
        }
      })
      //中间td添加input
        .on("click", "td.active", function () {
          var $input = $(this).find(‘input‘);
          var value = $(this).text();
          if ($input.length > 0) {
            value = $input.val();
            return;
          }
          $(this).html(‘<input> ‘);
          $(this).find(‘input‘).val(value).focus();
          //添加下拉菜单
        })
        //  第一列有按钮的td 添加input
        .on("click", "td.titles", function (e) {
          var $input = $(this).find(‘input‘);
          var value = $(this).text().trim();
          var $html = $(this).find(‘span‘).clone(true);
          if ($input.length > 0) {
            value = $input.val();
            return;
          }
          $(this).html(‘‘);
          $(this).append($html);
          $(this).append(‘<input type="text" style="max-width:56%;" disabled="disabled" / >‘);
          $(this).find(‘input‘).val(value).focus();
          // //添加下拉菜单
           $(this).append(‘<span class="icon-down" style="display:flex; z-index:25;  /*padding-left: 285px;*/ padding-left:80%;"></span><ul style="display: none;" class="drop-menus" ></ul>‘);
        if( $(this).attr(‘data-select‘)==‘‘){
          //第一行和倒数第一行没有数据
          $(this).find(‘ul.drop-menus‘).removeAttr(‘style‘);
           $(this).find(‘ul.drop-menus‘).attr(‘style‘,‘display:none‘);//没有隐藏
        }else if( $(this).attr(‘data-select‘)!==‘‘){
          //有数据行
          $(this).find(‘span.icon-down‘).show();
          console.log($(this).attr(‘data-select‘));
          $(this).attr(‘data-select‘).split(‘$‘);
          var arrs = $(this).attr(‘data-select‘).split(‘$‘);
          var liids = $(this).attr(‘data-widid‘).split(‘$‘);

          for(var i=0,j=0; i<arrs.length,j<liids.length; i++,j++){
          $(this).find(‘ul.drop-menus‘).append("<li class=‘drop-item‘ id="+liids[j]+ ">"+ arrs[i] +"</li>");
          }
        }
        })
        //  第一列有按钮的td 添加input
        .on("click", "td .del", self.delete)
        .on("click", "td .add", self.add)
        .on(‘click‘,‘td span.icon-down‘,function(e) {  //点击下拉按钮让ul显示，别的ul隐藏
          e.stopPropagation();
              // $(‘ul.drop-menus‘).hide();
              console.log($(this));
          var tds =$(this).closest(‘td‘)
          tds.parent().siblings().find(‘td:eq(0)‘).find(‘ul.drop-menus‘).hide();
          tds.find(‘li.drop-item‘).parent(‘ul.drop-menus‘).toggle();
         })
        .on(‘click‘,‘li.drop-item‘,function(e){  //点击li将值传input，同时让ul隐藏
          e.stopPropagation();
          var _this = $(this);
          var litext =_this.text();
          var inputVal =_this.closest(‘td‘).find(‘input‘);
          var tdText = _this.closest(‘td‘);
          inputVal.val(litext);
          _this.closest(‘td‘).find(‘ul.drop-menus‘).hide();
        })
        .on(‘click‘,‘tr‘,function(e){ //点击表格任意处让下拉菜单隐藏
          // e.stopPropagation();
          $(‘ul.drop-menus‘).hide();
        })

    }
    else {
      self.FishConfigList.removeAll();
    }
  }, function (e) {
    //error
    self.FishConfigList.removeAll();
  }, false);
};

//获取可选子项配置项list
self.FishConfigSubList = ko.observableArray();
self.GetFishConfigSubList = function (FISH_NAME, FISH_LEVEL, callback) {
  self.FishConfigSubList.removeAll();


  var objdata = { FISH_NAME: FISH_NAME, FISH_LEVEL: FISH_LEVEL, REPORT_ID: self.selected_report_id() };

  KEAPIHelper.GetMeaasge(new ActionUrl.Quality().GetFishConfigSubList, objdata, function (data) {
    //Success

    if (data.Data) {
      self.FishConfigSubList(data.Data);

      if(callback) {
        callback(data.Data);
      }
    }
    else {
      self.FishConfigSubList.removeAll();
    }
  }, function (e) {
    //error
    self.FishConfigSubList.removeAll();
  }, false);

}
//保存
self.save = function save() {
  console.log(‘1111111111111‘);
  var data = [];
  // 找出所有的行
  var $trArr = $("#example-basic tbody tr");
  // 循环每一行
  $.map($trArr, function(tr) {
    // 找出每一列
    var $tr = $(tr);
    var tdArr = $tr.children();
    // 当前列中的input
    var input = $tr.find(‘input‘);
    // 当前行中的数据
    var child = {};
    child.DEPT_CODE = self.dept_code();
    child.ID =  child.REPORT_ID = self.selected_report_id();
    // child.ID = $tr.attr(‘data-tt-id‘);
    child.PARENT_ID = $tr.attr(‘data-tt-parent-id‘);
    child.LEAF = $tr.attr(‘data-tt-branch‘);
    $.map(tdArr, function(td, i) {
      var $td = $(td);
      var ipt = $td.find(‘input‘);
      var text = (ipt.length > 0) ? ipt.val() : $td.text();
      if($td.hasClass(‘titles‘)) {
        child.FISH_NAME =text
      } else if($td.hasClass(‘show-name‘)) {
        child.FISH_SHOW_NAME = text

      } else if($td.hasClass(‘fish-level‘)) {
        child.FISH_LEVEL = text
      }
    });
    data.push(child);
  });
  //console.log(data, ‘this is data‘);
  return data;
};
//删除
self.delete = function () {
  var id = $(this).closest("td").parent().data("ttId");
  parent.layer.confirm(‘删除操作无法恢复，确定要删除所有子节点？‘, {
    btn: [‘删除‘, ‘取消‘], //按钮
    shade: true,
    shade:0.3,//不显示遮罩
  }, function () {
    //确定
      var objdata = { ID: id };
    KEAPIHelper.GetMeaasge(new ActionUrl.Quality().DeleteFishConfig, objdata, function (data) {
      //Success
      if (data.Data == true) {
        KECore.UI.success("删除成功");
        self.GetFishConfigList(self.dept_code(), self.selected_report_id());
      }
      else {
        KECore.UI.error("删除失败！");
      }
      layer.closeAll(‘dialog‘);//关闭弹出框
    }, function (e) {
      //error
      KECore.UI.error("删除失败！");
    }, false);
  }, function () {
    //取消
  });
}