I'm new to jsTree.How to apply custom css for jsTree div id like background color,node font style etc., any sample examples will be helpful
<div id="sampleTree"></div>
load jstree method
$('#sampleTree').jstree({
'core' : {
'data' : {
'url' : 'ajaxurl',
'data' : function (node) {
var test = ["jquery", "js", "css"];
return test;
}
}
}
});
since jstree is a totally javascript generated code, adding your own class would be not advisable, since adding it while the rendering time trough the jstree engine would make the system more complex. What you can do is, trace the classes in the themes/default/style.css
and make changes in the classes. some of them are .jstree hovered, clicked and so on.
If you want to put CSS onto individual entries use the html_data plugin. You can put it in your HTML strings with embedded CSS directly:
<div id="myTree">
<ul>
<li rel="root">
Parent 1
<ul>
<li><a style="font-weight:bold" href="#">Child 1</a></li>
<li><a style="color: red" href="#">Child 2</a></li>
</ul>
...
Yes you can change the theme css file according to you.
If you want more customization like changing the icons when open, when close etc then you can do it in jquery
$('#jstree-api').jstree({
'core': {
'data': jsonData
},
"types": {
"child": {
"icon": "glyphicon glyphicon-leaf"
},
"root": {
"icon": "glyphicon glyphicon-folder-close"
},
"default": {
"icon": "glyphicon glyphicon-folder-close"
}
},
"search": {
"case_insensitive": true,
"show_only_matches": true
},
"plugins": ["search", "themes", "types"]
});
$('#jstree-api').on('open_node.jstree', function (e, data) {
data.instance.set_icon(data.node, "glyphicon glyphicon-folder-open");
}).on('close_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-folder-close"); });
Here is a series of articles on jsTree you can follow if you want.
Related
I receive an array of objects in which I have to create new properties to display in the html
public inicializeData() {
this.loaderService.eLoader.emit(true);
this.cartsSubscription = this.cartsService.getCarts().subscribe(carts => {
this.orders = carts;
this.orders.forEach(cart => {
cart.date = cart.functional_id.substring(0, 8);
cart.order_number = cart.functional_id.substring(8, 14);
});
this.load = true;
this.loaderService.eLoader.emit(false);
});
}
so that an object after the creation of the new properties
{
"functional_id": "201911291131250012400000SD4AYAA1",
"transactions": [
{
"quantity": 2,
"price": 140,
"item": {
"name": "Carton de 10 coffrets",
"description": "+ 2 recharges d'argile offertes",
"product": {
"name": "Coffret empreinte rouge"
}
}
},
{
"quantity": 1,
"price": 0,
"item": {
"name": "Petit modèle",
"description": "Par 25",
"product": {
"name": "Sacs blancs",
"description": "Pour les crémations Plurielles"
}
}
}
],
"date": "20191129",
"order_number": "113125"
},
In this function I extract from the property 'functional_id' a data formed by the first 8 digits, which correspond to the date of creation, and another formed by the following 6 digits, which corresponds to a registration number.
These are the data I keep in this function with the name of 'cart.date' and 'cart.order_number' respectively.
When I show them in the html they load immediately but, in a matter of a second, the two data I created disappear from the screen.
<div class='order-list'>
<span *ngIf="!orders.length">No orders available</span>
<div class="fade-in" *ngFor="let order of orders; let i = index;">
<div class="row ciev-row header-row d-none d-lg-flex" [ngClass]="{'last': i === orders.length - 1}" (click)="toggle(order)">
<div class="col-sm-2 my-auto">{{order.functional_id}}</div>
<div class="col-sm-2 my-auto">{{order.date | date}}</div>
<div class="col-sm-2 my-auto">{{order.order_number}}</div>
</div>
</div>
I don't understand why I can't find a solution.
Someone to give me an idea that I am doing wrong.
Recently I faced similar kind of issue.
My goal was to add the text to a list below a text html input box when user enters something into it and hits enter key.
import { Component, OnInit } from '#angular/core';
import { FormArray, FormControl, FormGroup } from '#angular/forms';
#Component({
selector: 'add-subject-form',
template: `
<form (submit)="doNotSubmitForm($event)">
<input
type="text" class="form-control"
(keyup.enter) = "addSubject(subject)" #subject>
<ul class="list-group">
<li
*ngFor="let item of items.controls"
class="list-group-item">{{item.value}}</li>
</ul>
</form>
`,
styleUrls: ['./add-subject-form.component.css']
})
export class AddSubjectFormComponent{
form = new FormGroup({
subjects: new FormArray([])
});
addSubject(pItem: HTMLInputElement) {
this.items.push(new FormControl(pItem.value));
pItem.value = '';
}
get items() {
return this.form.controls['subjects'] as FormArray;
}
// By default the form gets submitted on keyUp.enter event.
// doNotSubmitForm method prevents that default behaviour
doNotSubmitForm(event: any) {
event.preventDefault();
}
}
I could achieve the functionality using above template and necessary code in corresponding ts component class. But the problem was the text box was becoming empty and the list below it was vanishing as the html form was getting submitted by default on keyup.enter event.
Hence I had to call following method on submit event of the form.
doNotSubmitForm(event: any) {
event.preventDefault();
}
Hope this information enriches the context.
I was stuck with the fact that the data disappeared on the screen thinking that it was a problem of html or css and I didn't see why. But in reality it was a problem of the subscription that depended on a service called in other components and by the flow of the application I entered twice and it overwrote me the data, showing the originals.
Thank you all for your time and help.
Introdution
Hi, I'm working on private project "Avatar databse" in Vue.js framework. App shows them based on data() elements:
data() {
return {
avatars: [
{
name: "Butterfly Blue",
tags: [
"animal",
"butterfly",
"blue"
]
},
{
name: "Butterfly Green",
tags: [
"animal",
"butterfly",
"green"
]
},
{
name: "Deer Shining",
tags: [
"animal",
"deer"
]
},
What I want
I would like to make search engine based on tags. Most of help pages are about previous Vue versions or search is based on name - one element. I want to search in tag list not single name string.
Without search engine, every avatar renders correctly
Current component code
template:
<div class="row">
<div v-for="image in avatars" :key="filteredData" class="col-6 col-sm-4 col-md-3 col-lg-2 my-2">
<img v-bind:src="imgSource(image.name)" v-bind:alt="image.name" class="img-fluid" :class="avatarClass" />
<a :href="imgSource(image.name)" :class="downloadClass"><span class="icon-download-alt"></span></a>
<p class="h5 text-center py-1">{{ image.name }}</p>
<p v-for="tag in image.tags" v-bind:key="tag" :class="tagClass">{{ tag }}</p>
</div>
</div>
computed()
avatarClass() {
return 'avatar';
},
tagClass() {
return 'tag';
},
downloadClass() {
return 'download';
},
filteredData() {
if (this.search == '') {
return this.avatars;
} else {
return this.avatars.filter(obj => {
return obj.name.toLowerCase().includes(this.search.toLowerCase());
});
};
},
Of course filterind related thigs doesn't work. And there's my question...
How to make working, tag list based, search engine?
(Based on my project.)
It's small changes to the search that has been done. I've made a codesandbox where it's working:
https://codesandbox.io/s/festive-napier-3jk52
filteredData() {
if (this.search == "") {
return this.avatars;
} else {
return this.avatars.filter(obj => {
return obj.tags.indexOf(this.search.toLowerCase()) !== -1;
});
}
}
It's pretty simple. There's a search data variable, where you can put in the tag you want to search for. Right now it only searched for the whole tag, and has to match a tag fully, but this can be changed if you want people to be able to search for "anim", and then the avatars with the "animal" tag should be shown.
You enter butterfly in your search field and only Butterfly Blue and Butterlfy Green should appear?
Instead of
return this.avatars.filter(obj => {
return obj.name.toLowerCase().includes(this.search.toLowerCase());
});
try this:
return this.avatars.filter(avatar => avatar.tags.includes(this.search.toLowerCase()));
I'm using electron-react-boilerplate for my project and this boilerplate is using css-modules for styling purpose.
I'm having trouble with using bootstrap and custom style at the same place.
Suppose i've a code snippet like,
<div className="container">
<div className="row custom-css">
// other codes...
</div>
in that case 'row' is one bootstrap className and 'custom-css' is my own style className.
please help me to find some solution for these problem so that i can use css-modules and bootstrap together...
You need to import your CSS module styles from a module file specific to this component, then interpolate them into the classname via the returned object...
MyComponent.css
.myCustomClassName {
color: #fff;
}
MyComponent.js
import styles from './MyComponent.css';
<div className={`row ${styles.myCustomClassName}`} />
When output as HTML this would become something like...
<div class="row MyComponent__myCustomClassName___n1cC4ge}` />
So as long as you are loading the bootstrap CSS somewhere that should pick up on both
thanks guys i find it working by adding {} around that
<div className={`row ${styles.myCustomClassName}`} />
I was kinda stuck with this (as to how to load Bootstrap).
I created this rough edit in my webpack config file.
{
test: /(\.bootstrap\.css$|bootstrap-theme.css|bootstrap.css)/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
minimize: true || {/* CSSNano Options */}
}
},
],
},
{
test: /^((?!\.bootstrap|bootstrap-theme).)*\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
}
]
},
The rest are covered perfectly by alechill
I have been trying to list an actor name element with the following JSON format with angular js:
{movies: [
title: "Movie Title",
actors: {
list: [
{
name: "James Mason"
},
{
name: "Kirk Douglas"
},
{
name: "Paul Lukas"
},
{
name: "Peter Lorre"
}
]
}]
}
My parent ngrepeat element works with the top level element but can not access the actor names:
<ul ng-repeat="movie in items.movies">
<li>
<b>Title: </b> {{movie.title}}<br>
<b>Actor list:</b>
<ul>
<li ng-repeat="actor in movie.actors">
{{actor.list.name}}
</li>
</ul>
I have also tried the following:
<li>{{movie.actors['list'][0].name}}</li>
But the above only grabs the first name. I find the nesting very complicated to access with angularjs so if you could see something I am not, can you please help?
You still need to loop through 'list'
Add one more repeat.
ng-repeat="name in actor.list"
I fixed it:
<li ng-repeat="actor in movie.actors.list">{{actor.name}}</li>
I'm developing an app with the Ionic framework based on angularjs. I'd like to let generate HTML elements or components from a JSON file. These are buttons, lists, labels, etc.
My JSON objects look like this:
[
{
"category": "communicationPage",
"type": "Button",
"id": "communicationButton",
"icon": "ion-chatboxes",
"name": "Communication",
"onClick": "window.location.href='communicationPage.html'",
"ngclick": "open()",
"ngcontroller": "openctrl",
"color": "white",
"background-color": "#ff5db1",
"font-size": "20px"
},
{
"category": "servicePage",
"type": "Button",
"id": "serviceButton",
"icon": "ion-briefcase",
"name": "Service",
"onClick": "window.location.href='servicePage.html'",
"color": "blue",
"background-color": "#009900",
"font-size": "26px"
}
]
I can access via my Controller on the JSON file and parse as follows:
myApp.controller('generateHTMLCtrl', function ($scope, $http) {
$http.get('myJSONFile.json').success(function(data){
$scope.components = data;
//...
});
});
The code translates of course nothing.
My question is, how can I adapt my JavaScript code so that from a
JSON object following HTML element is generated?:
<button style="color: blue; background-color: #ff5db1; font-size: 20px" onclick="window.location.href='communicationPage.html'" id="communicationButton" class="button">
<i class="ion-chatboxes"></i> <br> Communication
</button>
Once my JSON object is located always in the JSON file, should always be created the HTML element on the page.
The second question is how I can position this generated HTML
element just in my HTML page?
I want that the HTML element is generated between the responsive grid element, such as:
<div class="row responsive-sm">
<div class="col">
<!-- The Button should be generated hier-->
</div>
</div>
The third and final question is how I can let generate the HTML
element on the appropriate page? Such as: If in JSON object the key-value pair of "category": "communicationPage" occurs should the corresponding HTML element be created on 'communicationPage.html'
I would look forward to an example. Many thanks.
For the two first point, use the data-binding and ng-repeat : directive
<div class="row reponsive-sm" ng-controller="generateHTMLCtrl">
<div ng-repeat="component in components">
<button style="color : {{component.color}}; background-color : {{component.background-color}} ... ">
</button>
</div>
</div>
For the last point, I'm not sure if it's possible with AngularJS ...