bbtreeview.js

@@ -1,6 +1,6 @@
 /**
  * BBTreeview
- * @version v0.1.1.006 (2023/09/27 2218)
+ * @version v0.1.0.244 (2023/09/11 2327)
  */
 function BBTreeview(options)
 {
@@ -65,8 +65,7 @@ BBTreeview.prototype.Default = function() {
       ID: null,
       ShowCheckbox: false,
       ShowSelection: true,
-      EnablePullUp: false,
+      EnablePullUp: false
-      ShowIcon: true
     },
     TreeNodeOptions: {
       ID: null,
@@ -296,13 +295,8 @@ BBTreeview.prototype.generateNodeHtml = function(options) {
     html += '<div class="icon checkbox"></div>';
   }
 
-  if (a.Options.ShowIcon) {
+  html += '<div class="icon ' + options.Icon + '"></div>';
-    html += '<div class="icon ' + options.Icon + '"></div>';
+  html += '<span title="' + options.Hint + '">' + options.Name + '</span>';
-    html += '<span title="' + options.Hint + '">' + options.Name + '</span>';
-  } else {
-    html += '<span class="noicon" title="' + options.Hint + '">' + options.Name + '</span>';
-  }
-
   html += '</div>';
   html += '<ul></ul>';
   html += '</li>';

bbtreeview.min.css

@@ -1,5 +1,5 @@
 /**
  * BBTreeview
- * @version v0.1.1.006 (2023/09/27 2218)
+ * @version v0.1.0.223 (2023/09/08 2027)
  */
- ul.bbtreeview{background-image:url(line.png);background-position:4px 8px;background-repeat:repeat-y;list-style:none;padding:0;margin:0 0 0 8px}ul.bbtreeview ul{background-image:url(line.png);background-position:4px 8px;background-repeat:repeat-y;list-style:none;margin:0 0 0 8px;padding:0}ul.bbtreeview li{background-position:0 calc((1.2em - 9px)/ 2);background-repeat:no-repeat;cursor:default;display:block;padding-left:14px;width:100%}ul.bbtreeview li.c{background-image:url(expand.png)}ul.bbtreeview li.e{background-image:url(collapse.png)}ul.bbtreeview li.hidden{display:none}ul.bbtreeview div.li{display:block;height:1.2em;padding-left:4px}ul.bbtreeview div.li.highlighted{background-color:rgb(169,201,249,.7)}ul.bbtreeview div.li>div.icon{background-position:0 center;background-repeat:no-repeat;display:inline-block;height:100%;width:calc(16px)}ul.bbtreeview div.li>div.folder{background-image:url(folder.png)}ul.bbtreeview li>div.li>div.checkbox{background-image:url(uncheckbox.png)}ul.bbtreeview li.x>div.li>div.checkbox{background-image:url(checkbox.png)}ul.bbtreeview div.li>span{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;padding-left:6px;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}ul.bbtreeview div.li>span.noicon{padding-left:0!important}
+ ul.bbtreeview{background-image:url(line.png);background-position:4px 8px;background-repeat:repeat-y;list-style:none;padding:0;margin:0 0 0 8px}ul.bbtreeview ul{background-image:url(line.png);background-position:4px 8px;background-repeat:repeat-y;list-style:none;margin:0 0 0 8px;padding:0}ul.bbtreeview li{background-position:0 calc((1.2em - 9px)/ 2);background-repeat:no-repeat;cursor:default;display:block;padding-left:14px;width:100%}ul.bbtreeview li.c{background-image:url(expand.png)}ul.bbtreeview li.e{background-image:url(collapse.png)}ul.bbtreeview li.hidden{display:none}ul.bbtreeview div.li{display:block;height:1.2em;padding-left:4px}ul.bbtreeview div.li.highlighted{background-color:rgb(169,201,249,.7)}ul.bbtreeview div.li>div.icon{background-position:0 center;background-repeat:no-repeat;display:inline-block;height:100%;width:calc(16px)}ul.bbtreeview div.li>div.folder{background-image:url(folder.png)}ul.bbtreeview li>div.li>div.checkbox{background-image:url(uncheckbox.png)}ul.bbtreeview li.x>div.li>div.checkbox{background-image:url(checkbox.png)}ul.bbtreeview div.li>span{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;padding-left:6px;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}

demo-test.html

@@ -10,10 +10,10 @@
   <!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
   <!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
 
-  <!-- <link href="bbtreeview.css" rel="stylesheet" />
+  <!-- <link href="src/bbtreeview.css" rel="stylesheet" /> -->
-  <script src="bbtreeview.js"></script>
-  <script src="bbtreeviewnode.js"></script> -->
   <link href="bbtreeview.min.css" rel="stylesheet" />
+  <!-- <script src="bbtreeview.js"></script> -->
+  <!-- <script src="bbtreeviewnode.js"></script> -->
   <script src="bbtreeview.min.js"></script>
 
   <title></title>
@@ -34,7 +34,6 @@
       <p><button onclick="CreateTreeview(1)">Create Treeview (Checkbox and Selection)</button></p>
       <p><button onclick="CreateTreeview(2)">Create Treeview (Checkbox, Hide Selection, Enable Pull-Ups)</button></p>
       <p><button onclick="CreateTreeview(3)">Create Treeview (No Checkbox, Selection)</button></p>
-      <p><button onclick="CreateTreeview(4)">Create Treeview (No Checkbox, No Icons, Selection)</button></p>
 
     </div>
     <div class="panel">
@@ -95,13 +94,11 @@
   <style>
 
 body {
-  padding: 10px;
+  padding: 20px;
 }
 
 .column {
-  float: left;
+  width: 50%; min-height:400px; float: left
-  min-height: 400px;
-  width: 50%;
 }
 
 .panel {
@@ -149,22 +146,10 @@ function CreateTreeview(value){
         EnablePullUp: false
       });
 
-      break;
-    case 4:
-      window.treeview1 = new BBTreeview({
-        ID: "#treeview1",
-        ShowCheckbox: false,
-        ShowSelection: true,
-        EnablePullUp: false,
-        ShowIcon: false
-      });
-
       break;
     default:
       break;
   }
-
-  LoadTreeview();
 }
 
 function LoadTreeview(){

src/bbtreeview.css

@@ -70,7 +70,3 @@ ul.bbtreeview div.li > span {
   vertical-align: top;
   white-space: nowrap;
 }
-
-ul.bbtreeview div.li > span.noicon {
-  padding-left: 0px !important;
-}