I want to show DOM elements in alloyui dataTable. but the alloyui table does not show the DOM elements. My code is as following:
var tableData = [];
this._popupContent.innerHTML = "";
for(var key in this._info){
(function(k) {
var item = {};
item.name = k;
item.dom = document.createElement('a');
item.dom.innerHTML = key;
item.dom.addEventListener("click", function(){
//do something
console.log(k);
});
tableData.push(item);
})(key)
}
YUI().use(
'aui-datatable',
function(Y) {
var columns = [
{ key: 'name',
allowHTML: true
},
{
key: 'dom',
allowHTML: true
}
];
new Y.DataTable({
columnset: columns,
recordset: tableData
}).render('#popupContent');
}
);
can some help me?
Related
I am trying to export DataTable into excel file (.xlsx).
In jQuery, I am removing the unwanted rows.
When I try to open the excel file, it is showing:
"Excel found unreadable content in '[filename].xlsx'. Do you want to recover the contents of this workbook? If you trust the source of this workbook, click Yes."
The error is showing as:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<recoveryLog
xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main">
<logFileName>error128600_02.xml</logFileName><summary>Errors were detected
in file '[filename].xlsx'</summary><removedRecords summary="Following is a
list of removed records:"><removedRecord>Removed Records: Cell information
from /xl/worksheets/sheet1.xml part</removedRecord></removedRecords>
</recoveryLog>
The exported file is opening fine in OpenOffice with removed rows.
Here is the code to remove unwanted rows:
I have 5 Columns in my DataTable and removing the unwanted rows based on columns 3,4,5
customize: function (xlsx) {
var exportData=[];
var sheet =xlsx.xl.worksheets['sheet1.xml'];
var clR = $('row', sheet);
var clR = $('row', sheet);
$('row', sheet).filter(function () {
var attr = $(this).attr('r');
if(attr>3)
{
if($(this).context.children.length===5){
var Item1= parseInt($(this).context.children[2].children[0].textContent);
var Item2= parseInt($(this).context.children[3].children[0].textContent);
var Item3= parseInt($(this).context.children[4].children[0].textContent);
if(Item1===0 && Item2 ===0 && Item3===0 ){
return true;
}
else{
exportData.push([{ key: 'A', value: $(this).context.children[0].children[0].textContent },
{ key: 'B', value: $(this).context.children[1].children[0].textContent },
{ key: 'C', value: $(this).context.children[2].children[0].textContent },
{ key: 'D', value: $(this).context.children[3].children[0].textContent },
{ key: 'E', value: $(this).context.children[4].children[0].textContent }]);
}
return false;
}
}
}).remove();
//update Row
clR.each(function () {`enter code here`
var attr = $(this).attr('r');
var ind = parseInt(attr);
if(ind>3){
$(this).remove();
}
});
// Create row before data
$('row c ', sheet).each(function () {
var attr = $(this).attr('r');
var pre = attr.substring(0, 1);
if(pre>3){
$(this).remove();
}
});
function Addrow(index,data) {
msg='<row r="'+index+'">'
for(i=0;i<data.length;i++){
var key=data[i].key;
var value=data[i].value;
msg += '<c t="inlineStr" r="' + key + index + '">';
msg += '<is>';
msg += '<t>'+value+'</t>';
msg+= '</is>';
msg+='</c>';
}
msg += '</row>';
return msg;
}
//insert
var addrows="";
exportData.each(function (item,index) {
var r1 = Addrow(index+4, item);
addrows=r1+addrows;
});
sheet.childNodes[0].childNodes[1].innerHTML = sheet.childNodes[0].childNodes[1].innerHTML+addrows;
}
I used this ,to multiply doughnut chart according as array(arr) has,but it can't change to object,(data has string type).So chart doesn't appear here..,how fix it
var arr=['HTML','CSS','JS'],i,data;
data ='[';
for(i=0;i<arr.length;i++){
if(i==arr.length-1){
data+='{value:"300",color:"#fff",highlight:"#aaa",label:arr[i]}';
}
else{
data+='{value:"300",color:"#fff",highlight:"#aaa",label:arr[i]},';
}
}
data += ']';
var dat = data;
window.onload = function () {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myBar = new Chart(ctx).Doughnut(dat,{
responsive: true,
});
};
//want like this
dat =[{value:"300",color:"#fff",highlight:"#aaa",label:"HTML"},
{value:"200",color:"#fff",highlight:"#aaa",label:"CSS"}];
You are creating your array as a String.
You need to create an array of objects [{},{},{}].
The method used to INSERT a new object in an array is PUSH().
Check the fiddle. Now it´s working OK (move the mouse on the screen to see the chart is there (you will only see it when mouse is over it):
window.onload = function() {
var arr = ['HTML', 'CSS', 'JS'],
i, data;
data = [];
for (i = 0; i < arr.length; i++) {
if (i == arr.length - 1) {
data.push({
value: "300",
color: "#fff",
highlight: "#aaa",
label: arr[i]
});
} else {
data.push({
value: "300",
color: "#fff",
highlight: "#aaa",
label: arr[i]
});
}
}
var dat = data;
var ctx = document.getElementById("chart-area").getContext("2d");
window.myBar = new Chart(ctx).Doughnut(dat, {
responsive: true,
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.js"></script>
<canvas id="chart-area"></canvas>
I based my logic on the code suggested here http://jsfiddle.net/LkLkd405/4/
I added 2 new items to the default context menu (code from my helpers module)
addColHideItemsToContextMenu: function(hot, colsToHide, globalColumns, globalHeaders){
var items = hot.contextMenu.defaultOptions.items;
//console.log("items: "+JSON.stringify(items));
//hide_col based on existing remove_col
var hideColItem = {
key: 'hide_col',
name: 'Hide column',
callback: function(key, selection) {
//remove_col code
//var amount = selection.end.col - selection.start.col + 1;
//this.alter("remove_col", selection.start.col, amount);
//hide_col custom code
colsToHide.push(selection.start.col);
var newCols = [];
var newHeaders = [];
for (var i = 0; i < globalHeaders.length; i++) {
if (colsToHide.indexOf(i) === -1) {
newCols.push(globalColumns[i]);
newHeaders.push(globalHeaders[i]);
}
}
hot.updateSettings({
columns: newCols,
colHeaders: newHeaders
});
},
disabled: function() {
var selected = this.getSelected(),
entireRowSelection = [selected[0], 0, selected[0], this.countCols() - 1],
rowSelected = entireRowSelection.join(',') == selected.join(',');
return (selected[1] < 0 || rowSelected);
}
};
items.push(hideColItem);
var showAllColItem = {
key: 'showall_cols',
name: 'Show all columns',
callback: function(key, selection) {
//var amount = selection.end.col - selection.start.col + 1;
//this.alter("remove_col", selection.start.col, amount);
colsToHide = [];
hot.updateSettings({
columns: globalColumns,
colHeaders: globalHeaders
});
},
disabled: function() {
return false;
}
};
items.push(showAllColItem);
},
I then have a server side paging module can receives json objects from the server and converts them to an array of arrays, else new columns cannot be added.
EnhancementPager: function(paramObj) {
var handsontableIntegration = function(rows){// called line 283
paramObj.handsonDataObjects = rows;//received from the server and not used again
paramObj.handsonDataArrays = help.buildArrayFromObjs(rows);
paramObj.globalHeaders = help.extractColHeaders(rows[0]);
paramObj.globalColumns = help.buildArrayDataSourceColumnConfig(paramObj.handsonDataArrays[0]);
paramObj.colsToHide = [];
if(paramObj.table){
var hot = paramObj.table;
hot.updateSettings({
colHeaders: paramObj.globalHeaders,
columns: paramObj.globalColumns
});
help.addColHideItemsToContextMenu(hot, paramObj.colsToHide, paramObj.globalColumns, paramObj.globalHeaders);
hot.loadData(paramObj.handsonDataArrays);
}
}
This is what the grid looks like on load - notice the values on the top row
This is what the top row changes to after hiding the column
Then is I select the show all context item
The top row changes to this
I've only been working with handsontable for a few days, it's a really well written and organised js api. But I'm pretty mystified by this behaviour.
I used the listbox UI element in Wordpress 3.8, but it does not work in its newer version (3.9). I wrote this JS code to test it:
(function() {
var ICONS;
var icon = function(id) {
return '<i class="fa fa-' + id + '"></i>';
}
ICONS = ["rub", "ruble", "rouble", "pagelines", "stack-exchange", "arrow-circle-o-right", "arrow-circle-o-left", "caret-square-o-left", "toggle-left", "dot-circle-o", "wheelchair", "vimeo-square", "try", "adjust", "anchor", "archive", "arrows", "arrows-h", "arrows-v", "asterisk", "ban", "bar-chart-o", "barcode", "bars", "beer", "bell", "bell-o", "bolt", "book", "bookmark", "bookmark-o", "briefcase", "bug"]
var menuval=[];
for (var i = 0; i < ICONS.length; i++) {
var _id = ICONS[i];
menuval.push({text: icon( _id )+' '+_id, onclick: function(){setcontentfun(_id)}
});
}
tinymce.PluginManager.add("font_awesome_glyphs", function(editor, url) {
var menucreate=editor.addButton('fontAwesomeGlyphSelect', {
type: 'listbox',
text: 'Icons',
icon: false,
values: menuval
});
});
function setcontentfun(id) {
alert(id);
return false;
}
})();
This created displayed a listbox, but when I click on a menu item instead of alerting the last element of "ICON" array it displays all elements in listbox. How can I alert the list item, which I clicked?
Just did some updates in your code:
var menuval=[];
var insertVar = function (val) {
return function () {
editor.insertContent(val);
}
};
for (var i = 0; i < SHORTCODES.length; i++) {
var _id = SHORTCODES[i];
var _code = SHORTCODE_EXE[i];
var variable = insertVar(_code);
//alert(_id+' '+ SHORTCODES[i]+' '+SHORTCODE_EXE[i]);
menuval.push({text: _id, onclick: variable });
}
I am pretty new to javascript and jquery. I currently have a xml file that I'm trying to parse by using jquery and javascript, but for some reason the values that I store on the array are not being saved.
var categories = new Array(); // Array for the categories
var data = {
categories: []
};
var sources = [
{
src:'',
title: '',
desc: ''
}];
var i = 0;
$.get('fakeFeed.xml', function (info) {
$(info).find("item").each(function () {
var el = $(this);
var categoryName = el.find('category').text();
var p = categories.indexOf(categoryName);
sources[i] = [];
sources[i].src = el.find('media\\:content, content').attr('url');
sources[i].title = el.find("title").text();
sources[i].desc = 'Moscone Center';
if( p == -1) {
categories.push(categoryName);
var category = {
name: categoryName,
videos: []
};
}
i++;
});
});
If i do console.log(categories) it prints all the categories on the array but if I do console.log(categories.length) I keep getting 0...
console.log(categories.length); // This should be outputting 5 but I keep getting 0 for the size.
for (var i=0; i<categories.length; i++) {
var category = {
name: categories[i],
videos: []
};
}
I appreciate any help that anybody can give me. Thanks
$.get function is asynchronous so you should try putting the logging inside the callback function.
$.get('fakeFeed.xml', function (info) {
$(info).find("item").each(function () {
....
});
console.log(categories.length);
});