JQGgrid-グリッドデータからpdf/excelファイルを生成する方法

Question

次のJQGridテーブルがあります。これはJSONデータから生成されています。私は生成することができる/エクスポートまたはpdfファイルを作成することができますビューのテーブルのデータ状態に基づいています。 JSON、Jqgrid、Javascriptを使用しています

データからpdfファイルを生成するにはどうすればよいですか？ Here My FIDDLE

JSコード

$(document).ready(function() { 
     var jsonData = { 
      "Name": "Julie Brown", 
      "Account": "C0010", 
      "LoanApproved": "12/5/2015", 
      "LastActivity": "4/1/2016", 
      "PledgedPortfolio": "4012214.00875", 
      "MaxApprovedLoanAmt": "2050877.824375", 
      "LoanBalance": "1849000", 
      "AvailableCredit": "201877.824375", 
      "Aging": "3", 
      "Brokerage": "My Broker", 
      "Contact": "Robert L. Johnson", 
      "ContactPhone": "(212) 902-3614", 
      "RiskCategory": "Yellow", 
      "rows": [{ 
      "ClientID": "C0010", 
      "Symbol": "WEC", 
      "Description": "Western Electric Co", 
      "ShareQuantity": "20638", 
      "SharePrice": "21.12", 
      "TotalValue": "435874.56", 
      "LTVCategory": "Equities", 
      "LTVRatio": "50%", 
      "MaxLoanAmt": "217937.28" 
      }, { 
      "ClientID": "C0010", 
      "Symbol": "BBB", 
      "Description": "Bins Breakers and Boxes", 
      "ShareQuantity": "9623", 
      "SharePrice": "74.29125", 
      "TotalValue": "714904.69875", 
      "LTVCategory": "Equities", 
      "LTVRatio": "50%", 
      "MaxLoanAmt": "357452.349375" 
      }, { 
      "ClientID": "C0010", 
      "Symbol": "GPSC", 
      "Description": "Great Plains Small Cap Stock", 
      "ShareQuantity": "49612", 
      "SharePrice": "14.24", 
      "TotalValue": "706474.88", 
      "LTVCategory": "Mutual Funds - Small Cap", 
      "LTVRatio": "40%", 
      "MaxLoanAmt": "282589.952" 
      }] 
     }, 
     mmddyyyy = ""; 
     /*********************************************************************/ 


     $("#output").jqGrid({ 
     url: "/echo/json/", 
     mtype: "POST", 
     datatype: "json", 
     postData: { 
       json: JSON.stringify(jsonData) 
     }, 
     colModel: [ 
      /** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/ 
      { 
      name: 'Symbol', 
      width: 65 
      }, { 
      name: 'Description', 
      width: 165 
      }, { 
      name: 'ShareQuantity', 
      align: 'right', 
      width: 85, 
      classes: "hidden-xs", labelClasses: "hidden-xs", 
      formatter: 'currency', 
      formatoptions: { 
       prefix: " ", 
       suffix: " " 
      } 
      }, { 
      name: 'SharePrice', 
      label: 'Share Price', 
      align: 'right', 
      width: 100, 
      classes: "hidden-xs", labelClasses: "hidden-xs", 
      template: "number", 
      formatoptions: { 
       prefix: " $", 
       decimalPlaces: 4 
      } 
      }, 
      /*{ label: 'Value1', 
         name: 'Value1', 
         width: 80, 
         sorttype: 'number', 
         formatter: 'number', 
         align: 'right' 
        }, */ 
      { 
      name: 'TotalValue', 
      label: 'Total Value', 
      width: 160, 
      sorttype: 'number', 
      align: "right", 
      search: false, 
      formatter: 'currency', 
      formatoptions: { 
       prefix: " $", 
       suffix: " " 
      } 
      }, { 
      name: 'LTVRatio', 
      label: 'LTV Ratio', 
      width: 70, 
      sorttype: 'number', 
      align: "right", 
      formatter: 'percentage', 
      formatoptions: { 
       prefix: " ", 
       suffix: " " 
      } 
      }, { 
      name: 'LTVCategory', 
      label: 'LTV Category', 
      classes: "hidden-xs", labelClasses: "hidden-xs", 
      width: 120, 
      width: 165 
      }, 

      { 
      name: 'MaxLoanAmt', 
      label: 'MaxLoanAmount', 
      width: 165, 
      sorttype: 'number', 
      align: "right", 
      search: false, 
      formatter: 'currency', 
      formatoptions: { 
       prefix: " $", 
       suffix: " " 
      } 
      } 

     ], 
     additionalProperties: ["Symbol", "Description"], 
     subGrid: true, 
     subGridRowExpanded: function (subgridDivId, rowid) { 
      var item = $(this).jqGrid("getLocalRow", rowid); 
      $("#" + $.jgrid.jqID(subgridDivId)).html("Symbol: <em>" + item.Symbol + 
       "</em><br/>Description: <em>" + item.Description + "</em>"); 
     }, 
     beforeProcessing: function (data) { 
      var symbolsMap = {}, symbolsValues = ":All", rows = data.rows, i, symbol; 
      for (i = 0; i < rows.length; i++) { 
       symbol = rows[i].Symbol; 
       if (!symbolsMap.hasOwnProperty(symbol)) { 
        symbolsMap[symbol] = 1; 
        symbolsValues += ";" + symbol + ":" + symbol; 
       } 
      } 
      $(this).jqGrid("setColProp", 'Symbol', { 
       stype: "select", 
       searchoptions: { 
        value: symbolsValues 
       } 
      }).jqGrid('destroyFilterToolbar') 
      .jqGrid('filterToolbar', { 
       stringResult: true, 
       searchOnEnter: false, 
       defaultSearch : "cn" 
      }); 
     }, 
     /*beforeProcessing: function (data) { 
      var item, i, n = data.length; 
      for (i = 0; i < n; i++) { 
       item = data[i]; 
       item.Quantity = parseFloat($.trim(item.Quantity).replace(",", "")); 
       item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", "")); 
       item.Value = parseFloat($.trim(item.Value).replace(",", "")); 
       item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10); 
       item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10); 
      } 
     }, */ 
     iconSet: "fontAwesome", 
     loadonce: true, 
     rownumbers: true, 
     cmTemplate: { 
      autoResizable: true, 
      editable: true 
     }, 
     autoResizing: { 
      compact: true 
     }, 
     autowidth: true, 
     height: 'auto', 
     forceClientSorting: true, 
     sortname: "Symbol", 
     footerrow: true, 
     caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>", 
     loadComplete: function() { 
      var $self = $(this), 
      sum = $self.jqGrid("getCol", "Price", false, "sum"), 
      sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum"); 
      //ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount"); 
      $self.jqGrid("footerData", "set", { 
      LTVCategory: "Max Approved Loan Amount:", 
      Price: sum, 
      MaxLoanAmt: sum1 
      }); 
     } 
     }); 

     $("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"}); 

     $(window).on("resize", function() { 
      var newWidth = $("#output").closest(".ui-jqgrid").parent().width(); 
      $("#output").jqGrid("setGridWidth", newWidth, true); 
     }).triggerHandle("resize"); 
    }); 

Answer 1

PDFにjqgridデータをエクスポートする方法にはビルドがありません。あなたはHereからダウンロードすることができます（私は個人的にiTextSharpのようなサードパーティ製のツールを使用する必要があります。あなたはあなたのコントローラ内のグリッドデータを印刷するためのアクションメソッドを作成する必要があります。

Hereも行われ、別の一例1男さ。

System.Linqのを使用して ; System.Collections.Genericを使用して

Hereもtrirandで別の例であるあなたは、彼らがiTextHsarpを使用しているソースコードを表示する場合 。。のSystem.Webを使用して ; System.Web.Mvcを使用して、 JQGridMVCExamples.Models; 、Trirand.Web.Mvc;を使用してusing System.IO;

// 
// For PDF export we are using the free open-source iTextSharp library. 
// 
using iTextSharp.text; 
using iTextSharp.text.pdf; 
using System.Data; 


namespace JQGridMVCExamples.Controllers.Grid 
{ 
    public partial class GridController : Controller 
    { 
     // This is the default action for the View. Use it to setup your grid Model. 
     public ActionResult ExportPDF() 
     { 
      // Get the model (setup) of the grid defined in the /Models folder. 
      var gridModel = new OrdersJqGridModel(); 
      var ordersGrid = gridModel.OrdersGrid; 

      // Setting the DataUrl to an action (method) in the controller is required. 
      // This action will return the data needed by the grid 
      ordersGrid.DataUrl = Url.Action("PDFGrid_DataRequested"); 

      // customize the default Orders grid model with custom settings 
      // NOTE: you need to call this method in the action that fetches the data as well, 
      // so that the models match 
      SetPDFExportGrid(ordersGrid); 

      // Pass the custmomized grid model to the View 
      return View(gridModel); 
     } 

     // This method is called when the grid requests data   
     public JsonResult PDFGrid_DataRequested() 
     { 
      // Get both the grid Model and the data Model 
      // The data model in our case is an autogenerated linq2sql database based on Northwind. 
      var gridModel = new OrdersJqGridModel(); 
      var northWindModel = new NorthwindDataContext(); 

      // customize the default Orders grid model with our custom settings 
      SetPDFExportGrid(gridModel.OrdersGrid); 

      // Save the current grid state in Session 
      // We will later need it for PDF Export 
      JQGridState gridState = gridModel.OrdersGrid.GetState(); 
      Session["gridState"] = gridState; 

      // return the result of the DataBind method, passing the datasource as a parameter 
      // jqGrid for ASP.NET MVC automatically takes care of paging, sorting, filtering/searching, etc 

      return gridModel.OrdersGrid.DataBind(northWindModel.Orders); 
     } 

     public JsonResult PDFExport_AutoCompleteShipName(string term) 
     { 
      var northWindModel = new NorthwindDataContext(); 
      JQAutoComplete autoComplete = new JQAutoComplete(); 

      autoComplete.DataField = "ShipName"; 
      autoComplete.AutoCompleteMode = AutoCompleteMode.BeginsWith; 
      autoComplete.DataSource = from o in northWindModel.Orders 
             select o; 
      return autoComplete.DataBind(); 
     } 

     private void SetPDFExportGrid(JQGrid ordersGrid) 
     { 
      // show the search toolbar 
      ordersGrid.ToolBarSettings.ShowSearchToolBar = true; 
      ordersGrid.ToolBarSettings.ShowSearchButton = true; 

      var orderDateColumn = ordersGrid.Columns.Find(c => c.DataField == "OrderDate"); 
      orderDateColumn.DataFormatString = "{0:yyyy/MM/dd}"; 
      orderDateColumn.SearchType = SearchType.DatePicker; 
      orderDateColumn.DataType = typeof(DateTime); 
      orderDateColumn.SearchControlID = "DatePicker"; 
      orderDateColumn.SearchToolBarOperation = SearchOperation.IsEqualTo; 

      var shipNameColumn = ordersGrid.Columns.Find(c => c.DataField == "ShipName"); 
      shipNameColumn.SearchType = SearchType.AutoComplete; 
      shipNameColumn.DataType = typeof(string); 
      shipNameColumn.SearchControlID = "AutoComplete"; 
      shipNameColumn.SearchToolBarOperation = SearchOperation.Contains; 

      var orderIDColumns = ordersGrid.Columns.Find(c => c.DataField == "OrderID"); 
      orderIDColumns.Searchable = true; 
      orderIDColumns.DataType = typeof(int); 
      orderIDColumns.SearchToolBarOperation = SearchOperation.IsEqualTo; 

      SetPDFCustomerIDSearchDropDown(ordersGrid); 
      SetPDFFreightSearchDropDown(ordersGrid); 
     } 

     private void SetPDFCustomerIDSearchDropDown(JQGrid ordersGrid) 
     { 
      // setup the grid search criteria for the columns 
      JQGridColumn customersColumn = ordersGrid.Columns.Find(c => c.DataField == "CustomerID"); 
      customersColumn.Searchable = true; 

      // DataType must be set in order to use searching 
      customersColumn.DataType = typeof(string); 
      customersColumn.SearchToolBarOperation = SearchOperation.IsEqualTo; 
      customersColumn.SearchType = SearchType.DropDown; 

      // Populate the search dropdown only on initial request, in order to optimize performance 
      if (ordersGrid.AjaxCallBackMode == AjaxCallBackMode.RequestData) 
      { 
       var northWindModel = new NorthwindDataContext(); 
       var searchList = from customers in northWindModel.Customers 
           select new SelectListItem 
           { 
            Text = customers.CustomerID, 
            Value = customers.CustomerID 
           }; 

       customersColumn.SearchList = searchList.ToList<SelectListItem>(); 
       customersColumn.SearchList.Insert(0, new SelectListItem { Text = "All", Value = "" }); 
      } 
     } 

     private void SetPDFFreightSearchDropDown(JQGrid ordersGrid) 
     { 
      // setup the grid search criteria for the columns 
      JQGridColumn freightColumn = ordersGrid.Columns.Find(c => c.DataField == "Freight"); 
      freightColumn.Searchable = true; 

      // DataType must be set in order to use searching 
      freightColumn.DataType = typeof(decimal); 
      freightColumn.SearchToolBarOperation = SearchOperation.IsGreaterOrEqualTo; 
      freightColumn.SearchType = SearchType.DropDown; 

      // Populate the search dropdown only on initial request, in order to optimize performance 
      if (ordersGrid.AjaxCallBackMode == AjaxCallBackMode.RequestData) 
      { 
       List<SelectListItem> searchList = new List<SelectListItem>(); 
       searchList.Add(new SelectListItem { Text = "> 10", Value = "10" }); 
       searchList.Add(new SelectListItem { Text = "> 30", Value = "30" }); 
       searchList.Add(new SelectListItem { Text = "> 50", Value = "50" }); 
       searchList.Add(new SelectListItem { Text = "> 100", Value = "100" }); 

       freightColumn.SearchList = searchList.ToList<SelectListItem>(); 
       freightColumn.SearchList.Insert(0, new SelectListItem { Text = "All", Value = "" }); 
      } 
     } 

     public ActionResult ExportToPDF(string exportType) 
     {    
      var gridModel = new OrdersJqGridModel(); 
      var northWindModel = new NorthwindDataContext(); 
      var grid = gridModel.OrdersGrid; 

      // Get the last grid state the we saved before in Session in the DataRequested action 
      JQGridState gridState = Session["GridState"] as JQGridState; 

      // Need to set grid options again 
      SetExportGrid(grid); 

      if (String.IsNullOrEmpty(exportType)) 
       exportType = "1"; 

      DataTable exportData; 
      switch (exportType) 
      { 
       case "1": 
        grid.ExportSettings.ExportDataRange = ExportDataRange.All; 
        exportData = grid.GetExportData(northWindModel.Orders); 
        ExportToPDF(exportData); 
        break; 
       case "2": 
        grid.ExportSettings.ExportDataRange = ExportDataRange.Filtered; 
        exportData = grid.GetExportData(northWindModel.Orders, gridState); 
        ExportToPDF(exportData); 
        break; 
       case "3": 
        grid.ExportSettings.ExportDataRange = ExportDataRange.FilteredAndPaged; 
        exportData = grid.GetExportData(northWindModel.Orders, gridState); 
        ExportToPDF(exportData); 
        break; 
      } 

      return View(); 
     } 

     private void ExportToPDF(DataTable dt) 
     { 
      // 
      // For PDF export we are using the free open-source iTextSharp library. 
      // 

      Document pdfDoc = new Document(); 
      MemoryStream pdfStream = new MemoryStream(); 
      PdfWriter pdfWriter = PdfWriter.GetInstance(pdfDoc, pdfStream); 

      pdfDoc.Open();//Open Document to write 
      pdfDoc.NewPage(); 

      Font font8 = FontFactory.GetFont("ARIAL", 7); 

      PdfPTable PdfTable = new PdfPTable(dt.Columns.Count); 
      PdfPCell PdfPCell = null; 

      //Add Header of the pdf table 
      for (int column = 0; column < dt.Columns.Count; column++) 
      { 
       PdfPCell = new PdfPCell(new Phrase(new Chunk(dt.Columns[column].Caption, font8))); 
       PdfTable.AddCell(PdfPCell); 
      } 

      //How add the data from datatable to pdf table 
      for (int rows = 0; rows < dt.Rows.Count; rows++) 
      { 
       for (int column = 0; column < dt.Columns.Count; column++) 
       { 
        PdfPCell = new PdfPCell(new Phrase(new Chunk(dt.Rows[rows][column].ToString(), font8))); 
        PdfTable.AddCell(PdfPCell); 
       } 
      } 

      PdfTable.SpacingBefore = 15f; // Give some space after the text or it may overlap the table    
      pdfDoc.Add(PdfTable); // add pdf table to the document 
      pdfDoc.Close(); 
      pdfWriter.Close(); 

      Response.ClearContent(); 
      Response.ClearHeaders(); 
      Response.ContentType = "application/pdf"; 
      Response.AppendHeader("Content-Disposition", "attachment; filename=gridexport.pdf"); 
      Response.BinaryWrite(pdfStream.ToArray()); 
      Response.End(); 
     } 
    } 
}