HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jqGrid のデータをCSV形式で出力(クライアント側)サンプル

jqGrid の選択したデータをCSV形式でダウンロードします。

このサンプルでは、選択されている行の内容を取得してサーバーへポストします。
その内容を jqgrid_out2csv.php がCSV形式に変換してクライアントへ出力します。(ソースコードの表示)


コード


function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

jQuery(document).ready(function()
{
    $("input:submit, a, button", ".toolbar").button();

    var mydata = [
        {seq:"1", music_name:"More Than a Feeling"},
        {seq:"2", music_name:"Peace of Mind"},
        {seq:"3", music_name:"Foreplay/Long Time"},
        {seq:"4", music_name:"Rock 'n' Roll Band"},
        {seq:"5", music_name:"Smokin'"},
        {seq:"6", music_name:"Hitch a Ride"},
        {seq:"7", music_name:"Something About You"},
        {seq:"8", music_name:"Let me Take You Home Tonight"},
    ];

    jQuery("#list").jqGrid({
        data: mydata,
        datatype: "local",
        colNames:['順番', '曲名'],
        colModel:[
            {index:'seq', name:'seq', align:'right', resizable:true, width:40, sorttype:'integer' },
            {index:'music_name', name:'music_name', resizable:true}
        ],
        width: '400',
        height: 'auto',
        sortname: 'seq',
        sortorder: "asc",
        multiselect: true,
        caption: 'Boston'
    }); 

    // CSV出力
    $("#out2csv").click(function() {
        // 選択項目の確認
        var rowIds = jQuery('#list').getGridParam('selarrrow'); 

        if (rowIds.length == 0) {
                msg = "出力するデータ行を選択してください。";
            alert(msg);
            return false;
            }

        // 選択したデータを隠しタグに出力してポストする
        $('#mybuffer').html("");    // 送信用バッファーをクリア
        // 列見出しの取得
        var dataIds = jQuery('#list').getDataIDs();
        var rowHead = jQuery('#list').getRowData(dataIds[0]);
        var colNames = new Array();
        var i = 0;
        for (var col in rowHead) {
            colNames[i++] = col;
        }
        // 列見出し部をinput.hiddenタグへ出力
        for (var j = 0; j < colNames.length; j++) {
            $('<input type="hidden" name="data[0]['+j+']" value="'+htmlEscape(colNames[j])+'"/>').appendTo("#mybuffer");
        }

        // データ部をinput.hiddenタグへ出力
        for (var i = 0; i < rowIds.length; i++) {
            var row = jQuery('#list').getRowData(rowIds[i]);
            for (var j = 0; j < colNames.length; j++) {
                $('<input type="hidden" name="data['+(i+1)+']['+j+']" value="'+htmlEscape(row[colNames[j]])+'"/>').appendTo("#mybuffer");
            }
        }

        // 送信
        document.frm_out2csv.submit();

        return true;
    })
});
	

HTMLコード


<table id="list">
</table>
<br/>
<div class="toolbar">
    <form id="frm_out2csv" name="frm_out2csv" action="jqgrid_out2csv.php" method="POST">
        <button type="button" id="out2csv">CSV出力</button>
        <div id="mybuffer"/>
    </form>
</div>
	

関連リンク