Comment permettre à excel bouton exporter pour jqGrid

Bonjour
J'en veux pour preuve "exporter vers excel" dans le pager de jqgrid. J'ai essayé de nombreuses façons, de lire de nombreux articles/posts, mais je ne vois pas ce bouton. La Documentation n'a rien de bien utile aussi. Quelles actions dois-je faire pour voir ce bouton

Ps. J'utilise ASP.NET MVC

PSS. mon code est

<link href="../../Scripts/jquery.UI/css/redmond/jquery-ui-1.8.1.custom.css" rel="Stylesheet"
type="text/css" />
<link href="../../Scripts/jquery.jqGrid/css/ui.jqgrid.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/i18n/grid.locale-ru.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid/js/jquery.jqGrid.min.js"></script>
<table id="EmployeeTable">
</table>
<div id="EmployeeTablePager">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#EmployeeTable').jqGrid({
url: '/Employee/EmployeeData',
datatype: "json",
mtype: 'POST',
jsonReader: {
page: "page",
total: "total",
records: "records",
root: "rows",
repeatitems: false,
id: ""
},
colNames: ['Id', 'Имя', 'Фамилия', 'Email', 'Date'],
colModel: [
{ name: 'Id', width: 20 },
{ name: 'FirstName', width: 105 },
{ name: 'LastName', width: 100 },
{ name: 'Email', width: 150 },
{ name: 'Date', width: 150, formatter: ndateFormatter }
],
pager: '#EmployeeTablePager',
excel: true,
viewrecords: true
}).jqGrid('navButtonAdd',
'#EmployeeTablePager',
{ caption: " Export to Excel ",
buttonicon: "ui-icon-bookmark",
onClickButton: genCSV, position: "last"
});
});
function genCSV() {
alert('a');
}
function ndateFormatter(cellval, opts, rwdat, _act) {
var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1');
var date = new Date();
date.setTime(time);
return date.toDateString();
}
</script>

mais je ne vois pas l'importation excel bouton.
http://ru.magicscreenshot.com/jpg/t97BDzCIO0Q.html

pourquoi?

InformationsquelleAutor Oleg Sh | 2011-04-02

En supposant que le balisage de

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

Quelque chose le long des lignes de

$('#grid')
.jqGrid({ 
datatype: "clientSide", 
height: 190, 
colNames: headers, 
colModel: model, 
multiselect: true, 
pager: '#pager',
pgbuttons: false,
pginput: false,
caption: "Random Data",
deselectAfterSort: false,
width: 930
}) 
.jqGrid('navButtonAdd', 
'#pager',
{caption:" Export to Excel ", 
buttonicon:"ui-icon-bookmark", 
onClickButton: genCSV, position:"last"});

genCSV sera une fonction JavaScript qui fera l'appel à l'action du contrôleur pour générer un fichier CSV.

Voici un exemple, en combinaison avec jQuery flot. Créer des données, sélectionnez les lignes de la grille, puis cliquez sur générer le graphique dans le bouton en bas à gauche de la grille de tracer les points. Notez que cela ne fonctionne pas dans Internet Explorer moins de 8 car il nécessite la prise en charge du HTML 5 canvas (et je n'ai pas pris la peine d'inclure excanvas).

EDIT:

Votre balisage n'est pas de travail parce que vous devez initialiser un navGrid avant d'être en mesure de définir un bouton personnalisé (voir la note à la page). Vous pouvez faire cela comme

jQuery(document).ready(function () {
jQuery('#EmployeeTable').jqGrid({
url: '/Employee/EmployeeData',
datatype: "json",
mtype: 'POST',
jsonReader: {
page: "page",
total: "total",
records: "records",
root: "rows",
repeatitems: false,
id: ""
},
colNames: ['Id', 'Имя', 'Фамилия', 'Email', 'Date'],
colModel: [
{ name: 'Id', width: 20 },
{ name: 'FirstName', width: 105 },
{ name: 'LastName', width: 100 },
{ name: 'Email', width: 150 },
{ name: 'Date', width: 150, formatter: ndateFormatter }
],
pager: '#EmployeeTablePager',
excel: true,
viewrecords: true
})
/* Need to initialize navGird before being able to set any custom buttons */
.jqGrid('navGrid', '#EmployeeTablePager', {
add: false,
edit: false,
del: false,
search: false,
refresh: false
}).jqGrid('navButtonAdd',
'#EmployeeTablePager',
{ caption: " Export to Excel ",
buttonicon: "ui-icon-bookmark",
onClickButton: genCSV, position: "last"
});
});
function genCSV() {
alert('a');
}
function ndateFormatter(cellval, opts, rwdat, _act) {
var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1');
var date = new Date();
date.setTime(time);
return date.toDateString();
}

J'ai ajouté le code pour premier message. Ne fonctionne pas...
le même résultat 🙁 toutes les idées de plus?
il est au travail, jetez un oeil ici - jsfiddle.net/russcam/7H3xC la seule chose que j'ai changé, c'est pour remplacer l'AJAX pour récupérer les données avec le 'client', mais vous pouvez voir le bouton est là
faire un copier/coller de ma nouvelle page de test - ne pas voir d'importation excel bouton!!! Pourquoi ça peut être? Peut-être js/css fichiers? Les fichiers qui ne vous comprennent?
J'ai mis les paragraphes suivants pendant le téléchargement jqgrid ru.magicscreenshot.com/jpg/mRKpgs9hjk4.html et ru.magicscreenshot.com/jpg/dW4IxbEQK0Y.html . La Version de jqgrid 3.8.2
J'ai inclus tous les modules, à télécharger et ça marche!!!!! la documentation n'est pas valide, ne dit que "Import/Export" et "XML/JSON" modules

InformationsquelleAutor Russ Cam

Ce que j'ai fait était de créer un fichier csv sur le serveur et d'afficher un lien de téléchargement à côté de la grille, à mon avis.

Il n'est pas aussi lisse que ce que vous avez à l'esprit, mais il est rapide et facile à mettre en œuvre.

Méthode d'Extension pour créer un fichier csv à partir d'une liste (à partir d'un autre poste sur DONC):

    public static string AsCsv<T>(this IEnumerable<T> items)
where T : class
{
var csvBuilder = new StringBuilder();
var properties = typeof(T).GetProperties();
foreach (T item in items)
{
//string line = properties.Select(p => p.GetValue(item, null).ToCsvValue()).ToArray().Join(",");
string line= string.Join(", ", properties.Select(p => p.GetValue(item, null).ToCsvValue()).ToArray());
csvBuilder.AppendLine(line);
}
return csvBuilder.ToString();
}
private static string ToCsvValue<T>(this T item)
{
if (item is string)
{
return string.Format("\"{0}\"", item.ToString().Replace("\"", "\\\""));
}
double dummy;
if (double.TryParse(item.ToString(), out dummy))
{
return string.Format("{0}", item.ToString());
}
return string.Format("\"{0}\"", item.ToString());
}

Contrôleur:

            model.AListOfData.ToArray().AsCsv();
using (StreamWriter sw = System.IO.File.CreateText(errorFilePath))
{
sw.Write(values);
}
model.ErrorFullFileName = errorFilePath;

Dans la vue:

<%=Html.ImageLink("", "AssetUpload", "DownloadErrors", "/?filename=" + Model.ErrorFullFileName, "/Content/Icons/excel.png", "Download errors and warnings", "imagelink")%>

InformationsquelleAutor rboarman

Je l'utilise et ça fonctionne très bien

            jQuery("#table_resultats").jqGrid('navGrid', "#yourpager").jqGrid( //#pager
'navButtonAdd', "#yourpager", {
caption : "Excel export",
buttonicon : "ui-icon-arrowthickstop-1-s",
onClickButton : null,
position : "first",
title : Excel export,
cursor : "pointer"
});

InformationsquelleAutor helene

Vous devez vous connecter pour publier un commentaire.