erhanfirat / combo-tree Goto Github PK
View Code? Open in Web Editor NEWComboTree is a jQuery Plugin which is a combobox item with tree structured data list and multi/single selection options and more.
License: MIT License
ComboTree is a jQuery Plugin which is a combobox item with tree structured data list and multi/single selection options and more.
License: MIT License
I'm using ComboTree to filter data in php. The way it currently works when cascading is, that the array of selected ids grows one by one and it then makes the Ajax call multiple times. I think it would be better if the selected ids (or names) are returned only after the array is fully built when cascading a selection. I tried to modify the code, but it's beyond my knowledge. Any help appreciated.
I'm not sure why this is happening, but if the JSON data lacks an ID for each element, the plugin still works well, but the downward pointing icon doesn't show up.
I don't want/need my data to have an ID, and don't want to synthesize one either.
Hello Erhanfirat,
Your plugin is great! However I has a problem when call Destroy method,
How to call the destroy function properly?
I use your demo code but it did not perform successfully:
var SampleJSONData = [
{
id: 0,
title: 'Horse'
}, {
id: 1,
title: 'Birds',
subs: [
{
id: 10,
title: 'Piegon'
}, {
id: 11,
title: 'Parrot'
}, {
id: 12,
title: 'Owl'
}, {
id: 13,
title: 'Falcon'
}
]
}, {
id: 2,
title: 'Rabbit'
}, {
id: 3,
title: 'Fox'
}, {
id: 5,
title: 'Cats',
subs: [
{
id: 50,
title: 'Kitty'
}, {
id: 51,
title: 'Bigs',
subs: [
{
id: 510,
title: 'Cheetah'
}, {
id: 511,
title: 'Jaguar'
}, {
id: 512,
title: 'Leopard'
}
]
}
]
}, {
id: 6,
title: 'Fish'
}
];
comboTree1 = $('.size').comboTree({
source : SampleJSONData,
isMultiple: true,
cascadeSelect: true,
selected: ['0']
});
// To remove plugin
comboTree1.destroy();
===> comboTree1.destroy is not a function
when user select an option from drop down list, how to get the data-id from that correspond selected option? thanks.
I need to be able to change the color of the text on the checkbox list. Anyone have an idea on how to do that?
There's a bug in 1.3.1 with setSelection.
On line 171 you add an extra 'ct-' for the id of the element ('ct-' is already part of this.id).
On line 670 "-li" shoud be "-li-"
Hey everyone! How can i remove selected items from input?
Hi,
First and foremost, great plugin!
In my use case I'd like to get the selected ids only after the drop-down has closed (not onChange). Is that possible?
(I've previously used another similar plugin with event onDropdownHide, but that plugin won't work in this use case).
How can I get the selected value?
I have tried some way:
var comboTree1;
jQuery(document).ready(function($) {
comboTree1 = $('#justAnInputBox').comboTree({
source : SampleJSONData,
isMultiple: true,
cascadeSelect: true,
collapse: true,
selectableLastNode: true,
selected: selectedItem
});
var selectedTitles = comboTree1.getSelectedItemsTitle();
console.log('selectedTitles: ' , selectedTitles);
var selectedIds = comboTree1.getSelectedItemsId();
console.log('selectedIds: ' , selectedIds);
});
Getting error as:
jQuery.Deferred exception: comboTree1.getSelectedItemsTitle is not a function TypeError: comboTree1.getSelectedItemsTitle is not a function
Is there any way to get the selected value/ids ?
Hi!
I'm using your plugin in one of my websites and it's great! :)
I'd like to know if you can help me.
When I select a parent, all the children get selected. That's good!
But when I deselect one child, the parent is not deselected. I think the parent wouldn't be selected. Is it possible to do that?
I attach you a [https://ibb.co/sV8vndk]picture of this problem.
I hope you could help me.
Thanks!
Hi there, thanks for the great plugin.
I'm using ComboTree for quite a large data set. I would like the tree to be initialized collapsed and to allow users to expand categories.
Please advise me how to best do this.
Thank you
Hello
We're using this component for multiselect on a WP website - it's working perfectly.
One thing we've been asked for is a 'Select All' option. I know I can do this manually outside of the component, but I notice that you have a 'Select All' option on your development roadmap. Happy to wait for this - or have a go myself.
Do you have a plan to add this soon? If you'd like me to have a go at implementing within the component - do you have a suggestion as to where you think it should appear? I can code but I'm not the worlds best designer and would hate to mess up a really well thought out add on.
Cheers Rod
How can I hover to search result when using live search?
I have a combo tree with multiselect false.
If i select an option in single select tree and want to clear selection right there (i.e., not through any external button click to clear).
In my case, there are categories say,
cat 1 (id=1)
cat 1.1 (id=2)
cat 1.1.1 (id=3)
cat 1.2 (id=4)
--> if i select 'cat 1' with id=1, then clear the option( i.e., by using Backspace in keyboard) and send the form
--> when I click send form then it sends value with id=1 ( 'cat 1' option) instead of null
So, is there any function or feature that can clear selected value in single select tree.
Thanks.
Hi All
I am using ComoTree plugin it is working well on all browsers except safari
anyone can Help with this issue
thanks in advanced
I tried using this https://reactjs.org/docs/integrating-with-other-libraries.html to integrate this plugin in React but it didn't helped.
Aslo I tried https://medium.com/@shuvohabib/using-jquery-in-react-component-the-refs-way-969de9aa651f too but this shows error.
TypeError: this.$el.comboTree is not a function
My code looks like this -
import React, { Component } from "react";
import _ from "lodash";
import { findDOMNode } from "react-dom";
import $ from "jquery";
var SampleJSONData = [
{
id: 0,
title: "Horse",
},
{
id: 1,
title: "Birds",
isSelectable: false,
subs: [
{
id: 10,
title: "Pigeon",
isSelectable: false,
},
{
id: 11,
title: "Parrot",
},
{
id: 12,
title: "Owl",
},
{
id: 13,
title: "Falcon",
},
],
},
{
id: 2,
title: "Rabbit",
},
{
id: 3,
title: "Fox",
},
{
id: 5,
title: "Cats",
subs: [
{
id: 50,
title: "Kitty",
},
{
id: 51,
title: "Bigs",
subs: [
{
id: 510,
title: "Cheetah",
},
{
id: 511,
title: "Jaguar",
},
{
id: 512,
title: "Leopard",
},
],
},
],
},
{
id: 6,
title: "Fish",
},
];
class SearchTreeView extends Component {
componentDidMount() {
const el = findDOMNode(this.refs.justAnotherInputBox);
$(el).comboTree({
source: SampleJSONData,
isMultiple: false,
});
}
render() {
return (
<div>
<input
type="text"
id="justAnotherInputBox"
placeholder="Type to filter"
autocomplete="off"
ref="justAnotherInputBox"
/>
</div>
);
}
}
export default SearchTreeView;
how we can Initialize Value?
like this:
http://www.jeasyui.com/demo/main/index.php?plugin=ComboTree&theme=default&dir=ltr&pitem=
Thank You
I can't set source of the tree from c# asp.net code behind, the plugin either not working or don't create items and just shows filter field...
I have multi input with class "dropdown" on page. I init comboTree for all dropdown successfull with this code:
$(".dropdown").comboTree({
source: productStoreFullJson,
isMultiple: false,
onChange: function () {
console.log($(this).getSelectedIds());
}
});
I want add a event onChange for get selected id when each dropdown change it's selected value. I use bellow codes:
$(".dropdown").comboTree({
source: productStoreFullJson,
isMultiple: false,
onChange: function () {
console.log($(this).getSelectedIds());
}
});
However onChange event not work, please help me correct this. Thanks!
I have set single tree using below code.
gunBtreeinstance = jq('#gunBrokerTree').comboTree({
source : data.categoryData,
isMultiple: false
});
and trying to reset filter of this comboTree using clearSelection but not wokring.
gunBtreeinstance.clearSelection();
setSelection is also not working for resting filter like gunBtreeinstance.setSelection(['0']) or gunBtreeinstance.setSelection('0')
Please help for single tree.
Thanks
When the combotreedropdowncontainer has overflow set to hidden so that the you can't scroll if data loaded doesn't all fit. Can't see where to change this.
Hi,
I am using this plugin and I found an issue that is item with same title and different id is not selectable.
hi . thanks for jquery plugin ,
i have a question ,
can i use html tag with ul & li tag and .... with my data instead of json data ?
"comboxtree" jQuery plugin not displaying data properly when pressing the Alt+Tab key combination or F12 key, specifically when using single selection mode.
Attaching the file, when pressing F12, other data from the tree disappears.
Request to please resolve this issue or suggest the changes in JS/css file.
Seems like the Filter functionality CANNOT work with Multi Selection mode. Any chance to fix it?
When i set selected value from combobox intialization then it is showing selected but when i open the combobox then it is not scroll to the selected item, instead of that it is showing first item.
Can you please check that?
Is there any option to setValues like
...
I need this to show previously selected values in my edit page....
Hi, how to get id value in post from?
Thank you
Following functions are not working . Would please submit example of following two functions in your sample file?
var selectedTitles = comboTree1.getSelectedItemsTitle();
var selectedIds = comboTree1.getSelectedItemsId();
Regards
Asif
in multiselect mode...
Thnx
@kirlisakal is it possible to select all the sub-items when selecting the parent item? something like this https://www.jqueryscript.net/demo/Collapsible-Tree-View-Checkboxes-jQuery-hummingbird/
and need to get all selected checkbox ids in the getselecteditem variable
I add to .comboTreeDropDownContainer
z-index: 999;
This is not working when generate clone of dropdown
hi. i would like reset clear but i have bug. i try it.
compartments is array with all ids
compartments.forEach(function(element) {
$(input[data-id="${element}"]
).prop('checked',false);
});
compartments = new Array();
$('#form_compartments').val('');
bug keep in memory the choice
thanks
Please see the attached sample data for the understanding purpose:-
var SampleJSONData = [
{
id: 0,
title: 'Horse'
}, {
id: 1,
title: 'Birds',
isSelectable: false,
subs: [
{
id: 10,
title: 'Pigeon',
isSelectable: false
}, {
id: 1,
title: 'Parrot'
}, {
id: 12,
title: 'Owl'
}, {
id: 13,
title: 'Falcon'
}
]
}];
Here you can see that for time being if id:1 with the title: Birds, and again their children with id:1 with the title 'Parrot', I have done manually since In my project I am using dynamic data that is coming from the backend. And If I am giving setSelection(['1'])
, then it is only selected the parent but In my case, I want to select always their child. And Parent is no more selected.
How I can achieve this? It is a great help.
I want re-init a combotree after destroy it. How i do it?
Eg1: init on focus and destroy on blur:
var SampleJSONData = [
{
id: 0,
title: 'Horse'
}, {
id: 1,
title: 'Birds',
isSelectable: false,
subs: [
{
id: 10,
title: 'Pigeon'
}, {
id: 11,
title: 'Parrot'
}, {
id: 12,
title: 'Owl'
}, {
id: 13,
title: 'Falcon'
}
]
}, {
id: 2,
title: 'Rabbit'
}, {
id: 3,
title: 'Fox'
}, {
id: 5,
title: 'Cats',
isSelectable: false,
subs: [
{
id: 50,
title: 'Kitty'
}, {
id: 51,
title: 'Bigs',
isSelectable: false,
subs: [
{
id: 510,
title: 'Cheetah'
}, {
id: 511,
title: 'Jaguar'
}, {
id: 512,
title: 'Leopard'
}
]
}
]
}, {
id: 6,
title: 'Fish'
}
];
var comboTree1;
jQuery(document).ready(function ($) {
$('#justAnInputBox').focus(function () {
comboTree1 = $('#justAnInputBox').comboTree({
source: SampleJSONData,
isMultiple: true,
cascadeSelect: false,
collapse: true
});
}).blur(function () {
comboTree1.destroy(); --> Cannot read property 'destroy' of undefined
});
});
Eg2:
//Init comboTree --> success
comboTree1 = $('#justAnInputBox').comboTree({
source: SampleJSONData,
isMultiple: true,
cascadeSelect: false,
collapse: true
});
// Remove plugin --> success
comboTree1.destroy();
//Re-init comboTree --> NOT WORK
comboTree1 = $('#justAnInputBox').comboTree({
source: SampleJSONData,
isMultiple: true,
cascadeSelect: false,
collapse: true
});
Look forward to your feedback. Thanks!
Thank You for opened Your PlugIn
But
Change event issue when the same value is selected
`
ComboTree.prototype.refreshInputVal = function () {
var tmpTitle = "";
var oldTitle = this._elemInput.val();
if (this.options.isMultiple) {
for (var i=0; i<this._selectedItems.length; i++){
tmpTitle += this._selectedItems[i].title;
if (i<this._selectedItems.length-1)
tmpTitle += ", ";
}
}
else {
tmpTitle = this._selectedItem.title;
}
this._elemInput.val(tmpTitle);
if (tmpTitle != oldTitle) {
this._elemInput.trigger('change');
if (this.changeHandler) {
this.changeHandler();
}
}
};
`
Looks Like Need Above Code
Thank You for opened Your PlugIn Again!
I needed to get the parent text during the onChange event, so hacked the code using:
--- C:\git\combo-tree\comboTreePlugin.js 2022-03-14 16:43:17.000000000 -0700
+++ C:\git\myApp\static\Drop-Down-Combo-Tree\comboTreePlugin.js 2022-03-11 14:46:57.000000000 -0700
@@ -323,13 +323,15 @@
return false;
}
if ($(ctItem).data("selectable") == true) {
this._selectedItem = {
id: $(ctItem).attr("data-id"),
- title: $(ctItem).text()
+ title: $(ctItem).text(),
+ obj:$(ctItem),
+ parent: $(ctItem).closest('.ComboTreeItemParent').children('.comboTreeItemTitle')
};
let check = this.isItemInArray(this._selectedItem, this.options.source);
if (check) {
var index = this.isItemInArray(this._selectedItem, this._selectedItems);
if (index) {
@@ -344,13 +346,15 @@
};
ComboTree.prototype.singleItemClick = function (ctItem) {
if ($(ctItem).data("selectable") == true) {
this._selectedItem = {
id: $(ctItem).attr("data-id"),
- title: $(ctItem).text()
+ title: $(ctItem).text(),
+ obj:$(ctItem),
+ parent: $(ctItem).closest('.ComboTreeItemParent').children('.comboTreeItemTitle')
};
} // if selectable
this.refreshInputVal();
this.closeDropDownMenu();
};
@@ -404,13 +408,13 @@
}
this._elemInput.val(tmpTitle);
this._elemInput.trigger('change');
if (this.changeHandler)
- this.changeHandler();
+ this.changeHandler(this);
};
ComboTree.prototype.dropDownMenuHover = function (itemSpan, withScroll) {
this._elemItems.find('span.comboTreeItemHover').removeClass('comboTreeItemHover');
$(itemSpan).addClass('comboTreeItemHover');
this._elemHoveredItem = $(itemSpan);
I test it here,
https://www.jqueryscript.net/demo/Drop-Down-Combo-Tree/
I select something from the 3rd combo box. I change the textbox content with keyboard, click enter. The list is now disapeared
Hi!, recently used this plugin and it's ways perfect, just I try to use the filter option in the single tree but I can't, How can I implement this option? Is it possible?.
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.