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 () {
???//取消
?});
}
多层级表格js
原文地址：https://www.cnblogs.com/benbenjia/p/9176750.html