下面是详细讲解“JqGrid web打印实现代码”的完整攻略：

JqGrid web打印实现代码详解

JqGrid web打印简介

JqGrid是一款基于jQuery的网页表格插件，它提供了丰富的功能和选项，可以非常轻松地创建和展示各种类型的表格。而JqGrid web打印实现代码则是在JqGrid的基础上，添加了网页打印的功能，方便用户在页面上进行数据打印。

JqGrid web打印实现步骤

Step 1：引入JqGrid和其他类库

首先，在页面中引入JqGrid及其相关的类库，比如jQuery、jQuery UI等。具体引入方式如下：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入jQuery UI -->
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">

<!-- 引入JqGrid -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">

Step 2：创建JqGrid表格

在页面上创建一个JqGrid表格，并配置表头和数据等内容。具体配置方式参见JqGrid官方文档。

<table id="myGrid"></table>
<div id="pager"></div>

<script>
  jQuery("#myGrid").jqGrid({
    url:'data.json',
    datatype: "json",
    colNames:['Name', 'Age', 'Sex'],
    colModel:[
      {name:'name',index:'name', width:200, align:"left"},
      {name:'age',index:'age', width:200, align:"left"},
      {name:'sex',index:'sex', width:200, align:"left"}
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager',
    sortname: 'name',
    viewrecords: true,
    sortorder: "desc",
    caption:"JqGrid Example"
  });
  jQuery("#myGrid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
</script>

Step 3：加载web打印插件

在页面中引入web打印插件的代码，以及相关样式文件。这里我们使用的是jQuery Print Area插件，具体引入方式如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-print-area/2.4.1/jquery.printarea.min.js"></script>

Step 4：添加打印按钮

在页面上添加一个打印按钮，以便用户点击按钮时进行打印。例如：

<button id="printButton">Print</button>

Step 5：编写web打印实现代码

最后，编写web打印的实现代码。这里我们监听打印按钮的点击事件，在点击时获取JqGrid表格的内容，并调用jQuery Print Area插件进行打印。具体代码如下：

$("#printButton").click(function() {
  var gridHtml = $("#myGrid").get(0).outerHTML;
  $("#printArea").html(gridHtml);
  $.print("#printArea");
});

其中，#myGrid是JqGrid表格的ID，#printArea是一个隐藏的div元素，用于存储要打印的内容。

示例说明

以下是两个JqGrid web打印的实例说明：

示例一：JqGrid表格打印

假设我们有一个学生信息表格，包含学生姓名、年龄、性别等字段。我们可以使用JqGrid创建一个动态的表格，然后添加一个打印按钮。当用户点击打印按钮时，我们将该表格的HTML代码复制到一个隐藏的div元素中，并调用jQuery Print Area插件进行打印。具体代码如下：

<body>
  <table id="students"></table>
  <div id="printArea"></div>
  <button id="printButton">Print</button>

  <script>
    $("#students").jqGrid({
      url:'students.json',
      datatype: 'json',
      colNames: ['Name', 'Age', 'Sex'],
      colModel: [
        {name:'name', width:200, align:"left"},
        {name:'age', width:80, align:"right"},
        {name:'sex', width:100, align:"center"}
      ],
      rowNum: 10,
      rowList:[10,20,30],
      pager: '#pager',
      sortname: 'name',
      viewrecords: true,
      sortorder: "desc",
      caption: "Student Info"
    });

    $("#printButton").click(function() {
      var gridHtml = $("#students").get(0).outerHTML;
      $("#printArea").html(gridHtml);
      $.print("#printArea");
    });
  </script>
</body>

示例二：JqGrid表格分页打印

在第一个示例中，我们使用了JqGrid的默认分页功能。然而，如果表格数据量很大，可能需要手动进行分页打印。JqGrid提供了一些API函数，可以用于手动控制表格的显示和分页。具体实现方式如下：

<body>
  <table id="students"></table>
  <div id="printArea"></div>
  <button id="printButton">Print</button>

  <script>
    var tableData = null;
    var totalPages = 0;
    var currentPage = 1;
    var rowsPerPage = 10;

    $("#students").jqGrid({
      url:'students.json',
      datatype: 'json',
      colNames: ['Name', 'Age', 'Sex'],
      colModel: [
        {name:'name', width:200, align:"left"},
        {name:'age', width:80, align:"right"},
        {name:'sex', width:100, align:"center"}
      ],
      rowNum: rowsPerPage,
      rowList:[10,20,30],
      pager: '#pager',
      sortname: 'name',
      viewrecords: true,
      sortorder: "desc",
      caption: "Student Info",
      loadComplete: function(data) {
        tableData = data;
        totalPages = Math.ceil(tableData.records/rowsPerPage);
      },
    });

    $("#printButton").click(function() {
      $("#printArea").empty();
      currentPage = 1;

      var gridHtml = getTableHtml();
      $("#printArea").append(gridHtml);

      for (var i = 2; i <= totalPages; i++) {
        $("#students").jqGrid('setGridParam',{page:i}).trigger('reloadGrid');
        var gridHtml = getTableHtml();
        $("#printArea").append(gridHtml);
        currentPage++;
      }

      $.print("#printArea");
    });

    function getTableHtml() {
      var gridHtml = $("#students").get(0).outerHTML;
      var lastRow = currentPage * rowsPerPage;
      var firstRow = lastRow - rowsPerPage + 1;
      gridHtml = gridHtml.replace('ui-jqgrid-btable', 'ui-jqgrid-btable print-able');
      gridHtml = gridHtml.replace('ui-jqgrid-hbox', 'ui-jqgrid-hbox print-able');
      gridHtml += '<script>$(function(){$(".print-able").printThis({});});<\/script>';
      return gridHtml;
    }
  </script>
</body>

在这个示例中，我们首先定义了一些变量用于保存表格数据和分页信息。然后，在表格初始化的时候，我们设定每页显示10行数据，并且在loadComplete事件中获取表格数据，计算总页数。

在打印按钮的点击事件中，我们首先清空#printArea的内容，并将当前页面设置为第一页。然后，依次加载每一页的数据，将其拼接到#printArea的内容中。在加载每一页数据的时候，我们使用setGridParam函数手动设置该页的页号，并通过trigger('reloadGrid')函数重新加载数据。最后，调用jQuery Print Area插件进行打印。

为了使每一页的样式正确，我们在getTableHtml函数中替换了表格的类名，并添加了一个打印脚本。这个脚本用于在打印前隐藏一些不必要的元素，例如分页控件等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JqGrid web打印实现代码 - Python技术站

JqGrid web打印实现代码