select2-to-tree
select2-to-tree copied to clipboard
Expand all
Is there any way to start the select fully expanded instead of collapsed?
Hi m found a solution for expanded all;
select2totree.js change buildOptions;
`function buildOptions(dataArr, curLevel, pup) { var labelPath; if (treeData.labelFld && treeData.labelFld.split('.').length> 1){ labelPath = treeData.labelFld.split('.'); } var idPath; if (treeData.valFld && treeData.valFld.split('.').length > 1) { idPath = treeData.valFld.split('.'); }
for (var i = 0; i < dataArr.length; i++) {
var data = dataArr[i] || {};
var $opt = $("<option></option>");
$opt.addClass('showme');
if (labelPath) {
$opt.text(readPath(data, labelPath));
} else {
$opt.text(data[treeData.labelFld || "text"]);
}
if (idPath) {
$opt.val(readPath(data, idPath));
} else {
$opt.val(data[treeData.valFld || "id"]);
}
if (data[treeData.selFld || "selected"] && String(data[treeData.selFld || "selected"]) === "true") {
$opt.prop("selected", data[treeData.selFld || "selected"]);
}
if($opt.val() === "") {
$opt.prop("disabled", true);
$opt.val(getUniqueValue());
}
$opt.addClass("l" + curLevel);
if (pup) $opt.attr("data-pup", pup);
$el.append($opt);
var inc = data[treeData.incFld || "inc"];
if (inc && inc.length > 0) {
$opt.addClass('opened');
$opt.addClass("non-leaf");
buildOptions(inc, curLevel+1, $opt.val());
}
} // end 'for'
}`
That will break collapsing nodes (they disappear if you click on them). Here's how to fix that:
diff --git a/select2totree.js b/select2totree.js
index 11dfa0d4c..dc3dbbf96 100644
--- a/select2totree.js
+++ b/select2totree.js
@@ -93,6 +93,8 @@
for (var i = 0; i < dataArr.length; i++) {
var data = dataArr[i] || {};
var $opt = $("<option></option>");
+ if (treeData['expandAll'] == true)
+ $opt.addClass('showme');
if (labelPath) {
$opt.text(readPath(data, labelPath));
} else {
@@ -116,6 +118,8 @@
var inc = data[treeData.incFld || "inc"];
if (inc && inc.length > 0) {
$opt.addClass("non-leaf");
+ if (treeData['expandAll'] == true)
+ $opt.addClass("opened");
buildOptions(inc, curLevel+1, $opt.val());
}
} // end 'for'
Then just use treeData: { expandAll: true, dataArr: data }.