如何为jqGrid启用excel导出按钮

Question

您好我想在jqgrid的寻呼机中显示"export to excel"按钮.我尝试了很多方法,阅读了很多文章/帖子,但我没有看到这个按钮.文档也没有任何用处.我应该采取哪些措施才能看到此按钮

PS.我使用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文件.

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

编辑:

您的标记无效,因为您需要在设置自定义按钮之前初始化navGrid(请参阅页面上的注释).你可以这样做

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