Sunday, July 5, 2015

Grid2CSV DOM DIV Grid to CSV exporter

For BlueBox coders, a new CSV conversion tool for CSS DIV grids.

This BlueBox function creates the 'excel/csv' icon as a link to a Javascript csv emulator - redirecting to a downloadable CSV file.

The key elements are to include the class-name  'csvrow' in all your row wrapper DIV elements, and the class-name 'csvcell' in all your cell DIV elements.

resp("

            ".grid2csv('grid2csvtest')."

            <div id=grid2csvtest>

                <div class='bb_list_row_header csvrow'>
                    <div class='bb_list_cell csvcell'>1</div>
                    <div class='bb_list_cell csvcell'>2</div>
                    <div class='bb_list_cell csvcell'>3</div>
                    <div class='bb_list_cell csvcell'>4</div>
                    <div class='bb_list_cell csvcell'>5</div>
                    <div class='bb_list_clear'></div>
                </div>

                <div class='bb_list_row csvrow'>
                    <div class='bb_list_cell csvcell'>a1</div>
                    <div class='bb_list_cell csvcell'>a2</div>
                    <div class='bb_list_cell csvcell'>a3</div>
                    <div class='bb_list_cell csvcell'>a</div>
                    <div class='bb_list_cell csvcell'>a5</div>
                    <div class='bb_list_clear'></div>
                </div>

                <div class='bb_list_row csvrow'>
                    <div class='bb_list_cell csvcell'>b1</div>
                    <div class='bb_list_cell csvcell'>b2</div>
                    <div class='bb_list_cell csvcell'>b3</div>
                    <div class='bb_list_cell csvcell'>b4</div>
                    <div class='bb_list_cell csvcell'>b5</div>
                    <div class='bb_list_clear'></div>
                </div>

                <div class='bb_list_row csvrow'>
                    <div class='bb_list_cell csvcell'>b1</div>
                    <div class='bb_list_cell csvcell'>b2</div>
                    <div class='bb_list_cell csvcell'>b3</div>
                    <div class='bb_list_cell csvcell'>b4</div>
                    <div class='bb_list_cell csvcell'>b5</div>
                    <div class='bb_list_clear'></div>
                </div>

            </div>
            ");


No comments:

Post a Comment