Multi-level table JS

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);





Load the data in
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. The LEAF? "False": "true") + ' "> ' +
' <td class= ' titles "data-select=" ' + _string + ' ", data-widid=" ' + _strings + ' "> ' +
(item. The 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 ' > Delete </a> <a href= ' # ' class= ' Add ' > Add child nodes </a></td> ' +
' </tr> ';
});
return str;
}



var html = loadhtml (_data);
Add start
$ (' #example-basic '). Find (' tbody '). HTML (loadhtml (_data));


$ (function () {
var counter = 0;
Add to
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;

Change Icon
$.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;
}
});

Request New Selection
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: ' Please select ... ',
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});
Add a byte point and let the clicked node unfold
$ ("#example-basic"). Treetable ("Expandnode", id);

});


};
});



Add End
$ (' #example-basic '). Find (' tbody '). HTML (HTML);
//
$ ("#example-basic"). Treetable ("destroy");
Add a byte point and let the clicked node unfold
$ ("#example-basic"). Treetable ({
Expandable:true,
Expand
Onnodeexpand:function () {
var node = this;
}
})
Intermediate TD Add 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 ();
Add drop-down menu
})
The first column has the button TD add 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 ();
Add drop-down menu
$ (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 ') = = ") {
The first line and the penultimate line have no data
$ (this). Find (' Ul.drop-menus '). Removeattr (' style ');
$ (this). Find (' Ul.drop-menus '). attr (' style ', ' display:none ');//No Hidden
}else if ($ (this). attr (' data-select ')!== ') {
There are data rows
$ (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>");
}
}
})
The first column has the button TD add input
. On ("Click", "TD. Del", Self.delete)
. On ("Click", "TD. Add", Self.add)
. On (' Click ', ' TD Span.icon-down ', function (e) {//Click the drop-down button to let UL display, other UL hidden
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) {//Click Li to pass the value to input while letting ul hide
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) {//Click anywhere in the table to hide the drop-down menu
E.stoppropagation ();
$ (' Ul.drop-menus '). Hide ();
})

}
else {
Self. Fishconfiglist.removeall ();
}
}, Function (e) {
Error
Self. Fishconfiglist.removeall ();
}, False);
};

Get Optional subkey configuration Item 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);

}
Save
Self.save = function Save () {
Console.log (' 1111111111111 ');
var data = [];
Find out all the rows
var $TRARR = $ ("#example-basic tbody tr");
Loop each line
$.map ($TRARR, function (TR) {
Find each column
var $tr = $ (TR);
var Tdarr = $tr. Children ();
Input in the current column
var input = $tr. Find (' input ');
Data in the current row
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;
};
Delete
Self.delete = function () {
var id = $ (this). Closest ("TD"). Parent (). Data ("Ttid");
Parent.layer.confirm (' delete operation cannot be recovered, OK to delete all child nodes? ‘, {
BTN: [' delete ', ' Cancel '],//button
Shade:true,
shade:0.3,//do not display masks
}, function () {
Are you sure
var objdata = {Id:id};
Keapihelper.getmeaasge (New Actionurl.quality (). Deletefishconfig, Objdata, function (data) {
Success
if (data. Data = = True) {
KECore.UI.success ("delete succeeded");
Self. Getfishconfiglist (Self.dept_code (), self.selected_report_id ());
}
else {
KECore.UI.error ("Delete failed! ");
}
Layer.closeall (' dialog ');//close pop-up box
}, Function (e) {
Error
KECore.UI.error ("Delete failed! ");
}, False);
}, function () {
Cancel
});
}

Multi-level table JS