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).
Related
I have a Laravel + Inertiajs + Vue 3 with Vite
I user Quasar framework so in one vue file I have a Quasar table.
Now I need to translate the column labels.
<template>
<head title="Elenco utenti"></head>
<AuthenticatedLayout>
<template #header>
<div>
<q-toolbar class="q-gutter-sm">
<Link :href="route('list-utenti')" type="button" class="float-right"><q-btn flat round dense icon="people" /></Link>
<div class="text-subtitle1">{{ $t('utenti.pagetitle')}}</div>
</q-toolbar>
</div>
</template>
<div class="q-py-md q-gutter-sm">
<Link :href="route('register')" type="button" class="float-right"><q-btn icon="add_box" color="white" text-color="text-grey-7" :label="$t('utenti.btn_new')"></q-btn></Link>
</div>
<div class="q-py-xl">
<q-table
title=""
:rows="users"
:columns="columns"
row-key="id"
>
<template v-slot:body-cell-actions="props">
<q-td :props="props">
<q-btn icon="mode_edit" #click="onEdit(props.row)"></q-btn>
<q-btn icon="person_off" #click="onDelete(props.row)"></q-btn>
</q-td>
</template>
<template v-slot:body-cell-email="props">
<q-td :props="props">
<strong>{{ props.value }} </strong>
</q-td>
</template>
</q-table>
</div>
</AuthenticatedLayout>
</template>
As you can see in the template code, I configured i18n and I can correctly translate with {{ $t('utenti.pagetitle') }} when in template.
now this is the script part
<script setup>
import AuthenticatedLayout from '#/Layouts/AuthenticatedLayout.vue';
import { Inertia } from '#inertiajs/inertia';
import { Link } from '#inertiajs/inertia-vue3';
import { computed, ref} from '#vue/reactivity';
import { Quasar, useQuasar } from 'quasar';
const props = defineProps({
page_description : String,
title: String,
numero_record: Number,
users: Array
});
const columns = [
{
name: 'id',
required: true,
label: 'id',
align: 'left',
field: row => row.id,
format: val => `${val}`,
sortable: false
},
{ name: 'name', align: 'left', label: translated_name, field: 'name', sortable: true},
{ name: 'email', align: 'left', label: 'e-mail', field: 'email', sortable: false},
{ name: 'ruolo', align: 'left', label: 'ruolo', field: 'ruolo', sortable: true},
{ name: 'listino_grossista_visible', align: 'center', label: 'list. grossista', field: 'listino_grossista_visible', sortable: true},
{ name: 'enabled', align: 'center', label: 'Attivo', field: 'enabled', sortable: true},
{ name: 'actions', align: 'center', label: 'Azioni'}
]
const onEdit = (row) => {
Inertia.post(route('edit-utente'),
{ row } ,
{ onBefore: () => confirm('Vuoi veramente modificarlo?')}
)
}
const onDelete = (row) => {
alert('DELETE ' + row.email);
}
</script>
I would like to use in some way $t to get the correct translation for the grid columns labels (for example 'translated_name' but I don' understand how I can do it as it is in the script part and I can not use same as in template.
I probably understood that I need to add some computed properties but I didn't exactly figured out how. Consider I'm using composition api.
const translated_name = computed(() => {
return $t('utenti.nome')
})
I checked also this link Vue-i18n not translating inside component script tags but I didn't understood how to adapt to my case.
kind regards,
Matt
...
<b-table
class="table table-bordered"
id="my-table"
striped hover
:items="items"
:per-page="perPage"
...
></b-table>
items: [
{ id : 1, name : "Taylor", status: "passive" },
{ id : 2, name : "Tom", status: "passive" },
{ id : 3, name : "Arthur", status: "passive" },
...
İ want name or more details when i click it will transfer to new page. How can i do that ?
You can use slots to customize your b-table. I prepared a code snippet to show you how you can add a detail button in your table and redirect the user to a new page after clicking on it.
new Vue({
el: '#app',
data() {
return {
fields: ['id', 'name', 'status', 'details'],
items: [{
id: 1,
name: "Taylor",
status: "passive"
},
{
id: 2,
name: "Tom",
status: "passive"
},
{
id: 3,
name: "Arthur",
status: "passive"
},
]
}
},
methods: {
},
mounted() {},
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.22.0/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-table bordered id="my-table" striped hover :items="items" :fields="fields">
<template #cell(details)="row">
<b-link :to="`/items/${row.item.id}`">Details</b-link>
</template>
</b-table>
</div>
Hi everyone I want to not show "html tags" When i have data in tables, but i want show text only like microsoft word, I'm not sure on the support, I don't know to fix it and I have tried many times, I think can't to remove all the html tags from string, I used CKeditor to input and datatable of vue output from vueX
help me please
Example Outpout
<template>
<div class="container" id="annoucements">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-primary card-header-icon">
<div class="card-icon">
<i class="material-icons">assignment</i>
</div>
<h4 class="card-title">
{{ $t('global.table') }}
<strong>{{ $t('cruds.annoucement.title') }}</strong>
</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="table-overlay" v-show="loading">
<div class="table-overlay-container">
<material-spinner></material-spinner>
<span>Loading...</span>
</div>
</div>
<datatable
:columns="columns"
:data="data"
:total="total"
:query="query"
:xprops="xprops"
:HeaderSettings="false"
:pageSizeOptions="[10, 25, 50, 100]"
>
<global-search :query="query" class="pull-left" />
<span style="margin-left:10%">
<button
type="button"
class="btn btn-default"
#click="fetchIndexData"
:disabled="loading"
:class="{ disabled: loading }"
>
<i class="material-icons" :class="{ 'fa-spin': loading }">
refresh
</i>
{{ $t('global.refresh') }}
</button>
</span>
<header-settings :columns="columns" class="pull-right" />
</datatable>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import TranslatedHeader from '#components/Datatables/TranslatedHeader'
import HeaderSettings from '#components/Datatables/HeaderSettings'
import GlobalSearch from '#components/Datatables/GlobalSearch'
import DatatableAttachments from '#components/Datatables/DatatableAttachments'
export default {
components: {
GlobalSearch,
HeaderSettings
},
data() {
return {
columns: [
{
title: 'cruds.annoucement.fields.id',
field: 'id',
thComp: TranslatedHeader,
sortable: true,
colStyle: 'width: 100px;'
},
{
title: 'cruds.annoucement.fields.annoucement',
field: 'annoucement',
thComp: TranslatedHeader,
tdComp: DatatableAttachments
},
{
title: 'cruds.annoucement.fields.name',
field: 'name',
thComp: TranslatedHeader,
sortable: true
},
{
title: 'cruds.annoucement.fields.number',
field: 'number',
thComp: TranslatedHeader,
sortable: true
},
{
title: 'cruds.annoucement.fields.short_name',
field: 'short_name',
thComp: TranslatedHeader,
sortable: true
},
{
title: 'cruds.annoucement.fields.allow_date',
field: 'allow_date',
thComp: TranslatedHeader,
sortable: true
},
{
title: 'cruds.annoucement.fields.description',
field: 'description',
thComp: TranslatedHeader,
}
],
query: { sort: 'id', order: 'desc', limit: 100, s: '' },
xprops: {
module: 'AnnoucementsIndex',
route: 'annoucements',
permission_prefix: 'annoucement_'
}
}
},
beforeDestroy() {
this.resetState()
},
computed: {
...mapGetters('AnnoucementsIndex', ['data', 'total', 'loading'])
},
watch: {
query: {
handler(query) {
this.setQuery(query)
this.fetchIndexData()
},
deep: true
}
},
methods: {
...mapActions('AnnoucementsIndex', [
'fetchIndexData',
'setQuery',
'resetState'
])
}
}
</script>
Use method below for each cell or make an copy of data that contains string without html:
removeHtmlTags(htmlString) {
const tmp = document.createElement('DIV');
tmp.innerHTML = htmlString;
return tmp.textContent || tmp.innerText || '';
}
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!
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
}]
}];