Added mode to check parent if any child is checked
This commit is contained in:
Ray
parent
163e224ebd
commit
3f2bea3365
5
bbtreeview.min.js
vendored
5
bbtreeview.min.js
vendored
File diff suppressed because one or more lines are too long
@ -31,26 +31,29 @@
|
||||
<div class="column">
|
||||
<div class="panel">
|
||||
|
||||
<p>Create demo treeview with checkboxes and selection enabled</p>
|
||||
<button onclick="CreateTreeview()">Create Treeview</button>
|
||||
<p>Create demo treeview</p>
|
||||
<button onclick="CreateTreeview(1)">Create Treeview (Checkbox and Selection)</button>
|
||||
<button onclick="CreateTreeview(2)">Create Treeview (Checkbox, Hide Selection, Check Parent if Any Child Checked)</button>
|
||||
|
||||
</div>
|
||||
<div class="panel">
|
||||
|
||||
<p>Load sample nodes</p>
|
||||
<button onclick="LoadTreeview()">Load Treeview</button>
|
||||
|
||||
</div>
|
||||
<div class="panel">
|
||||
|
||||
<p>Clear treeview</p>
|
||||
<p>
|
||||
<button onclick="ClearTreeview()">Clear Treeview</button>
|
||||
|
||||
</div>
|
||||
<div class="panel">
|
||||
|
||||
<p>Remove the "Program Files" treenode</p>
|
||||
<button onclick="RemoveTreeNode()">Remove Treenode</button>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="panel">
|
||||
|
||||
<p>Find a treenode</p>
|
||||
<p>
|
||||
<button onclick="FindTreeNode()">Find Treenode By ID</button>
|
||||
<button onclick="FindTreeNodesByName()">Find Treenode By Name</button>
|
||||
<button onclick="FindTreeNodesByValue()">Find Treenode By Value</button>
|
||||
@ -111,16 +114,33 @@ body {
|
||||
|
||||
<script>
|
||||
|
||||
var treeview1 = new BBTreeview({
|
||||
function CreateTreeview(value){
|
||||
switch (value) {
|
||||
case 1:
|
||||
window.treeview1 = new BBTreeview({
|
||||
ID: "#treeview1",
|
||||
ShowCheckbox: true,
|
||||
ShowSelection: true
|
||||
});
|
||||
});
|
||||
|
||||
break;
|
||||
case 2:
|
||||
window.treeview1 = new BBTreeview({
|
||||
ID: "#treeview1",
|
||||
ShowCheckbox: true,
|
||||
ShowSelection: false,
|
||||
CheckParentAny: true
|
||||
});
|
||||
|
||||
function CreateTreeview(){
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
treeview1.AddItem({
|
||||
function LoadTreeview(){
|
||||
|
||||
window.treeview1.AddItem({
|
||||
ID: "root",
|
||||
Name: "C:\\"
|
||||
});
|
||||
@ -135,7 +155,7 @@ function CreateTreeview(){
|
||||
];
|
||||
|
||||
for (let i=0; i<folders1.length; i++) {
|
||||
treeview1.AddItem({
|
||||
window.treeview1.AddItem({
|
||||
ID: "0_" + i,
|
||||
ParentID: "root",
|
||||
Name: folders1[i],
|
||||
@ -152,7 +172,7 @@ function CreateTreeview(){
|
||||
];
|
||||
|
||||
for (let i=0; i<folders12.length; i++) {
|
||||
treeview1.AddItem({
|
||||
window.treeview1.AddItem({
|
||||
ID: "0_2_" + i,
|
||||
ParentID: "0_2",
|
||||
Name: folders12[i],
|
||||
@ -166,7 +186,7 @@ function CreateTreeview(){
|
||||
];
|
||||
|
||||
for (let i=0; i<folders13.length; i++) {
|
||||
treeview1.AddItem({
|
||||
window.treeview1.AddItem({
|
||||
ID: "0_3_" + i,
|
||||
ParentID: "0_3",
|
||||
Name: folders13[i],
|
||||
@ -181,7 +201,7 @@ function CreateTreeview(){
|
||||
];
|
||||
|
||||
for (let i=0; i<folders15.length; i++) {
|
||||
treeview1.AddItem({
|
||||
window.treeview1.AddItem({
|
||||
ID: "0_5_" + i,
|
||||
ParentID: "0_5",
|
||||
Name: folders15[i],
|
||||
@ -189,7 +209,7 @@ function CreateTreeview(){
|
||||
});
|
||||
}
|
||||
|
||||
treeview1.AddItem({
|
||||
window.treeview1.AddItem({
|
||||
ID: "0_2_3_0",
|
||||
ParentID: "0_2_3",
|
||||
Name: "en-GB",
|
||||
@ -199,15 +219,15 @@ function CreateTreeview(){
|
||||
}
|
||||
|
||||
function ClearTreeview() {
|
||||
treeview1.Clear();
|
||||
window.treeview1.Clear();
|
||||
}
|
||||
|
||||
function RemoveTreeNode() {
|
||||
treeview1.Remove("0_2");
|
||||
window.treeview1.Remove("0_2");
|
||||
}
|
||||
|
||||
function FindTreeNode() {
|
||||
let treenode = treeview1.Find("0_5");
|
||||
let treenode = window.treeview1.Find("0_5");
|
||||
|
||||
console.log(treenode);
|
||||
|
||||
@ -215,7 +235,7 @@ function FindTreeNode() {
|
||||
}
|
||||
|
||||
function FindTreeNodesByName() {
|
||||
let treenodes = treeview1.FindByName("Common Files");
|
||||
let treenodes = window.treeview1.FindByName("Common Files");
|
||||
|
||||
console.log(treenodes);
|
||||
|
||||
@ -223,7 +243,7 @@ function FindTreeNodesByName() {
|
||||
}
|
||||
|
||||
function FindTreeNodesByValue() {
|
||||
let treenodes = treeview1.FindByValue("Internet Explorer");
|
||||
let treenodes = window.treeview1.FindByValue("Internet Explorer");
|
||||
|
||||
console.log(treenodes);
|
||||
|
||||
@ -231,7 +251,7 @@ function FindTreeNodesByValue() {
|
||||
}
|
||||
|
||||
function GetSelectedTreeNode() {
|
||||
let treenode = treeview1.GetSelectedNode();
|
||||
let treenode = window.treeview1.GetSelectedNode();
|
||||
|
||||
console.log(treenode);
|
||||
|
||||
@ -239,7 +259,7 @@ function GetSelectedTreeNode() {
|
||||
}
|
||||
|
||||
function GetCheckedTreeNodes() {
|
||||
let treenodes = treeview1.GetCheckedNodes();
|
||||
let treenodes = window.treeview1.GetCheckedNodes();
|
||||
|
||||
console.log(treenodes);
|
||||
|
||||
@ -247,7 +267,7 @@ function GetCheckedTreeNodes() {
|
||||
}
|
||||
|
||||
function GetAllTreeNodes() {
|
||||
let treenodes = treeview1.GetAllNodes();
|
||||
let treenodes = window.treeview1.GetAllNodes();
|
||||
|
||||
console.log(treenodes);
|
||||
|
||||
@ -255,7 +275,7 @@ function GetAllTreeNodes() {
|
||||
}
|
||||
|
||||
function GetCheckedValues() {
|
||||
let treenodes = treeview1.GetCheckedValues();
|
||||
let treenodes = window.treeview1.GetCheckedValues();
|
||||
|
||||
console.log(treenodes);
|
||||
|
||||
@ -263,19 +283,19 @@ function GetCheckedValues() {
|
||||
}
|
||||
|
||||
function CollapseAll() {
|
||||
treeview1.CollapseAll();
|
||||
window.treeview1.CollapseAll();
|
||||
}
|
||||
|
||||
function ExpandAll() {
|
||||
treeview1.ExpandAll();
|
||||
window.treeview1.ExpandAll();
|
||||
}
|
||||
|
||||
function CheckAll() {
|
||||
treeview1.CheckAll(true);
|
||||
window.treeview1.CheckAll(true);
|
||||
}
|
||||
|
||||
function UncheckAll() {
|
||||
treeview1.CheckAll(false);
|
||||
window.treeview1.CheckAll(false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* BBTreeview
|
||||
* @version v0.1.0.223 (2023/09/08 2027)
|
||||
* @version v0.1.0.244 (2023/09/11 2327)
|
||||
*/
|
||||
function BBTreeview(options)
|
||||
{
|
||||
@ -64,7 +64,8 @@ BBTreeview.prototype.Default = function() {
|
||||
TreeviewOptions: {
|
||||
ID: null,
|
||||
ShowCheckbox: false,
|
||||
ShowSelection: true
|
||||
ShowSelection: true,
|
||||
CheckParentAny: false
|
||||
},
|
||||
TreeNodeOptions: {
|
||||
ID: null,
|
||||
@ -116,6 +117,11 @@ BBTreeview.prototype.CheckAll = function(value) {
|
||||
BBTreeview.prototype.Find = function(id) {
|
||||
const a = this;
|
||||
|
||||
if (a.Container == null){
|
||||
console.log("BBTreeview container not found");
|
||||
return;
|
||||
}
|
||||
|
||||
const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
|
||||
if (node.length <= 0) {
|
||||
return null;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* BBTreeview
|
||||
* @version v0.1.0.223 (2023/09/08 2027)
|
||||
* @version v0.1.0.244 (2023/09/11 2327)
|
||||
*/
|
||||
function BBTreeviewNode(treeview)
|
||||
{
|
||||
@ -45,6 +45,12 @@ BBTreeviewNode.prototype.Check = function(value) {
|
||||
// Update parent state
|
||||
if (a.GetParentNode() != null) {
|
||||
let uncheckedCount = 0;
|
||||
|
||||
if (a.Treeview.Options.CheckParentAny) {
|
||||
if (a.GetParentNode().querySelectorAll("li.x").length > 0) {
|
||||
uncheckedCount = 0;
|
||||
}
|
||||
} else {
|
||||
a.GetParentNode().querySelectorAll("li").forEach(function(e) {
|
||||
if (e.classList.contains("x")) {
|
||||
return;
|
||||
@ -52,6 +58,7 @@ BBTreeviewNode.prototype.Check = function(value) {
|
||||
|
||||
uncheckedCount++;
|
||||
});
|
||||
}
|
||||
|
||||
a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user