Question

我有一个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/

jqxgrid打印格式和缺少列

0 个答案: