Как включить кнопку экспорта в Excel для jqGrid - PullRequest
Новая
       24

Как включить кнопку экспорта в Excel для jqGrid

2 голосов
/ 03 апреля 2011

Здравствуйте, я хочу показать кнопку «экспортировать в Excel» в пейджере jqgrid.Я пробовал много способов, прочитал много статей / сообщений, но я не вижу этой кнопки.В документации тоже нет ничего полезного.Какие действия я должен сделать, чтобы увидеть эту кнопку

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

почему?

Ответы [ 3 ]

6 голосов
/ 03 апреля 2011

Предполагая разметку 

<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. Создайте некоторые данные, выберите несколько строк сетки и затем нажмите кнопку создания графика в левом нижнем углу сетки, чтобы построить точки. Обратите внимание, что это не будет работать в Internet Explorer менее 8, поскольку требует поддержки элемента HTML 5 canvas (и я не потрудился включить excanvas).

EDIT:

Ваша разметка не работает, поскольку вам необходимо инициализировать 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();
}
1 голос
/ 03 апреля 2011

Я сделал для создания 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")%>
0 голосов
/ 15 мая 2013

Я использовал это, и он работает очень хорошо 

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