Блог

Я хочу создать таблицу с помощью средства выбора столбцов. Итак, я попытался использовать jqgrid, я просто изучил примеры кодов и попытался их реализовать, и теперь я хочу экспортировать их в Excel и pdf, но я не могу понять, как это сделать. Я видел много подсказок, но все они отличались друг от друга, что меня действительно смутило. Пожалуйста, помогите мне пройти через это. Мой код :

   <link rel="stylesheet" type="text/css"
  href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/>
  <link rel="stylesheet" type="text/css"
  href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
  <link rel="stylesheet" type="text/css"
  href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
  <style type="text/css">
  html, body { font-size: 75%; }
  </style>
 <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
 <script type="text/javascript"
    src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.js"></script>
 <script type="text/javascript"
    src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.min.js" integrity="sha512- 
   Bkf3qaV86NxX 7MyZnLPWNt0ZI7/OloMlRo8z8KPIEUXssbVwB1E0bWVeCvYHjnSPwh4uuqDryUnRdcUw6FoTg==" 
   crossorigin="anonymous"></script>
 <script type="text/javascript"
    src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
 <script type="text/javascript" 
   src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"> 
  </script>
   <script>
            $.ajax({
            type: "POST",
            url: "LoadDataSource.asmx/JsonString",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ _storedProcedureName: "uspGetDataOfQPList1" }),
            dataType: "json",
            success: function (response) {
            var mydata = JSON.parse(response.d)
            
            var grid = jQuery('#colch');
            grid.jqGrid({
            data: mydata,
            datatype: 'local',
            rownumbers: true,
            colNames: ['Sector','SubSector','Occupation','JobRoleName','JobRoleCode','Both','CommonNormsCategory','DeactivationDate','LastReviewed','Manufacturing','NSQCClearance','NSQFLevel','NextReviewed','TechnicalNonTechnical','Version'],
            colModel: [
                { name: 'Sector', index: 'Sector' },
                { name: 'SubSector', index: 'SubSector'},
                { name: 'Occupation', index: 'Occupation' },
                { name: 'JobRoleName', index: 'JobRoleName', width: 200 },
                { name: 'JobRoleCode', index: 'JobRoleCode', width: 200 },
                { name: 'Both', index: 'Both', width: 200 },
                { name: 'CommonNormsCategory', index: 'CommonNormsCategory', width: 200 },
                { name: 'DeactivationDate', index: 'DeactivationDate', width: 200 },
                { name: 'LastReviewed', index: 'LastReviewed', width: 200 },
                { name: 'Manufacturing', index: 'Manufacturing', width: 200 },
                { name: 'NSQCClearance', index: 'NSQCClearance', width: 200 },
                { name: 'NSQFLevel', index: 'NSQFLevel', width: 200 },
                { name: 'NextReviewed', index: 'NextReviewed', width: 200 },
                { name: 'TechnicalNonTechnical', index: 'TechnicalNonTechnical', width: 200 },
                { name: 'Version', index: 'Version', width: 200 }

               
            ],
            rowNum: 40,
                width: '100%',
            height: '100%',
            rowList: [10, 20, 30],
            pager: '#pcolch',
            sortname: 'Sector',
            shrinkToFit: false,
            viewrecords: true,
            sortorder: "desc",
                });
                grid.jqGrid('navGrid', '#pcolch', { add: false, edit: false, del: false, search: false, refresh: false, pdf: true }, {}, {}, {}, {});
                grid.jqGrid('navButtonAdd', '#pcolch', {
                    caption: "Columns",
                    title: "Reorder Columns",
                    onClickButton: function () {
                        grid.jqGrid('columnChooser');
                    }

                });
                grid.jqGrid('navButtonAdd', '#pcolch', {
                    caption: "Print Excel",
                    onClickButton: function () {
                        ExportDataToExcel(grid);
                    }
                });
               function ExportDataToExcel(tableCtrl) {

                var gridData = $("#colch").jqGrid('getRowData');
                var dataToSend = JSON.stringify(gridData);
                jQuery("#colch").jqGrid('excelExport', dataToSend);  
            };
           
    }

         

    });            
 </script>