Hello, I want to write a Table, with it s colums sortables. I m trying the AUI-Experimental component Sortable Table. Like this https://developer.atlassian.com/display/AUI/Sortable+Tables
My table is writen as the example, but I doesn t work...anybody has the same problem¿?
You need to pull in the appropriate js/css for sortable tables and then tell AJS to apply it to your table.
Do the following:
1. Add this to your resources
#requireResource("com.atlassian.auiplugin:aui-experimental-table-sortable")
2. Add the classes "aui aui-table-sortable" to your table element and give it a unique ID.
3. Once the table is appended to the gadget view let AJS know about it by calling:
AJS.tablessortable.setTableSortable(AJS.$("#uniqueID"));
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="GADGET 2" title_url="" directory_title="__MSG_gadget-prueba.name__" description="GADGET 2" author="" author_email="" screenshot='http://www.google.com/gadgets/directory/2661487601-no_preview.gif' thumbnail='http://www.google.com/gadgets/directory/348515928-no_image_gadget_thm.png'> <Require feature="minimessage" /> <Require feature="views" /> <Require feature="setprefs" /> <Require feature="dynamic-height" /> <Require feature="oauthpopup" /> <Optional feature="auth-refresh" /> <Optional feature="gadget-directory"> <Param name="categories"> JIRA </Param> </Optional> #oauth #supportedLocales("gadget.common") </ModulePrefs> <UserPref name="isConfigured" datatype="hidden" default_value="false" /> <UserPref name="__UP_nombreContrato" datatype="hidden"/> <Content type="html"> <![CDATA[ #requireResource("com.atlassian.jira.gadgets:common") #requireResource("com.atlassian.gadgets.publisher:ajs-gadgets") #requireResource("com.atlassian.auiplugin:ajs") #requireResource("com.atlassian.auiplugin:aui-experimental-example") #requireResource("com.vectorsf.gadgetJira.gadgetJiraGms:gadgetJiraGms-resources") #includeResources() <script type="text/javascript"> (function () { var gadget = AJS.Gadget({ baseUrl: "__ATLASSIAN_BASE_URL__", useOauth: "/rest/gadget/1.0/currentUser", config: { descriptor: function(args) { var gadget = this; return { action: "/rest/gadget/1.0/project/validate", theme : function () { if (gadgets.window.getViewportDimensions().width < 450){ return "gdt top-label"; } else { return "gdt"; } }(), fields: [ AJS.gadget.fields.projectsOrCategoriesPicker(gadget, "projectsOrCategories", args.options), { userpref: "columnasGadget", label: "Columnas", description: "Seleccione las columnas a mostrar", type: "checkbox", selected: gadget.getPref("columnasGadget"), options:[ {label: "AreaId",value:"areaId"}, {label: "Avance",value:"areaNombre"}, {label: "Codigo",value:"codigo"}, {label: "Departamento ID",value:"departamentoId"}, {label: "Departamento Nombre",value:"departamentoNombre"}, {label: "Estado ID",value:"estadoId"}, {label: "Estado Nombre",value:"estadoNombre"}, {label: "Gerente Nombre",value:"gerenteNombre"}, {label: "Id",value:"id"}, {label: "Imputado Horas",value:"imputadoHoras"}, {label: "Jefe Proyecto Nombre",value:"jefeProyectoNombre"}, {label: "Modo Produccion Nombre",value:"modoProduccionNombre"}, {label: "Nombre",value:"nombre"}, {label: "Parent ID",value:"parentId"}, {label: "Sector ID",value:"sectorId"}, {label: "Sector Nombre",value:"sectorNombre"}, {label: "Contrato",value:"contrato"}, {label: "Vendido Horas",value:"vendidoHoras"} ] } ] } }, args: function() { return [ { key: "columnChoices", ajaxOptions: "/rest/gadget/1.0/availableColumns" }, { key: "options", ajaxOptions: "/rest/gadget/1.0/projectsAndProjectCategories" } ]; }() }, view: { template: function(args) { var gadget = this; var htmlList = "<div height='300px' widht='100%' style='overflow:auto'><table id='tablaOrdenada'>"; htmlList = htmlList + "<thead>"; htmlList = htmlList + "<tr>"; htmlList = htmlList + "<th id='areaId'>Area Id</th>"; htmlList = htmlList + "<th id='areaNombre'>Area Nombre</th>"; htmlList = htmlList + "<th id='avance'>Avance</th>"; htmlList = htmlList + "<th id='codigo'>codigo</th>"; htmlList = htmlList + "<th id='departamentoId'>Departamento Id</th>"; htmlList = htmlList + "<th id='departamentoNombre'>Departamento nombre</th>"; htmlList = htmlList + "<th id='estadoId'>Estado ID</th>"; htmlList = htmlList + "<th id='estadoNombre'>Estado Nombre</th>"; htmlList = htmlList + "<th id='gerenteNombre'>Gerente Nombre</th>"; htmlList = htmlList + "<th id='id'>id</th>"; htmlList = htmlList + "<th id='imputadoHoras'>Imputado Horas</th>"; htmlList = htmlList + "<th id='jefeProyectoNombre'>Jefe Proyecto Nombre</th>"; htmlList = htmlList + "<th id='modoProduccionNombre'>Modo Produccion Nombre</th>"; htmlList = htmlList + "<th id='nombre'>Nombre</th>"; htmlList = htmlList + "<th id='parentId'>Parent ID</th>"; htmlList = htmlList + "<th id='sectorId'>Sector ID</th>"; htmlList = htmlList + "<th id='sectorNombre'>Sector Nombre</th>"; htmlList = htmlList + "<th id='contrato'>Contrato</th>"; htmlList = htmlList + "<th id='vendidoHoras'>Vendido Horas</th></tr>"; htmlList = htmlList + "</thead><tbody>"; var listadoProjectos = args.jsonFile; for (i = 0; i < listadoProjectos.length;i++) { projecto = listadoProjectos[i]; htmlList = htmlList + "<tr><td id='areaId'>" + projecto.areaId + "</td>"; htmlList = htmlList + "<td id='areaNombre'>" + projecto["areaNombre"] + "</td>"; htmlList = htmlList + "<td id='avance'>" + projecto["avance"] + "</td>"; htmlList = htmlList + "<td id='codigo'>" + projecto["codigo"] + "</td>"; htmlList = htmlList + "<td id='departamentoId'>" + projecto["departamentoId"] + "</td>"; htmlList = htmlList + "<td id='departamentoNombre'>" + projecto["departamentoNombre"] + "</td>"; htmlList = htmlList + "<td id='estadoId'>" + projecto["estadoId"] + "</td>"; htmlList = htmlList + "<td id='estadoNombre'>" + projecto["estadoNombre"] + "</td>"; htmlList = htmlList + "<td id='gerenteNombre'>" + projecto["gerenteNombre"] + "</td>"; htmlList = htmlList + "<td id='id'>" + projecto["id"] + "</td>"; htmlList = htmlList + "<td id='imputadoHoras'>" + projecto["imputadoHoras"] + "</td>"; htmlList = htmlList + "<td id='jefeProyectoNombre'>" + projecto["jefeProyectoNombre"] + "</td>"; htmlList = htmlList + "<td id='modoProduccionNombre'>" + projecto["modoProduccionNombre"] + "</td>"; htmlList = htmlList + "<td id='nombre'>" + projecto["nombre"] + "</td>"; htmlList = htmlList + "<td id='parentId'>" + projecto["parentId"] + "</td>"; htmlList = htmlList + "<td id='sectorId'>" + projecto["sectorId"] + "</td>"; htmlList = htmlList + "<td id='sectorNombre'>" + projecto["sectorNombre"] + "</td>"; htmlList = htmlList + "<td id='contrato'>" + projecto["contrato"] + "</td>"; htmlList = htmlList + "<td id='vendidoHoras'>" + projecto["vendidoHoras"] + "</td></tr>"; } htmlList = htmlList + "</table>"; gadget.getView().html(htmlList); }, args: [{ key: "jsonFile", ajaxOptions: function() { var generaCodigosSeleccionados = function(projectos){ var listaCodigo = ''; var todos = false; if(projectos.options[0].selected == true){ todos = true; } for(i = 0;i<projectos.options.length;i++){ if((projectos.options[i].selected == true)||(todos)){ listaCodigo = listaCodigo + projectos.options[i].attributes[0].nodeValue + ","; } } return listaCodigo; }; return { url: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXGestionTareas=" + generaCodigosSeleccionados(projectsOrCategories), type: "GET", dataType: "json", headers: {XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX)}, }; } } ] } }); })(); </script> </tbody> </table> ]]> </Content> </Module>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Are you sure you have all the paropriate JS code on your page? Can you post the example somewhere so it's possible to see the actual problem?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.