Descargar archivo dentro de un Grid

drakodelic · #1 (**permalink**) 15/04/2015, 04:09

Hola que tal muy buenos días, en esta ocasión me he visto en un apuro ya que sinceramente no he usado nunca JQuery, por eso abro este tema, espero puedan ayudarme.

[URL="http://olmmeca.mx/index.php/servicios-y-productos/capacitacion"]http://olmmeca.mx/index.php/servicios-y-productos/capacitacion[/URL]

Dentro de esta URL encontraran una tabla, si ustedes dan click en el ID "1", se encontraran que se despliega una segunda tabla con el titulo "Detalles", dentro de esta tabla están los detalles y dense cuenta que viene al ultimo la frase "Descargar"

Yo quisiera que cuando el usuario de click en un articulo, al ver los detalles pueda descargar un archivo .pdf desde la etiqueta "Descargar"

Anexo mi código fuente:

Código HTML:

!DOCTYPE html>
<html>
<head>

    <title>W2UI Demo: grid-18</title>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://olmmeca.mx/resources/cursos/linker.js"></script>


</head>
<body>

<div style="position: relative; height: 300px;">
    <div id="grid1" style="position: absolute; left: 0px; width: 49.9%; height: 300px;"></div>
    <div id="grid2" style="position: absolute; right: 0px; width: 49.9%; height: 300px;"></div>
</div>

<script type="text/javascript">
$(function () {
    $('#grid1').w2grid({ 
        name: 'grid1', 
        header: 'Cursos',
        show: { header: true },
        columns: [                
            { field: 'id', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' },
            { field: 'clave', caption: 'Clave', size: '50px', sortable: true, attr: 'align=center' },
            { field: 'nombre', caption: 'Nombre del curso', size: '30%', sortable: true },
            { field: 'duracion', caption: 'Duracion (horas)', size: '30%', sortable: true },
            { field: 'urlpdf', caption: 'Mas informacion', size: '40%'},
        ],
        records: [
            { recid: 1, id: '1', clave: 'LXA-01', nombre: 'GNU/Linux Avanzado', duracion: '24', urlpdf: 'shaders.pdf' },
            { recid: 2, id: 'Stuart', clave: 'Motzart', nombre: '[email protected]', duracion: '4/3/2012' },
            { recid: 3, id: 'Jin', clave: 'Franson', nombre: '[email protected]', duracion: '4/3/2012' },
            { recid: 4, id: 'Susan', clave: 'Ottie', nombre: '[email protected]', duracion: '4/3/2012' },
            { recid: 5, id: 'Kelly', clave: 'Silver', nombre: '[email protected]', duracion: '4/3/2012' },
            { recid: 6, id: 'Francis', clave: 'Gatos', nombre: '[email protected]', duracion: '4/3/2012' }
        ],
        onClick: function (event) {
            w2ui['grid2'].clear();
            var record = this.get(event.recid);
            w2ui['grid2'].add([
                { recid: 0, name: 'ID:', value: record.recid },
                { recid: 1, name: 'Clave:', value: record.clave },
                { recid: 2, name: 'Nombre:', value: record.nombre },
                { recid: 3, name: 'Duracion:', value: record.duracion },
                { recid: 4, name: 'Descargar:', value: record.urlpdf  }
            ]);
        }
    });



    $('#grid2').w2grid({ 
        header: 'Detalles',
        show: { header: true, columnHeaders: false },
        name: 'grid2', 
        columns: [                
            { field: 'name', caption: 'Name', size: '100px', style: 'background-color: #efefef; border-bottom: 1px solid white; padding-right: 5px;', attr: "align=right" },
            { field: 'value', caption: 'Value', size: '100%' }
   
        ]
    });    
});
</script>

</body>
</html>

Espero por favor puedan ayudarme con este problema, la idea es poner un PDF por cada sección y que el usuario los pueda descargar.

Saludos.