jqxgrid打印格式和缺少的列_Jqxgrid

jqxgrid打印格式和缺少的列

jqxgrid打印格式和缺少的列,jqxgrid,Jqxgrid,我有一个jqxgrid，它从数据库获取数据。我添加了一个运行时列调用序列号。这显示在网格上。网格上还有一个打印按钮。单击“打印”按钮会打开一个带有打印预览的新窗口，但在预览中不会显示Sr.编号请看一下下面的代码，如果你能指引我正确的方向谢谢 <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"></div> <

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

请看一下下面的代码，如果你能指引我正确的方向

谢谢

<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数据=生成数据（100）；
变量源={
localdata:data，
数据类型：“数组”，
数据字段：[{
姓名：'firstname'，
键入：“字符串”
}, {
名称：“lastname”，
键入：“字符串”
}, {
名称：“productname”，
键入：“字符串”
}, {
名称：'可用'，
类型：“bool”
}, {
名称：“数量”，
键入：“数字”
}, {
名称：'价格'，
键入：“数字”
}],
updaterow:函数（rowid、rowdata）{
//与服务器同步-发送更新命令
}
};
var dataAdapter=new$.jqx.dataAdapter（源）；
//初始化jqxGrid
$（“#jqxgrid”）.jqxgrid({
宽度：700，
来源：dataAdapter，
主题：“能量蓝”，
是的，
selectionmode:'singlecell'，
栏目：[
{
文本：'#'，可排序：false，可筛选：false，可编辑：false，
可分组：false，可拖动：false，可调整大小：false，
数据字段：“”，列类型：'number'，宽度：30，
CellsRender:函数（行、列、值）{
返回“+（值+1）+”；
}
},
{
文本：“名字”，
columntype:'文本框'，
数据字段：“名字”，
宽度：90
}, {
文本：“姓氏”，
数据字段：“lastname”，
columntype:'文本框'，
宽度：90
}, {
文本：“产品”，
数据字段：“productname”，
宽度：170，
}, {
文字：“价格”，
数据字段：'价格'，
cellsalign:'对'，
单元格格式：“c2”，
宽度：100
}]
});
$（“#打印”）.jqxButton({
主题：“能量蓝”
});
$（“#打印”）。单击（函数（）{
var prnt=$（“#jqxgrid”）.jqxgrid（'exportdata'，'html'）；
var newWindow=window.open（''，'宽度=800，高度=500'），
document=newWindow.document.open（），
页面内容=
'\n'+'\n'+'\n'+'\n'+'摘要\n'+'\n'+'\n'+
“\n\n”+
“\n邮件\n”+
“\n



”+prnt+“\n\n”；
文件。编写（页面内容）；
newWindow.print（）；
});
});

这是一个工作样本。但我不知道如何使按钮工作。

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();
});
});