jqxgrid 打印格式和缺失列

问题描述 投票：0回答：1

我有一个从数据库获取数据的 jqxgrid。我添加了一个运行时列调用序列号。这在网格上显示得很好。网格上还有一个打印按钮。单击打印按钮时会打开一个带有打印预览的新窗口，但在预览中它不会显示 Sr. Numbers。

请查看下面的代码，看看你是否能引导我走向正确的方向。

谢谢

<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/

jqxgrid
1个回答
0
投票

您面临的问题是由于序列号列不是数据源的一部分，而是在运行时生成的。当您使用 

exportdata
方法导出网格数据时，它仅导出网格数据源中存在的数据。 要将序列号包含在打印预览中，您需要将序列号数据添加到数据源中。具体方法如下：

将序列号添加到数据源

for (var i = 0; i < data.length; i++) {
    data[i].serialNumber = i + 1;
}

向数据字段添加了序列号

datafields: [
    // ... your other data fields ...
    { name: 'serialNumber', type: 'number' }
]

更新了列以包含序列号

{
    text: '#',
    datafield: 'serialNumber', // Replace your current Serial Number column with this
    width: 30
}

结果

var data = generatedata(100);

// Add a 'serialNumber' property to each data item
for (var i = 0; i < data.length; i++) {
    data[i].serialNumber = i + 1;
}

var source = {
  localdata: data,
  datatype: "array",
  datafields: [
    { name: 'serialNumber', type: 'number' }, // Add a new field for 'serialNumber'
    { 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: '#',
    datafield: 'serialNumber', // Replace your current Serial Number column with this
    width: 30
  },
  {
    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);

  var css = '@page { size: landscape; }',
                     head = document.head || document.getElementsByTagName('head')[0],
                     style = document.createElement('style');

  style.type = 'text/css';
  style.media = 'print';

  if (style.styleSheet){
      style.styleSheet.cssText = css;
  } else {
      style.appendChild(document.createTextNode(css));
  }

  head.appendChild(style);

  document.close();
  newWindow.print();
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.