{"id":12909,"date":"2018-02-23T11:14:14","date_gmt":"2018-02-23T10:14:14","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=12909"},"modified":"2018-02-23T11:14:14","modified_gmt":"2018-02-23T10:14:14","slug":"jsgrid-plugin-jquery-per-mostrare-i-dati-con-efficienza","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/jsgrid-plugin-jquery-per-mostrare-i-dati-con-efficienza\/","title":{"rendered":"jsGrid: plugin jQuery per mostrare i dati con efficienza"},"content":{"rendered":"

In applicativi web che devono mostrare grandi quantit\u00e0 di dati all’utente, \u00e8 necessario curare bene le griglie apposite facendo attenzione ad aspetti come la necessit\u00e0 di paginazione e l’esposizione di comandi per attivare modifiche. Tutto ci\u00f2 pu\u00f2 essere fatto molto velocemente con un ottimo plugin jQuery: jsGrid<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

Il plugin jsGrid richiede una versione di jQuery <\/a>almeno pari alla 1.8.<\/p>\n

Lo si pu\u00f2 scaricare direttamente tramite apposito link<\/a>, installarlo con Bower <\/a>o ottenerlo dinamicamente mediante CDN:<\/p>\n

<link type=\"text\/css\" rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jsgrid\/1.5.3\/jsgrid.min.css\" \/>\r\n<link type=\"text\/css\" rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jsgrid\/1.5.3\/jsgrid-theme.min.css\" \/>\r\n \r\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jsgrid\/1.5.3\/jsgrid.min.js\"><\/script><\/pre>\n
Fatto ci\u00f2, \u00e8 sufficiente integrarlo nella pagina HTML <\/strong>mediante un blocco div<\/em>:<\/p>\n
<div id=\"jsGrid\"><\/div><\/pre>\n
e configurarlo da codice Javascript<\/strong> seguendo le indicazioni fornite dalla documentazione<\/a>:<\/p>\n
<script>\r\n    \r\n \r\n    $(\"#jsGrid\").jsGrid({\r\n        width: \"100%\",\r\n        height: \"400px\",\r\n \r\n        inserting: true,\r\n        editing: true,\r\n        sorting: true,\r\n        paging: true,\r\n      \r\n       \/*\r\n        * OMISSIS: collegamenti a tutti i dati da usare\r\n        *\/\r\n\r\n    });\r\n<\/script><\/pre>\n
I dati pervengono alla nostra griglia formattati in JSON<\/strong> ed in questa epoca dominata dai servizi REST<\/strong> \u00a0\u00e8 fondamentale curare bene l’integrazione con il backend<\/strong>: non a caso il sito del progetto contiene un’apposita sezione dedicata ad esempi di integrazione<\/a> con le principali tecnologie server.<\/p>\n
E’ possibile inoltre trarre vantaggio da una serie di casi d’uso <\/a>che introducono l’utente gradualmente verso utilizzi sempre pi\u00f9 avanzati.<\/p>\n
 <\/p>\n
Conoscevate gi\u00e0 questo plugin? Come curate l’esposizione dei vostri dati nelle applicazioni web? Commentate e fateci sapere!<\/p>\n","protected":false},"excerpt":{"rendered":"
In applicativi web che devono mostrare grandi quantit\u00e0 di dati all’utente, \u00e8 necessario curare bene le griglie…<\/p>\n","protected":false},"author":561,"featured_media":13427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[1624,1906,116,1710,1538,1481,1905,1531,1907],"class_list":["post-12909","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial-pratici","tag-api-rest","tag-grid","tag-html","tag-html5","tag-javascript","tag-jquery","tag-jquery-plugin","tag-json","tag-rest-service"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=12909"}],"version-history":[{"count":4,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12909\/revisions"}],"predecessor-version":[{"id":13428,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12909\/revisions\/13428"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/13427"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=12909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=12909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=12909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}