Related
Working on the pageNav for a personal app I am working on and cannot get the index to show properly.
I figure that making the pageIndexInner and itemsPerPageInner computed propetries was the best route, but when it comes to editing those, I need to also have a setter? I've looked into getters and setters, but am having a very hard time wrapping my head around it.
Without the computer properties, the click event works and I can make it all the way to the itemToal amount, but the index doesn't match up.
If you change the default pageIndex to 3,
I want to see:
but this is what I'm actually seeing:
I'm just not sure where to go with all of this and any guidance would be greatly appreciated. Thank you
Codepen Link:https://codepen.io/LovelyAndy/pen/NWbjLGz?editors=1010
Vue Component code:
<template>
<div class="_table-page-nav-wrapper">
<div #click="back" :disabled="pageIndexInner === 0" class="_arrow-btn">
<
</div>
<div class="_page-index-inner">
{{ itemsTotal }} Total Items {{ pageIndexInnerStart}} - {{ itemsPerPageInnerStart }} Shown
</div>
<div #click="forward" class="_arrow-btn">
>
</div>
</div>
</template>
<style lang="sass" scoped>
._table-page-nav-wrapper
display: flex
justify-content: center
align-items: center
div
display: flex
justify-content: center
align-items: center
._arrow-btn
width: 50px
height: 50px
border-radius: 4px
box-shadow: 0 5px 5px rgba(0,0,0,0.2)
._page-index-inner
width: 244px
height: 50px
border-radius: 4px
box-shadow: 0 5px 5px rgba(0,0,0,0.2)
margin: 0px 20px
</style>
<script>
export default {
name: 'TablePageNavigation',
props: {
/**
* passed values can be either 10 or 25 or 50
*/
itemsPerPage: {
type: Number,
default: 10,
validator: (prop) => [10, 25, 50].includes(prop),
},
pageIndex: {
type: Number,
default: 0,
},
itemsTotal: {
type: Number,
default: 100,
},
},
data() {
return {
pageIndexInner: this.pageIndex,
itemsPerPageInner: this.itemsPerPage,
}
},
computed: {
pageIndexInnerStart() {
return this.pageIndex + this.itemsPerPage
},
itemsPerPageInnerStart() {
return this.itemsPerPage + this.itemsPerPage
},
},
methods: {
back() {
if (this.itemsPerPageInner > this.itemsPerPage) {
this.itemsPerPageInner = this.itemsPerPageInner - this.itemsPerPage
this.pageIndexInner = this.pageIndexInner - this.itemsPerPage
const newIndex = this.pageIndexInner
this.$emit('update:pageIndex', newIndex)
}
return
},
forward() {
if (
this.itemsPerPageInnerStart + this.itemsPerPage > this.itemsTotal ||
this.PageIndexInnerStart + this.itemsPerPage > this.itemsTotal
) {
return
}
this.pageIndexInnerStart = this.pageIndexInnerStart + this.itemsPerPage
this.itemsPerPageInnerStart = this.itemsPerPageInnerStart + this.itemsPerPage
},
},
}
</script>
I commented on your related question earlier this morning, and decided to create an example based on my previous pagination implementation that I mentioned. I removed a lot of your calculations for a simpler approach. I didn't handle all scenarios such as if total items is not a multiple of items per page, but if you like what I did you can work that out on your own. Here is the code from my single file component that I developed in my Vue sandbox app, which uses Bootstrap 4.
<template>
<div class="table-page-navigation">
<button class="btn btn-primary" #click="back" >Back</button>
<span>
{{ itemsTotal }} Total Items {{ pageFirstItem}} - {{ pageLastItem }} Shown
</span>
<button class="btn btn-secondary" #click="forward" >Forward</button>
</div>
</template>
<script>
export default {
name: 'TablePageNavigation',
props: {
/**
* passed values can be either 10 or 25 or 50
*/
itemsPerPage: {
type: Number,
default: 10,
validator: (prop) => [10, 25, 50].includes(prop),
},
itemsTotal: {
type: Number,
default: 100,
},
},
data() {
return {
currentPage: 1,
}
},
computed: {
numPages() {
return this.itemsTotal / this.itemsPerPage;
},
pageFirstItem() {
return (this.currentPage - 1) * this.itemsPerPage + 1;
},
pageLastItem() {
return this.currentPage * this.itemsPerPage;
}
},
methods: {
back() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
forward() {
if (this.currentPage < this.numPages) {
this.currentPage++;
}
},
},
}
</script>
Vuetify
Vuetify pagination Component
This might help if you're comfortable using a UI library.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<div class="text-center">
<v-pagination
v-model="page"
:length="6"
></v-pagination>
</div>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
page: 1,
}
},
})
</script>
</body>
</html>
I'm using vue-good-table Vue's component but there's a problem with pagination. Basically, the first page always shows one record missing. I mean, if I set the 'perPage' option to 10, the first page shows 9 records, while all the others show 10 records. What could it be?
My code:
app.js
require('./bootstrap');
window.Vue = require('vue');
window.axios = require('axios');
Vue.component("my-table", require("./components/MyTable.vue").default);
const app = new Vue({
el: '#app',
});
MyTable.vue
<template>
<div>
<vue-good-table
#on-selected-rows-change="selectionChanged"
#on-select-all="selectAll"
:columns="columns"
:rows="rows"
styleClass="vgt-table striped condensed"
:select-options="{
enabled: true,
selectOnCheckboxOnly: true,
selectionText: 'record selezionati',
clearSelectionText: 'Pulisci',
selectionInfoClass: '',
}"
:search-options="{
enabled: true,
placeholder: 'Cerca',
}"
:sort-options="{
enabled: true,
initialSortBy: {field: 'numero_verbale', type: 'asc'}
}"
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 10,
position: 'top',
perPageDropdown: [5, 10, 20],
dropdownAllowAll: true,
nextLabel: 'Prossima',
prevLabel: 'Precedente',
rowsPerPageLabel: 'Record per pagina',
ofLabel: 'di',
allLabel: 'Tutti',
}"
>
<div slot="selected-row-actions">
<button class="mr-4">Action 1</button>
<button class="mr-4">Action 2</button>
<button >this.routeURL</button>
</div>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'elimina'">
<button #click="deleteOrdinanza(props.row.id, props.index)" class="bg-grey-200 text-sm"> ELI</button>
</span>
<span v-if="props.column.field == 'dettaglio'">
<button #click="rowId(props.row.id, props.index)" class="bg-grey-200 text-sm"> DETTAGLIO</button>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
</div>
</template>
<script>
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';
axios.defaults.baseURL = 'http://127.0.0.1:8000/api';
export default {
name: 'my-table',
props: {
ordinanze: String,
},
data(){
return {
columns: [
{
label: 'ID',
field: 'id',
type: 'number',
// hidden: true
},
{
label: 'N° Verbale',
field: 'numero_verbale',
type: 'number',
width: '130px'
},
{
label: 'Data Verbale',
field: 'data_verbale',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'MMM Do yy',
},
{
label: 'Cognome',
field: 'cognome',
},
{
label: 'Nome',
field: 'nome',
},
{
label: 'Codice Fiscale',
field: 'codice_fiscale',
},
{
label: 'Città',
field: 'citta',
},
{
label: 'Provincia',
field: 'provincia'
},
{
label: 'Data Notifica',
field: 'data_notifica',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'MMM Do yy',
},
{
label: '',
field: 'elimina',
sortable: false,
},
{
label: '',
field: 'dettaglio',
sortable: false,
},
],
rows : JSON.parse(this.ordinanze) ,
};
},
methods: {
rowId(idParam) {
console.log(idParam);
},
deleteOrdinanza(id, index){
console.log(id);
console.log(index);
axios.delete('/ordinanze/' + id)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error)
});
this.rows.splice(index,1);
}
},
components: {
VueGoodTable,
},
};
</script>
vuegoodtable.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue comp test </title>
<script src="/js/app.js" defer></script>
</head>
<body>
{{-- table component--}}
{{-- $ordinanze is the array with all the table records--}}
<div id="app" class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-3">
<my-table :ordinanze='#json($ordinanze)'></my-table>
</div>
</body>
</html>
Thanks!
I'm wondering if you are using vue-good-table v2.19.2, because I've seen your problem with that version.
If so, you will not see this problem using 2.19.1 or 2.19.3 (that is the latest version currently).
I am using the Quill editor in Vue.js and it's working great. I have images, etc.
But...the link isn't working. I tried both the "snow" and "bubble" themes.
I type the text, highlight it and then click on the "link". I get the dialog to set the link, but then the link isn't there.
It's working in the JavaScript version, but not the Vue.
Below is my code.
Vue.component('editor', {
template: '<div ref="editor"></div>',
props: {
value: {
type: String,
default: ''
}
},
data: function() {
return {
editor: null
};
},
mounted: function() {
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block', 'link']
]
},
//theme: 'bubble',
theme: 'snow',
formats: ['bold', 'underline', 'header', 'italic', 'link'],
placeholder: "Type something in here!"
});
this.editor.root.innerHTML = this.value;
this.editor.on('text-change', () => this.update());
},
methods: {
update: function() {
this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
}
}
})
new Vue({
el: '#root',
data: {
//model: 'Testing an editor'
model: '',
isShowing: true
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<title>Trying to use the Quill Editor in Vue</title>
</head>
<body>
<div id="root">
<div v-if="isShowing">
<editor v-model="model"></editor>
</div>
<p>I need the v-html directive: <span v-html="model"></span></p>
<p>Raw data: <pre>{{ model }}</pre></p>
<button #click="isShowing = !isShowing">Toggle</button>
</div>
</script>
</body>
</html>
Any help is greatly appreciated.
Thanks, D
I had to place a 'link' into the "formats" as well:
formats: ['bold', 'underline', 'header', 'italic', 'link'],
I updated my code snippet with the correct answer in case anyone else is having this problem.
Thanks!
First, I apologize for the way I phrased the question. I couldn't find a way to word it in one sentence. So, allow me to explain.
I have an API with thousands of items being looped in a v-for. The user will select one and only one at a time from the collection. And upon clicking on it will show on a separate place along with some other data (* so it's not a case of string interpolation. It's an object. I'm just simplifying the code in my jsfiddle to make it less confusing and run without dependencies)
I added a boolean property to the API to toggle it true/false and a method function that does the toggle. And with the help of some v-if and v-show directives I'm hiding the other elements from rendering when they are false.
<div id="app">
<div uk-grid class="card-body">
<div class="uk-width-1-4#m">
<div>1. Select an Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id" :id="pod.id">
<div class="ws-in-col" v-for="workstations in pod.workstations" :key="workstations.id" :id="workstations.id" #click="selectWS(workstations, pod)">
<div class="ws ws-number uk-text-default">{{workstations.number}}</div>
</div>
</div>
</div>
<div class="uk-width-1-4#m">
<div>2. Selected Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id" :id="pod.id" v-show="pod.selected===true">
<div class="ws-in-col" v-for="workstations in pod.workstations" :key="workstations.id" :id="workstations.id" v-show="workstations.selected===true">
<div v-if="workstations.selected === true">
<div class="group">
<div class="ws ws-number uk-text-default">{{workstations.number}}</div>
<div class="ws ws-number uk-text-default">{{workstations.text}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and in the script
methods: {
selectWS(workstations, pods) {
pods.selected = !pods.selected;
workstations.selected = !workstations.selected;
}
}
However, not only it is very messy and rookie. It's buggy. The only way it works is if the user clicks on one item to show it, and clicks it again to toggle it off before clicking another one to turn it on. That's far from user-friendly.
How can I resolve this in a cleaner and professional way so that if the user clicks on 1.1, it shows 1.1 and if he wants to see 1.2, all he has to do is click on 1.2 without having to turn off 1.1 first?
Here's a JSFIDDLE replicating my problem
Thanks guys. Being the only Vue dev in this place is tough.
Agree with IVO, instead of tracking in-item, use a value(or two) to track selection
The only reason I'm posting separate answer is that I'd recommend using a computed value if you need to have the selected instance available as an object.
new Vue({
el: "#app",
data: {
workstation: null,
pod: null,
pods: [
{
id: "pod1",
number: 1,
selected: false,
"workstations": [
{
id: "ws11",
number: "1.1",
text: "Some text",
selected: false,
close: false
},
{
id: "ws12",
number: "1.2",
text: "Some text",
selected: false,
close: false
},
{
id: "ws13",
number: "1.3",
text: "Some text",
selected: false,
close: false
}
]
},
{
id: "pod2",
number: 2,
selected: false,
"workstations": [
{
id: "ws21",
number: "2.1",
text: "Some text",
selected: false,
close: false
},
{
id: "ws22",
number: "2.2",
text: "Some text",
selected: false,
close: false
},
{
id: "ws23",
number: "2.3",
text: "Some text",
selected: false,
close: false
}
]
}
]
},
computed: {
selection(){
if(this.workstations !== null && this.pod !== null){
let s = this.pods.filter(p => p.id === this.pod).map(p => {
let r = {...p}
r.workstations = p.workstations.filter(w => w.id === this.workstation)
return r
})
if (s.length === 1) return s[0]
}
return false
}
},
methods: {
selectWS(workstations, pods) {
if (this.pod == pods.id && this.workstation == workstations.id){
this.pod = null;
this.workstation = null;
} else{
this.pod = pods.id;
this.workstation = workstations.id;
}
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div uk-grid class="card-body">
<div class="uk-width-1-4#m">
<div>1. Select an Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id" :id="pod.id">
<div class="ws-in-col" v-for="workstations in pod.workstations" :key="workstations.id" :id="workstations.id" #click="selectWS(workstations, pod)">
<div class="ws ws-number uk-text-default">{{workstations.number}}</div>
</div>
</div>
</div>
<div class="uk-width-1-4#m">
<div>2. Selected Item</div>
<div v-if="selection" class="pods">
<div class="ws-in-col">
<div v-if="selection.workstations.length > 0">
<div class="group">
<div class="ws ws-number uk-text-default">{{selection.workstations[0].number}}</div>
<div class="ws ws-number uk-text-default">{{selection.workstations[0].text}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have to simply set the last selected pod/workstation and then show its properties (please run the snippet in full page otherwise you will be unable to see the right column):
new Vue({
el: "#app",
data: {
selectedPod: null,
selectedWorkstation: null,
pods: [
{
id: "pod1",
number: 1,
selected: false,
"workstations": [
{
id: "ws11",
number: "1.1",
text: "Some text 1",
selected: false,
close: false
},
{
id: "ws12",
number: "1.2",
text: "Some text 2",
selected: false,
close: false
},
{
id: "ws13",
number: "1.3",
text: "Some text 3",
selected: false,
close: false
}
]
},
{
id: "pod2",
number: 2,
selected: false,
"workstations": [
{
id: "ws21",
number: "2.1",
text: "Some text 4",
selected: false,
close: false
},
{
id: "ws22",
number: "2.2",
text: "Some text 5",
selected: false,
close: false
},
{
id: "ws23",
number: "2.3",
text: "Some text 6",
selected: false,
close: false
}
]
}
]
},
methods: {
selectWS(workstation, pod) {
this.selectedPod = pod;
this.selectedWorkstation = workstation;
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div uk-grid class="card-body">
<div class="uk-width-1-4#m">
<div>1. Select an Item</div>
<div class="pods" v-for="pod in pods" :key="pod.id">
<div class="ws-in-col" v-for="workstation in pod.workstations" :key="workstation.id" #click="selectWS(workstation, pod)">
<div class="ws ws-number uk-text-default">
{{workstation.number}}
{{workstation.text}}
</div>
</div>
</div>
</div>
<div class="uk-width-1-4#m">
<div>2. Selected Item</div>
<div class="pods" v-if="selectedWorkstation">
<div class="ws-in-col">
<div>
<div class="group">
<div class="ws ws-number uk-text-default">{{selectedWorkstation.number}}</div>
<div class="ws ws-number uk-text-default">{{selectedWorkstation.text}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Can someone suggest how can I place check boxes against each folder of the below tree hierarchy? I am trying to add check-boxes but it is not showing up in my tree shown below. Please suggest the changes i need to make for my below code to get the checkbox displayed. This is a working code , just copy paste the same in a textpad and open in IE allowing activex.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/claroGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
data-dojo-config="isDebug: true,parseOnLoad: true"></script>
<link rel="stylesheet" href="css/style.css" media="screen">
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Select");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.tree.dndSource");
dojo.require("dijit.Tree");
dojo.addOnLoad(function() {
dojo.byId('loaderInner').innerHTML += " done.";
setTimeout(function hideLoader(){
dojo.fadeOut({
node: 'loader',
duration:500,
onEnd: function(n){
n.style.display = "none";
}
}).play();
}, 250);
});
var store;
var selectedItemId = 0;
var itemSelected = null;
var sel = null;
var idCount = 0;
var treeModel;
var mytree;
var modeSelector;
dojo.ready(function(){
store = new dojo.data.ItemFileWriteStore({
contentType: 'application/json',
target: 'store',
url: "http://pmis.biz/rwa/data/ProjectList.php"
});
treeModel = new dijit.tree.ForestStoreModel({
iconClass: 'dijitEditorIcon dijitEditorIconCut',
store: store,
query: {"main": 0},
rootId: 0,
rootLabel: "project",
pasteItem: function(){},
mayHaveChildren : function(item) {
return true;
},
getChildren: function(parentItem, callback, onError) {
if(parentItem.root == true ){
if(this.root.children){
callback(this.root.children);
}else{
this.store.fetch({
query: this.query,
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
}
} else {
console.debug("Tree child onLoad here: "+parentItem.id);
if (idCount < parseInt(parentItem.id)){
idCount = parseInt(parentItem.id);
}
var sx = parseInt(parentItem.id);
this.store.fetch({
query: { main: sx },
queryOptions: {cache:false},
onComplete: dojo.hitch(this, function(items){
this.root.children = items;
callback(items);
}),
onError: onError
});
}
}
});
mytree = new dijit.Tree({
model: treeModel,
openOnClick:true,
showRoot: true,
setCheckboxOnClick : true,
// onDblClick: function (item, node, evt){
// },
onClick: function (item, node, evt){
resetEditor();
}
}, "treeThree");
});
</script>
</head>
<body class="claro">
<!-- BorderContainer -->
<div id="main" data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="liveSplitters:false, design:'headline',
style:'width:100%; height:100%; max-width:1050px; min-width:680px; min-height:400px; margin: 0 auto;'">
<!-- AccordionContainer-->
<div data-dojo-type="dijit.layout.AccordionContainer"
data-dojo-props="region:'leading', splitter:true, minSize:20" style="width: 630px;" id="leftAccordion">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'NG Tree Hierarchy'">
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Rootless Tree',
style:'width:30%; height:100%; max-width:1050px; min-width:250px; min-height:300px; margin: 0 auto; float:left'">
<div id="treeThree"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Rootless CCCCCC'">
<!-- Project selector -->
<div id=help"></div><br>
<br>
<!-- <select id="f_2"></select>-->
<br>
<div>
<table style="width: 135px; height: 83px;">
<tr><td>
<div id="ip"></div>
</tr><tr><td>
<button id="bd" data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="bd"
data-dojo-props="disabled: true,
onClick: function (evt){
store.deleteById(selectedItemId);
resetEditor();
},
label:'Delete project' ">
</button>
<button id="bs" data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="bs"
data-dojo-props="disabled: true,
onClick: function (evt){
var lvalue = dijit.byId('s1').value;
store.setValue(itemSelected, 'title', dijit.byId('s1').value);
store.setValue(itemSelected, 'description', dijit.byId('s2').value);
store.save();
},
label:'Save project' ">
</button>
<button id="ba"data-dojo-type="dijit.form.Button" style="visibility:hidden"
data-dojo-id="ba"
data-dojo-props="disabled: true,
onClick: function (evt){
idCount = idCount +1;
var newItem = {};
newItem.id = idCount;
newItem.main = selectedItemId;
newItem.title = dijit.byId('s1').value;
newItem.description = dijit.byId('s2').value;
store.newItem(newItem);
sel.setStore(store,'',{query:{main: 0}});
/* mytree.update();*/
},
label:'Add project' ">
</button>
<br>
<button onclick="mytree.refreshModel()" style="visibility:hidden">
Update
</button>
</tr>
</table>
<br>
</div>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:''">
<div></div>
</div>
</div>
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
</div>
<!-- Top tabs (marked as "center" to take up the main part of the BorderContainer) -->
<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center', tabStrip:true" id="topTabs">
<div id="basicFormTab1" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab1', style:'padding:10px;display:none;'">
<p> </p>
</div>
<div id="basicFormTab2" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab2', style:'padding:10px;display:none;'">
<p> </p>
</div>
<div id="basicFormTab3" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="title:'Tab3', style:'padding:10px;display:none;'">
<p> </p>
</div>
</div>
</div>
</body>
</html>
A library was created for this:
http://www.thejekels.com/dojo/cbtree_AMD.html
The instruction manual is kind of hard to find from that site. It is a github wiki here: https://github.com/pjekel/cbtree/wiki/CheckBox-Tree. Download the git repo, then follow instructions at https://github.com/pjekel/cbtree/wiki/Installation, and you should be good to go.
Try this one (tested on dojo 1.10):
require(["dojo/_base/connect", "dijit/dijit", "dojo/data/ItemFileReadStore", "dijit/Tree", "dijit/form/CheckBox",
"dojo/domReady!"],
function (connect, dijit, ItemFileReadStore, Tree, CheckBox) {
var store = new ItemFileReadStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
var treeControl = new Tree({
store: store,
showRoot: false,
_createTreeNode: function (args) {
var tnode = new Tree._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
var cb = new CheckBox();
cb.placeAt(tnode.labelNode, "first");
connect.connect(cb, "onChange", function () {
var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
connect.publish("/checkbox/clicked", [{
"checkbox": this,
"item": treeNode.item
}]);
});
return tnode;
}
}, "CheckboxTree");
connect.subscribe("/checkbox/clicked", function (message) {
console.log("you clicked:", store.getLabel(message.item));
});
}); // require
var rawdata = [{
label: 'Level 1',
id: '1',
children: [{
label: 'Level 1.1',
id: '1.1',
active: true
},
{
label: 'Level 1.2',
id: '1.2',
active: true
}]
},
{
label: 'Level 2',
id: '2',
children: [{
id: '2.1',
label: 'Level 2.1',
active: false
},
{
id: '2.2',
label: 'Level 2.2',
active: true
},
{
id: '2.3',
label: 'Level 2.3',
active: true
}]
}];