I am using bootstrap table to display some data in my web application. https://bootstrap-table.com/ and I want to put an export feature in. The docs say to use https://github.com/hhurz/tableExport.jquery.plugin so I have added this to my imports and made the necessary code changes. Within the docs for this it says you can specify a format for the cells you are exporting by applying optional html data attributes while generating the table but how do I do this if my table is generated using bootstrap-table. I can't seem to work it out.. I basically need to the html data attribute data-tableexport-msonumberformat="0" to a set of td's generated by my bootstrap-table javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/webjars/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script type="text/javascript" src="/webjars/bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="/webjars/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet"></script>
</head>
<body class="bg-light">
<button id="exportExcelBtn" class="btn btn-sm btn-success" type="button">
Export
</button>
<table id="table"></table>
<script src="/webjars/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="/webjars/bootstrap-table/1.16.0/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary"
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true,
**tableExport: {msoNumberFormat: '0'}**
}
})
});
</script>
</body>
</html>
https://github.com/himingby/tableExport.jquery.plugin/blob/master/test/index.html
could you try this below?
<script type="text/javascript">
function DoOnMsoNumberFormat(cell, row, col) {
var result = "";
if (row > 0 && col === 0)
result = "\\#";
else if (row > 0 && col === 2)
result = "0"; // #issue 327: Preserve long numbers
return result;
};
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary"，
mso:{onMsoNumberFormat: DoOnMsoNumberFormat},
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true
}
})
});
Related
This only displays barebones html rows and columns but obviously I need dgrids rows and columns. This is the exact code from dgrids hello world tutorial.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello dgrid!</title>
</head>
<body>
<div id="grid"></div>
<!-- this configuration assumes that the dgrid package is located
in the filesystem as a sibling to the dojo package -->
<script src="/Users/theUser/node_modules/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([ 'dgrid/Grid', 'dojo/domReady!' ], function (Grid) {
var data = [
{ first: 'Bob', last: 'Barker', age: 89 },
{ first: 'Vanna', last: 'White', age: 55 },
{ first: 'Pat', last: 'Sajak', age: 65 }
];
var grid = new Grid({
columns: {
first: 'First Name',
last: 'Last Name',
age: 'Age'
}
}, 'grid');
grid.renderArray(data);
});
</script>
</body>
</html>
The code above is missing line 6 from the tutorial:
<link rel="stylesheet" href="path/to/dgrid/css/dgrid.css">
With the latest stable version of Handlebar, I'm trying to display the site name while iterating through each children. The output of the code below is:
5
Stackoverflow
One -
Two -
Can handlebars retrieve the site name by walking up while rendering the children?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="handlebars.js"></script>
<script>
$(document).ready(function() {
var source = $('#entry-template').html();
var template = Handlebars.compile(source);
var context = {
site: {
age: 5,
name: 'Stackoverflow',
children: [
{
name: 'One'
},
{
name: 'Two'
}
]
}
};
$('div#output').html(template(context));
});
</script>
</head>
<body>
<div id="output"></div>
<script id="entry-template" type="text/x-handlebars-template">
<div>{{site.age}}</div>
<div>{{site.name}}</div>
{{#each site.children}}
<div>{{name}} - {{site.name}}</div>
{{/each}}
</script>
</body>
</html>
Try doing {{../site.name}} in your loop. The ../ Handlebars syntax allows access of the parent scope.
I have put Google translate code on my site, but it's not showing Language option in select field:
And the code is:
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout:
google.translate.TranslateElement.InlineLayout.HORIZONTAL, autoDisplay: false},
'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Re : google.Translate.ElementInit() callback .. autoDisplay: True or deleted should render the language options. Note that the option (language trigger value and name) are not rendered immediately after the this callback .. which is irritating if you want to switch language on a navigator.language || navigator.userLanguage result.
Here's the code i use:
<div id="google_translate_element"></div>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay:true,
defaultLanguage: 'en',
}, 'google_translate_element');
}
</script>
In IE9, every click in certain place in form increases form height.
I used Oleg jqGrid sample for create testcase.
Steps to reproduce:
Open page below in Internet Explorer 9
Click in first row in text 'clicking me increases form height' so that it becomes yellow
click in view record button in lower left corner
click in 'clicking me increases form height' text in form
Observed:
Every click increases form height in Internet Explorer 9.
How to fix this ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>how to center jqGrid popup modal window?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script>
<!--<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js"></script>-->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var mydata = [
{id:"2",invdate:"2007-10-02",name:"clicking me increases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
var grid = $("#list");
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', key: true, width:70, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true},
{name:'name',index:'name', width:100, editable: true, edittype: 'textarea',
wrap: 'on',
editoptions: { wrap : "on",
style : "width:30px"
}
},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},
{name:'note',index:'note', width:150, sortable:false}
],
pager:'#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: "100%",
caption: "Custom Navigation to Top Toolbar"
});
grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true},
{ beforeShowForm: function(form) {
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tbody><tr><td/></tr></tbody></table>
<div id="pager"/>
</body>
</html>
Yes Andrus, it's exactly the same IE9 bug which reference I posted you today: this bug report. The bug was fixed in the main grid in jqGrid 4.0, but you found one more place where exactly the same problem exist.
To fix the problem I suggest the following. In the View form where the error take place we test whether the value of height of the form is 'auto' and the code run under IE9. In the case we will change the setting height: 'auto' to height: '100%':
grid.jqGrid('navGrid', '#pager', {view: true}, {}, {}, {}, {},
{
beforeShowForm: function ($form) {
if ($.browser.msie && $.browser.version.slice(0,3) === '9.0' &&
$form[0].style.height === 'auto') {
$form[0].style.height = '100%';
}
}});
See the demo demonstrate the bug fix (here one can test the bug in IE).
UPDATED: I looked in the source code of viewGridRow and found more easy workaround. One should just use (see the demo)
{ dataheight: '100%' }
setting instead of default dataheight: 'auto' setting. By the way I didn't found in the code of jqGrid any place where the height parameter will be used. It seems, that one should now use dataheight parameter instead.
If I would find enough time I would post the bug to Microsoft as the official support request. My previous expiration was always the same: MS confirmed the bug as confirmed that my request was for free: I don't have to pay for the request. On the other side to create the clear example and to describe the problem one need time. So I should invest my time and "for free". Moreover the bug will be typically not fixed in the current product (IE9) and will be probably fixed in the next version of IE (IE10). In such situation the writing of the bug reports is not really attractive. :-)
I'm trying to run the treegrid example but it only gives me the grid with no data in it!
this is my default.aspx:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My tree grid</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs4/ext-all.js"></script>
<!-- example code -->
<script type="text/javascript" src="Scripts/treepanel.js"></script>
</head>
<body>
<h1>My tree grid</h1>
<div id="tree-div"> </div>
this is my treepanel.js
Ext.Loader.setConfig({ enabled: true }); //
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.container.Viewport',
'Ext.layout.*',
'Ext.form.Panel',
'Ext.form.Label',
'Ext.grid.*',
'Ext.data.*',
'Ext.tree.*',
'Ext.selection.*',
'Ext.tab.Panel'
]);
Ext.onReady(function ()
{
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'treegrid.json'////
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: 'tree-div',
rootVisible:true,
store: store,
autoload:true,
columns: [{xtype: 'treecolumn', text: 'Task', dataIndex: 'task' },{text: 'Assigned To', dataIndex: 'user'}]
});
});
am I doing something wrong here?
I have no error msg from my firebug...so why isn't it working?
if I can't run an example how am I going to do more..I'm frustrated with this.
not sure, but the "autoLoad: true" is now on the panel, but shouldn't it be on the store?
Install PHP and do the following in IIS:
click on the new site
click on MIME types
right click in open space > Add > File name extension: "json" ... MIME Type: "application/x-javascript"
Adding more details:
http://www.sencha.com/forum/showthread.php?33266-Some-Problem-with-JSON&p=229858&viewfull=1#post229858