I am working on vue js and vue client table. I have created a vue-client-table and populated some dummy data as static.
Now there is a column name STATUS which will have two value i.e Active or Inactive.
I want to change the font color of 'Inactive' to red.
(Which denotes that link is down)
I need help to understand it.
Below I have attached my code:
Headings : [ 'APPLICATION NAME', 'URL','LAST ACCESSED','STATUS'],
tableData: [
{
"APPLICATION NAME": "Pannier",
"URL": "http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
"LAST ACCESSED": "5:07 PM",
"STATUS": 'Inactive'
},{
"APPLICATION NAME": "Kanlam",
"URL": "http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
"LAST ACCESSED": "7:02 AM",
"STATUS": 'active'
}
Below I have attached my image:
One simple way is to use Scoped slots, in order to add css class and the href attribute. Take a look at the official docs.
Here is an example.
Vue.use(VueTables.ClientTable);
new Vue({
el: "#app",
data: {
columns: ['APPLICATION NAME', 'URL', 'STATUS'],
tableData: [
{
"APPLICATION NAME": "Pannier",
"URL": "http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
"LAST ACCESSED": "5:07 PM",
"STATUS": 'Inactive'
},{
"APPLICATION NAME": "Kanlam",
"URL": "http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
"LAST ACCESSED": "7:02 AM",
"STATUS": 'active'
}],
}
});
.Inactive {
color: red
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
<h3>Vue Tables 2</h3>
<div id="app">
<v-client-table :columns="columns" :data="tableData">
<a :class="props.row.STATUS" :href="props.row.URL" slot="STATUS" slot-scope="props">{{props.row.STATUS}}</a>
</v-client-table>
</div>
You need to create a css class with name "Inactive", exactly the same with the "STATUS" value.
Related
How would I read deep JSON data nested deep inside a file? I've tried different methods and can't seem to get this to work.
<template>
<div>
<div v-for="edu in info" :key="edu">
<div>{{ edu.section.title }}</div> // this is what im trying to get to work
</div>
<div class="card container">
{{ info }}
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
info: null
}
},
mounted() {
axios
.get('./calculus.json') // Data Below
.then(response => (this.info = response.data.edu))
.catch(error => console.log(error))
}
}
</script>
My JSON looks like this:
{
"edu": {
"1": {
"title": "Title One",
"subtitle": "Subtitle One",
"description": "Description One",
"section": {
"1": {
"title": "Section One Title",
"content": "Section One Content"
}
}
},
"2": {
"title": "Title Two",
"subtitle": "Subtitle Two",
"description": "Description Two",
"section": {
"1": {
"title": "Section One Title",
"content": "Section One Content"
}
}
}
}
}
How can I use vue-for and get the data inside the section to get it to display under the title? For example: title, section>title, section>subtitle, etc.
Given each section is also an object with weird numeric keys, you can iterate them in the same way you do info.
I would also advise you to use identifiable values instead of the entire edu object in your :key bindings.
<div v-for="(edu, eduId) in info" :key="eduId">
<div v-for="(section, sectionId) in edu.section" :key="sectionId">
{{ section.title }}
</div>
</div>
If possible, I would alter the format of your JSON data to use actual arrays instead of objects with numeric keys.
One way to browse your object deeply is to cumulate v-for on your object (and children) entries.
ie:
<div v-for="([category, books], catkey) in Object.entries(info)" :key="`category-${catkey}`">
<div>{{ category }} :</div>
<div v-for="([num, book], numkey) in Object.entries(books)" :key=`book-${catkey}-${numkey}`>
<div v-for="([field, value], valkey) in Object.entries(book)" :key=`field-${catkey}-${numkey}-${valkey}`>
{{ field }} : {{ value }}
</div>
</div>
</div>
If you find it too verbose, you may try to flatten your computed data to have the following structure:
[
{
"category": "edu",
"id": "1",
"title": "Title One",
"subtitle": "Subtitle One",
"description": "Description One",
"section": {
"1": {
"title": "Section One Title",
"content": "Section One Content"
}
}
}
]
How to fetch the product name from the below result. I tried
<div class="card-divider">
{{ post.basic_info.prod_name }}
</div>
But it is not working
Many thanks
{
"name":"Test ProductCategory",
"updated":"2018-07-16 15:00:03",
"12":{
"basic_info":{
"prod_name":"Product name 1",
"status":"Active",
"image":""
},
},
"13":{
"basic_info":{
"prod_name":"Product name 2",
"status":"Active",
"image":""
},
}
}
Try this:
{{ post["12"].basic_info.prod_name }}
Your JSON have two same keys, so you will receive Product name 2 only, because, latter will replace previous key "12"
My suggestion, modify data to receive something like:
{
"name": "Test ProductCategory",
"updated": "2018-07-16 15:00:03",
"data": [
{
"basic_info": {
"prod_name": "Product name 1",
"status": "Active",
"image": ""
},
}, {
"basic_info": {
"prod_name": "Product name 2",
"status": "Active",
"image": ""
},
}
]
}
you can loop over data and get basic_info.prod_name then your html will be like:
<div class="card-divider" v-for="obj in post.data">
{{ obj.basic_info.prod_name }}
</div>
I have account with www.makemytrip.com and where 'from' field and 'to' field is already saved through cookies
Using extension, I would like to display the value present in 'from' field of that site. (whose id is 'hp-widget__sfrom')
On page load I am able to view the value but the same I can't achieve on click on my button defined in my extension
Below is the code: index.html
<html>
<head>
<title>My new extension</title>
</head>
<body>
<input type="button" id="save" value="Save Text">
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Test1",
"description": "TestDesc",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html",
"default_title": "Test11"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myContentScript.js"]
}
]
}
myContentScript.js
window.onload = function(){
alert("Hi by contentScript");
//alert(document.getElementById('hp-widget__sfrom').value); //this works!
//but the below doesn't work; onclick of button
document.getElementById('save').onclick = function(){
alert(document.getElementById('hp-widget__sfrom').value);
}
}
background.js
window.onload = function(){
alert("Hi by backgroundJS");
}
I appreciate any sort of help!
Just started with DOJO and Dgrid.
I've got this simple dgrid using a Memory store.
However the grid in the web page stay empty. Only the header is displayed.
....
#import "./dgrid/css/dgrid.css";
<script src="./dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true, isDebug: true">
</script>
<script language="javascript">
require
(
[
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/List",
"dgrid/Grid",
"dgrid/Keyboard",
"dgrid/Editor",
"dgrid/extensions/ColumnResizer",
"dijit/form/NumberTextBox",
"dstore/Memory",
"dojo/parser",
"dojo/domReady!",
"dijit/TooltipDialog",
"dijit/form/DropDownButton",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
],
function(
declare, arrayUtil, List, Grid, Keyboard, Editor, ColumnResizer, NumberTextBox, Memory
){
var prevpds =[
{itemnu: "TEST", itemna: "", batchn: "", cqty: 5, sqty: 5, sz: 5},
{itemnu: "TEST 44", itemna: "", batchn: "", cqty: 1, sqty: 2, sz: 3}
];
var pdsstore = new Memory({data: prevpds});
var getColumns = [
{ label: "Item Number", id: "itemnu", field: "text", editor: "text" },
{ label: "Item name", id: "itemna", field: "text", editor: "text" },
{ label: "Batch number", id: "batchn", field: "text", editor: "text" },
{ label: "Concerned Qty", id: "cqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Sold Qty", id: "sqty", field: "floatnumber", editor: "NumberTextBox" },
{ label: "Size/ Diameter", id: "sz", field: "floatnumber", editor: "NumberTextBox" }
];
var PdsGrid=declare([Grid, Keyboard, Editor, ColumnResizer]);
window.grid = new PdsGrid(
{
store: pdsstore,
columns: getColumns
}, "pdstable2"
);
}
);
</script>
You have at least two problems.
Firstly, assuming you're using dgrid 0.4 (which I assume since you're also using dstore), you should be setting collection instead of store.
Secondly, the base List and Grid modules do not read from stores; you will want to use either OnDemandGrid or the Pagination extension.
OnDemandList and OnDemandGrid docs
Pagination docs
I am doing a ajax request to the server to get the data.When the array is empty, I want it to be displayed in a table row "emptyTable". I get message "emptyTable", if not used aoColumnDefs, but I'm getting warning "Requested unknown parameter ... " . I do not want to receive a warning!
var searchTable = $('#baseTasks').dataTable({
bFilter: false, bInfo: false, "bLengthChange": false,
scrollY:"600px",scrollCollapse: true, paging:false,
"aaData": tasks,
"aoColumns": [
{ "mData": "name"
},{"mData": "schoolClass"
},{"mData": "complexity"
},{"mData": "author"
}]
});
if I use aoColumnDefs, I do not get warning, but I get an empty table without message "emptyTable".
"aoColumnDefs": [
{
"mData": null,
"sDefaultContent": null,
"aTargets": [ -1 ]
}],
How do I get a table with a message "emptyTable", if the aaData is an empty array?
Your code is correct. Run the code below for demonstration.
var tasks = [
{
"name": "Tiger Nixon",
"schoolClass": "System Architect",
"complexity": "$320,800",
"author": "2011\/04\/25"
},
{
"name": "Garrett Winters",
"schoolClass": "Accountant",
"complexity": "$170,750",
"author": "2011\/07\/25"
}
];
var tasksEmpty = [];
$(document).ready( function () {
var table = $('#example').DataTable({
"data": tasksEmpty,
"columns": [
{ "data": "name"},
{ "data": "schoolClass" },
{ "data": "complexity"},
{ "data": "author" }
],
"searching": false,
"info": false,
"lengthChange": false,
"scrollY":"600px",
"scrollCollapse": true,
"paging":false,
});
});
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
</table>
Most likely cause of Requested unknown parameter error is that your data is not structured properly or some of the properties (name, schoolClass, complexity or author) are not found.
Your data should have the following structure. Make sure that every array item has all the properties required.
var tasks = [
{
"name": "Tiger Nixon",
"schoolClass": "System Architect",
"complexity": "$320,800",
"author": "2011\/04\/25"
},
{
"name": "Garrett Winters",
"schoolClass": "Accountant",
"complexity": "$170,750",
"author": "2011\/07\/25"
}
];
Also please note that your code uses parameters for different versions of DataTables. Although newer DataTables library is backward-compatible, I have updated your code to use initialization parameters for the most recent version. Please see this migration guide for more information.
Add the below line of code to your datatable with your message set to sEmptyTable.
oLanguage: {
"sEmptyTable": "No data found.",
}