У меня есть jqxgrid, который получает данные из БД. я добавил время выполнения колонки вызова серийный номер. Это показывает на сетке в порядке. Также на сетке есть кнопка печати. При нажатии кнопки печати открывается новое окно с предварительным просмотром печати, но в предварительном просмотре не отображаются номера старших.
Просьба взглянуть на приведенный ниже код, и если вы можете привести меня в правуюНаправление.
Спасибо
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
<div style='margin-top: 20px;'>
<div style='float: left;'>
<input type="button" value="Print" id='Print' />
</div>
</div>
var data = generatedata(100);
var source = {
localdata: data,
datatype: "array",
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'available',
type: 'bool'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
updaterow: function (rowid, rowdata) {
// synchronize with the server - send update command
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid({
width: 700,
source: dataAdapter,
theme: 'energyblue',
editable: true,
selectionmode: 'singlecell',
columns: [
{
text: '#', sortable: false, filterable: false, editable: false,
groupable: false, draggable: false, resizable: false,
datafield: '', columntype: 'number', width: 30,
cellsrenderer: function (row, column, value) {
return "<div style='margin:4px;'>" + (value + 1) + "</div>";
}
},
{
text: 'First Name',
columntype: 'textbox',
datafield: 'firstname',
width: 90
}, {
text: 'Last Name',
datafield: 'lastname',
columntype: 'textbox',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170,
}, {
text: 'Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2',
width: 100
}]
});
$("#Print").jqxButton({
theme: 'energyblue'
});
$("#Print").click(function () {
var prnt = $("#jqxgrid").jqxGrid('exportdata', 'html');
var newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>\n' + '<html>\n' + '<head>\n' + '<meta charset="utf-8" />\n' + '<title>Summary</title>\n' + '</head>\n' + '<body>\n' +
'<div>\n<div id="image1" style="position:absolute; overflow:hidden; left:3px; top:3px; width:160px; float:left;">\n' +
'</div>\n<div style="margin-left: 300px;float:left;top:5px;"><h2>Sums</h2></div>\n' +
'</div>\n<br /><br /><br /><br />' + prnt + '\n</body>\n</html>';
document.write(pageContent);
newWindow.print();
});
});
вот рабочий образец. Но я не уверен, как заставить работать кнопку.
https://jsfiddle.net/Vinod1/by6duep4/3/