如何为jqGrid启用excel导出按钮

Question

你好 我想在 jqgrid 的寻呼机中显示“导出到 excel”按钮。我尝试了很多方法，阅读了很多文章/帖子，但我没有看到这个按钮。文档也没有任何有用的东西。我应该执行哪些操作才能看到此按钮

附言。我使用 ASP.NET MVC

PSS。我的代码是

<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>

但我没有看到 excel 导入按钮。 http://ru.magicscreenshot.com/jpg/t97BDzCIO0Q.html

为什么？

Answer 1

假设标记为

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

类似的东西

$('#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 将是一个 JavaScript 函数，它将调用控制器操作以生成 CSV 文件。

这里是 an example，结合 jQuery flot。创建一些数据，选择一些网格行，然后单击网格左下角的生成图形按钮以绘制点。请注意，这在小于 8 的 Internet Explorer 中不起作用，因为它需要支持 HTML 5 canvas 元素（而且我没有费心包含 excanvas）。

编辑：

您的标记不起作用，因为您需要先初始化 navGrid，然后才能设置自定义按钮 (see note on page)。你可以这样做

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

Answer 2

我所做的是在服务器上创建一个 csv 文件并在我的视图中的网格旁边显示一个下载链接。

它并不像您想象的那么流畅，但它快速且易于实施。

从列表中创建 csv 文件的扩展方法（来自 SO 上的另一篇文章）：

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

控制器：

            model.AListOfData.ToArray().AsCsv();

            using (StreamWriter sw = System.IO.File.CreateText(errorFilePath))
            {
                sw.Write(values);
            }

            model.ErrorFullFileName = errorFilePath;

在视图中：

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

Answer 3

我用过，效果很好

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