Merge pull request #21 from clivezhg/cli_work

The release 1.2.0

Author: clivezhg

README.md

@@ -67,6 +67,7 @@ About the data structure: "`id`" will be used as option value, "`text`" will be
 - `labelFld`, the option label field, it's "`text`" by default.
 - `incFld`, the sub options field, it's "`inc`" by default.
 - `dftVal`, the default value.
+For `valFld` and `labelFld`, you can give a object path (eg: `item.label`. see "Example 4" in "example/example.html").
 
 For `valFld` and `labelFld` you can give a object path (ex: `item.label`), we split by `.`.
 

example/example.html

@@ -71,5 +71,30 @@ <h3>Example 3</h3>
 			else return state.text;
 		};
 	</script>
+
+	<br>
+
+	<h3>Example 4</h3>
+	<select id="sel_4" style="width:16em" multiple>
+	</select>
+	<script>
+		var mydata_path = [
+			{"organization": {"shortDescription":"The company A", "idCompanyOrganization":"1"}, "nodes":[
+				{"organization": {"shortDescription":"R & D", "idCompanyOrganization":"1_1"}, "nodes":[]
+				},
+				{"organization": {"shortDescription":"Marketing", "idCompanyOrganization":"1_2"},	"nodes":[
+					{"organization": {"shortDescription":"Asia",	"idCompanyOrganization":"1_2_1"}, "nodes":[
+						{"organization": {"shortDescription":"South-east Asia", "idCompanyOrganization":"1_2_2"}, "nodes":[]
+						}
+						]
+					}
+					]
+				}
+				]
+			}
+		];
+
+		$("#sel_4").select2ToTree({treeData: {dataArr: mydata_path, valFld: "organization.idCompanyOrganization", labelFld: "organization.shortDescription", incFld:'nodes'}, maximumSelectionLength: 3});
+	</script>
 </body>
 </html>

src/select2totree.css

@@ -6,119 +6,78 @@
 	box-sizing: border-box;
 }
 
-.s2-to-tree .select2-dropdown[dir*="ltr"] .select2-results__option.l1 {
+.s2-to-tree .select2-results__option.l1 {
 	margin-left: 0.6em;
 	font-size: 1em;
 }
-.s2-to-tree .select2-dropdown[dir*="ltr"] .select2-results__option.l2 {
+.s2-to-tree .select2-results__option.l2 {
 	margin-left: 1.4em;
 	font-size: 0.95em;
 }
-.s2-to-tree .select2-dropdown[dir*="ltr"] .select2-results__option.l3 {
+.s2-to-tree .select2-results__option.l3 {
 	margin-left: 2.2em;
 	font-size: 0.91em;
 }
-.s2-to-tree .select2-dropdown[dir*="ltr"] .select2-results__option.l4 {
+.s2-to-tree .select2-results__option.l4 {
 	margin-left: 3.0em;
 	font-size: 0.87em;
 }
-.s2-to-tree .select2-dropdown[dir*="ltr"] .select2-results__option.l5 {
+.s2-to-tree .select2-results__option.l5 {
 	margin-left: 3.8em;
 	font-size: 0.83em;
 }
-.s2-to-tree .select2-dropdown[dir*="ltr"] .select2-results__option.l6 {
+.s2-to-tree .select2-results__option.l6 {
 	margin-left: 4.5em;
 	font-size: 0.8em;
 }
-.s2-to-tree .select2-dropdown[dir*="ltr"] .select2-results__option.l7 {
+.s2-to-tree .select2-results__option.l7 {
 	margin-left: 5.3em;
 	font-size: 0.77em;
 }
-.s2-to-tree .select2-dropdown[dir*="ltr"] .select2-results__option.l8 {
+.s2-to-tree .select2-results__option.l8 {
 	margin-left: 6.0em;
 	font-size: 0.75em;
 }
 
-.s2-to-tree .select2-dropdown[dir*="ltr"] .item-label {
-	display: inline-block;
-	margin-left: 0.5em;
-	padding: 3px;
-	width: calc(100% - 11px); /* IE8 will fit the content */
-}
-
-.s2-to-tree .select2-dropdown[dir*="ltr"] li.select2-results__option.non-leaf .expand-collapse:before { /* no :: in IE8 */
-	content: "+";
-	position: absolute;
-	left: -0.35em;
-	top: 0.1em;
-	font-size: larger;
-}
-
-
-
-
-
-
-
 .s2-to-tree .select2-dropdown[dir*="rtl"] .select2-results__option.l1 {
 	margin-right: 0.6em;
-	font-size: 1em;
 }
 .s2-to-tree .select2-dropdown[dir*="rtl"] .select2-results__option.l2 {
 	margin-right: 1.4em;
-	font-size: 0.95em;
 }
 .s2-to-tree .select2-dropdown[dir*="rtl"] .select2-results__option.l3 {
 	margin-right: 2.2em;
-	font-size: 0.91em;
 }
 .s2-to-tree .select2-dropdown[dir*="rtl"] .select2-results__option.l4 {
 	margin-right: 3.0em;
-	font-size: 0.87em;
 }
 .s2-to-tree .select2-dropdown[dir*="rtl"] .select2-results__option.l5 {
 	margin-right: 3.8em;
-	font-size: 0.83em;
 }
 .s2-to-tree .select2-dropdown[dir*="rtl"] .select2-results__option.l6 {
 	margin-right: 4.5em;
-	font-size: 0.8em;
 }
 .s2-to-tree .select2-dropdown[dir*="rtl"] .select2-results__option.l7 {
 	margin-right: 5.3em;
-	font-size: 0.77em;
 }
 .s2-to-tree .select2-dropdown[dir*="rtl"] .select2-results__option.l8 {
 	margin-right: 6.0em;
-	font-size: 0.75em;
 }
 
-.s2-to-tree .select2-dropdown[dir*="rtl"] .item-label {
-	display: inline-block;
-	margin-right: 0.5em;
-	padding: 3px;
-	width: calc(100% - 11px); /* IE8 will fit the content */
+.s2-to-tree li.select2-results__option.non-leaf .expand-collapse:hover {
+	color: red;
+	cursor: pointer;
 }
-
-.s2-to-tree .select2-dropdown[dir*="rtl"] li.select2-results__option.non-leaf .expand-collapse:before { /* no :: in IE8 */
+.s2-to-tree li.select2-results__option.non-leaf .expand-collapse:before { /* no :: in IE8 */
 	content: "+";
 	position: absolute;
-	right: -0.35em;
+	left: -0.35em;
 	top: 0.1em;
 	font-size: larger;
 }
-
-
-
-
-
-
-
-.s2-to-tree li.select2-results__option.non-leaf .expand-collapse:hover {
-	color: red;
-	cursor: pointer;
+.s2-to-tree .select2-dropdown[dir*="rtl"] li.select2-results__option.non-leaf .expand-collapse:before {
+	right: -0.35em;
 }
-
 .s2-to-tree li.select2-results__option.non-leaf.opened .expand-collapse:before {
 	content: "−";
 }
@@ -127,6 +86,16 @@
 	color: black;
 }
 
+.s2-to-tree .item-label {
+	display: inline-block;
+	margin-left: 0.5em;
+	padding: 3px;
+	width: calc(100% - 11px); /* IE8 will fit the content */
+}
+.s2-to-tree .select2-dropdown[dir*="rtl"] .item-label {
+	margin-right: 0.5em;
+}
+
 .s2-to-tree li.select2-results__option {
 	position: relative;
 	padding: 0px;

src/select2totree.js

@@ -63,20 +63,23 @@
 		return s2inst;
 	};
 
-	function readPath(object, path){
-		var currentPosition = object;
-		for (var j = 0; j < path.length; j++) {
-			var currentPath = path[j];
-			if (currentPosition[currentPath]){
-			currentPosition = currentPosition[currentPath];
-			continue;
+ 	/* Build the Select Option elements */
+	function buildSelect(treeData, $el) {
+
+		/* Support the object path (eg: `item.label`) for 'valFld' & 'labelFld' */
+		function readPath(object, path) {
+			var currentPosition = object;
+			for (var j = 0; j < path.length; j++) {
+				var currentPath = path[j];
+				if (currentPosition[currentPath]) {
+					currentPosition = currentPosition[currentPath];
+					continue;
+				}
+				return 'MISSING';
 			}
-			return;
+			return currentPosition;
 		}
-		return currentPosition;
-	}
 
-	function buildSelect(treeData, $el) { // build Select options according to Select-to-Tree specification
 		function buildOptions(dataArr, curLevel, pup) {
 			var labelPath;
 			if (treeData.labelFld && treeData.labelFld.split('.').length> 1){
@@ -86,12 +89,13 @@
 			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>");
-				if (labelPath){
-					$opt.text(readPath(data,  labelPath));
-				}else {
+				if (labelPath) {
+					$opt.text(readPath(data, labelPath));
+				} else {
 					$opt.text(data[treeData.labelFld || "text"]);
 				}
 				if (idPath) {
@@ -114,8 +118,9 @@
 					$opt.addClass("non-leaf");
 					buildOptions(inc, curLevel+1, $opt.val());
 				}
-			}
-		}
+			} // end 'for'
+		} // end 'buildOptions'
+
 		buildOptions(treeData.dataArr, 1, "");
 		if (treeData.dftVal) $el.val(treeData.dftVal);
 	}