Tabela com escolha dos campos

Sou programador PHP, porém, sempre que posso dou uma trabalhada com Javascript e Jquery.

Esses dias, me perguntaram se eu conseguia montar uma tabela que o cliente pudesse escolher quais campos quer ver. Após alguns minutos e com algumas funções jQuery, está funcionando corretamente.

Não acho que seja a melhor solução, é uma coisa simples, sem pretenções, apenas pela diversão, mas talvez seja útil.

Seguem os passos.

Parte 1 – Chamada jQuery + funções.



Parte 2 – CSS: O CSS ficou bem simples, é apenas para não deixar o site preto, e fazer as divs funcionarem como devem.


Parte 3 – HTML – A versão da página.

Essa página foi criada para testar a personalização de campos de uma tabela; seu único propósito é permitir que se escolha quais campos visualizar.

Mostrar / Remover campos

Content / Other

Identity
Content
Other

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non arcu risus. Nullam mattis lobortis libero, at mattis diam iaculis nec. Nullam sit amet nisi eu felis feugiat consequat vitae sit amet neque. Maecenas id vulputate justo. Sed et enim dolor, et scelerisque magna. Sed faucibus dolor eu nisi facilisis aliquam. Pellentesque vel ante dolor. Integer ac ante eu risus malesuada adipiscing sit amet in nunc.

Curabitur cursus urna vitae felis rutrum bibendum. Vestibulum ornare venenatis nulla, quis volutpat purus tincidunt et. Cras fringilla risus gravida mi sodales eget rutrum tellus iaculis. Aenean sit amet velit felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed erat sapien, rhoncus mollis luctus id, lobortis nec ipsum. Cras mi lectus, scelerisque eget dignissim sed, imperdiet at dolor. Suspendisse lobortis faucibus convallis. Maecenas mauris dui, volutpat sed fringilla eu, posuere eget quam. Nulla lobortis, mauris et lacinia scelerisque, libero velit lacinia turpis, at congue odio odio at mi. Vivamus scelerisque pellentesque sapien ac luctus. Praesent varius sapien sed urna cursus porta. Donec libero mauris, mollis sit amet interdum sed, commodo sed purus. Nullam hendrerit massa at metus pellentesque suscipit sagittis dui fermentum. Phasellus nec aliquam libero.

2

Phasellus ipsum mi, porttitor vel lobortis sed, lacinia ac sapien. Vivamus at eros nulla. Cras pellentesque libero in augue faucibus ultricies. Curabitur tincidunt accumsan ipsum, eget lacinia lacus ullamcorper vitae. Suspendisse in eros lectus, a dapibus arcu. Nam quis erat ante, ut facilisis tellus. Fusce lorem est, luctus vitae blandit at, consectetur vitae dolor. Sed aliquam tincidunt est, et fringilla neque auctor eget. Cras sit amet leo ligula, a volutpat arcu. Integer commodo augue at velit vulputate a malesuada augue pulvinar

Aliquam ligula leo, sagittis at vehicula sit amet, laoreet sed neque. Quisque consequat, metus id elementum vehicula, orci augue pulvinar libero, venenatis bibendum lectus magna sit amet sem. Suspendisse ultrices luctus arcu et mollis. Sed ultricies rhoncus metus, nec suscipit lectus varius non.

Vestibulum ornare rhoncus ultricies. Phasellus at nulla mauris. Sed lobortis nulla sed eros ornare vitae fermentum arcu ultricies. Integer eu ligula vel lorem lobortis imperdiet et et mauris. Nullam magna dolor, tincidunt sed porta at, aliquet ut tortor. Aliquam adipiscing venenatis mi in viverra. Curabitur nec erat erat, sit amet vehicula enim. Pellentesque dapibus, lectus vitae aliquam gravida, quam nisl scelerisque odio, eget tempus urna dui ac turpis. Integer eu odio nibh. Pellentesque a blandit massa. Etiam et elementum urna. Morbi mattis eros vel purus ullamcorper sed feugiat erat varius. Sed pulvinar pharetra lobortis. Nulla elementum pulvinar malesuada. Suspendisse dapibus erat ut sem facilisis sollicitudin. Nulla sed est est, sed tempor purus. Vestibulum lectus urna, ullamcorper vitae imperdiet quis, condimentum at ipsum. Integer tempor orci in arcu pellentesque vitae consequat magna tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst.

3

Cras vitae velit tellus, ut tempus diam. Morbi dictum libero et purus laoreet faucibus. Nullam molestie risus et metus blandit et mollis lacus aliquet. Mauris eu justo lorem. Nunc lobortis auctor ligula suscipit sodales. Maecenas tellus neque, sodales ac semper at, commodo quis quam. Aliquam erat volutpat. Nullam bibendum dictum risus in laoreet. Fusce in magna a turpis dapibus consectetur.

Etiam vulputate congue pulvinar. Integer sit amet odio vel felis viverra molestie sed ut lorem. Mauris quis tortor erat. Quisque consequat tortor et augue faucibus malesuada. Vestibulum quis mi elit. Morbi nec lorem ipsum, eget cursus massa. Donec lacus nisl, tincidunt eget iaculis at, viverra et dui.

Vestibulum ultrices iaculis tellus, ut sollicitudin tellus pharetra euismod. Donec nulla lorem, sodales ut convallis sed, suscipit non enim. Phasellus lectus nibh, commodo non semper non, euismod eu elit. Duis nulla elit, suscipit ut tincidunt id, commodo non nibh. Nunc et lobortis nisi. Curabitur eget nisi enim. Aenean iaculis lacus a ligula gravida a rhoncus leo vestibulum. Nunc magna turpis, ultrices vitae consequat nec, facilisis vehicula erat. Aliquam erat volutpat. Phasellus viverra, lectus bibendum feugiat lobortis, mauris ipsum placerat ligula, vitae dictum nibh massa ac leo. Sed dignissim lacus nulla. Nulla facilisi. Pellentesque venenatis aliquet neque, vel condimentum nisl rutrum vulputate. Suspendisse ut magna vel dui lacinia dignissim. Praesent eu nulla eget diam mollis viverra. Donec id sapien libero, vestibulum accumsan magna. Vivamus vulputate viverra lorem, suscipit sodales quam dictum non. Phasellus venenatis tellus in lacus mollis congue. Nam dictum erat sed nunc fringilla egestas.

Sei que não é a solução mais elegante, mas fica para a posteridade o conteúdo…

O arquivo funcionando está aqui – http://eduardosgode.com.br/sitetests/jquery.php

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *