Pessoal estou com um problema e tenho que resolver, tenho uma datatable do primefaces com alguns registros, porem o cliente pediu para fazer algumas coisas meio complicadas (pelo menos pra mim) tentei explicar na figura:
Primefaces+css
S
4 Respostas
Voce que cortar aquele resto de espaco que tem na coluna Localizacao?
Mas ai vai cortar o titulo, se nao quer cortar o titulo, nao pode abreviar a palavra “Localizacao” ?
EDIT: putz, fui querer ajudar postando o link certo da imagem, mas acabou ficando mto grande :shock:
S
Na verdade quero definir que minha datatable pode ter o tamanho máximo da div onde ela está contida, o usuário selecionou mais linhas para ver, digamos que tenha selecionado ver 50 linhas atualmente a datateble esta empurrando o conteúdo abaixo dela para baixo e não quero isso, quero que o usuário selecione as 50 linhas dai quando chegar o tamanho tamanho da div onde ela esta contida não ultapasse a div mais sim coloque uma barra de rolagem somente onde as linhas são exibidas, setar as propriedades scrollable="true" scrollHeight="500" “funciona como quero” o problema é que a propriedade scrollHeight="500" vai deixar um tamanho fixo para minha datatable, dai digamos que tenha somente 2 linhas vai ficar um espaço desnecessário abaixo das 2 linhas que estão sendo exibidas, e o usuário disse que não que esse espaço em branco.
Brother posta o seu código vai ficar mais fácil para te ajudar.
S
Seque meu xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<f:metadata>
<f:param name="crud" value="true"/>
</f:metadata>
<h:head>
<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.request.contextPath}/resources/css/cadastros.css"/>
<h:outputScript name="jquery.js" library="js" target="head"/>
</h:head>
<h:body>
<ui:composition template="/WEB-INF/template.xhtml">
<ui:define name="conteudoPrincipal">
<!-- Formulário para exibição dos dados-->
<h:form id="formEquipamento">
<p:messages id="growl" closable="true"/>
<p:dataTable id="tableEquipamentos" var="equipamento" value="#{gerenciamentoCadastroEquipamentosMB.equipamentos}"
paginator="true" rows="10"
rowKey="#{equipamento.idEquipamento}"
selection="#{gerenciamentoCadastroEquipamentosMB.equipamento}"
selectionMode="single"
resizableColumns="true"
emptyMessage="Nenhum registro econtrado na base de dados!"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,15,20,30,40,50,60"
paginatorPosition="bottom">
<!-- Evento disparado para o servidor toda vez que uma linha for selecionada na datatable -->
<p:ajax event="rowSelect" update=":formEquipamento:btnEditar :formEquipamento:btnExcluir :formEquipamento:btnVisualizar" listener="#{gerenciamentoCadastroEquipamentosMB.onRowSelect}"/>
<!-- Evento disparado para o servidor toda vez que ocorrer uma paginção na datatable -->
<p:ajax event="page" update=":formEquipamento:tableEquipamentos :formEquipamento:btnEditar :formEquipamento:btnExcluir :formEquipamento:btnVisualizar" listener="#{gerenciamentoCadastroEquipamentosMB.pageEvent}"/>
<f:facet name="header">
<p:outputPanel style="float: right;">
<h:outputText value="Procurar:" style="padding-right: 3px;" />
<p:inputText id="globalFilter" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column headerText="Id" rendered="false" width="#{gerenciamentoCadastroEquipamentosMB.tamanhoColuna}">
#{equipamento.idEquipamento}
</p:column>
<p:column headerText="Tag" width="#{gerenciamentoCadastroEquipamentosMB.tamanhoColuna}">
#{equipamento.tag}
</p:column>
<p:column headerText="Tipo" width="200">
#{equipamento.tipo.nome}
</p:column>
<p:column headerText="Potência" width="100">
#{equipamento.modelo.potenciaMw}
</p:column>
<p:column headerText="Classificação" width="100">
#{equipamento.classificacao}
</p:column>
<p:column headerText="Antena" width="100">
#{equipamento.antena.nome}
</p:column>
<p:column headerText="Alcance" width="100">
#{equipamento.alcance}
</p:column>
<p:column headerText="Modelo" width="100">
#{equipamento.modelo.nome}
</p:column>
<p:column headerText="Função" width="100">
#{equipamento.funcao.nome}
</p:column>
<p:column headerText="Localização" width="100">
#{equipamento.localizacao.nome}
</p:column>
<p:column headerText="Responsável" width="100">
#{equipamento.responsavel.nome}
</p:column>
</p:dataTable>
<p:separator/>
<fieldset id="barraBotoes" style="float: right; border: none;">
<p:commandButton id="btnCadastrar" value="Cadastrar" disabled="false" oncomplete="dlgCadEquipamento.show();" style="margin: 5px;"/>
<p:commandButton id="btnEditar" value="Editar" disabled="#{gerenciamentoCadastroEquipamentosMB.btnEditar}" update=":formEditEquipamento:dialogEditFab" oncomplete="dlgEditEquipamento.show();" style="margin: 5px;"/>
<p:commandButton id="btnExcluir" value="Excluir" disabled="#{gerenciamentoCadastroEquipamentosMB.btnExluir}" update=":formExcluirEquipamento:confirmDialogExluirFab" oncomplete="confirExclusaoEquipamento.show();" style="margin: 5px;"/>
<p:commandButton id="btnVisualizar" value="Visualizar" disabled="#{gerenciamentoCadastroEquipamentosMB.btnVisualizar}" update=":formVisuEquipamento:pngVisualizar" oncomplete="dlgVisuEquipamento.show();" style="margin: 5px;"/>
</fieldset>
</h:form>
<!-- Formulário onde o usuário podera visualizar os detalhes de um determinado
equipamento-->
<h:form id="formVisuEquipamento">
<p:dialog header="Visualizar Detalhes do Equipamento" widgetVar="dlgVisuEquipamento" resizable="false" id="dialogVisuEquipamento" modal="true">
<h:panelGrid id="pngVisualizar" columns="4" cellpadding="4" >
<h:outputLabel value="Tag:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.tag}" disabled="true" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Potência:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.potenciaMax}" disabled="true" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Classificação:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.classificacao}" disabled="true" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Alcance:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.alcance}" disabled="true" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Antena:" style="float: right;"/>
<p:selectOneMenu id="antena" value="#{gerenciamentoCadastroEquipamentosMB.idAntena}" disabled="true" style="width: 230px;">
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.antenas}" />
</p:selectOneMenu>
<h:outputLabel value="Tipo:" style="float: right;"/>
<p:selectOneMenu id="tipo" value="#{gerenciamentoCadastroEquipamentosMB.idTipo}" disabled="true" style="width: 230px;font-weight: bold;">
<f:selectItem itemValue="" itemLabel="--Selecionar Tipo--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.tipos}" />
</p:selectOneMenu>
<h:outputLabel value="modelo:" style="float: right;"/>
<p:selectOneMenu id="modelo" value="#{gerenciamentoCadastroEquipamentosMB.idModelo}" disabled="true" style="width: 230px;">
<f:selectItem itemValue="" itemLabel="--Selecionar Modelo--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.modelos}" />
</p:selectOneMenu>
<h:outputLabel value="Função:" style="float: right;"/>
<p:selectOneMenu id="funcao" value="#{gerenciamentoCadastroEquipamentosMB.idFuncao}" disabled="true" style="width: 230px;">
<f:selectItem itemValue="" itemLabel="--Selecionar Função--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.funcoes}" />
</p:selectOneMenu>
<h:outputLabel value="Localização:" style="float: right;"/>
<p:selectOneMenu id="localizacao" value="#{gerenciamentoCadastroEquipamentosMB.idLocalizacao}" disabled="true" style="width: 230px;">
<f:selectItem itemValue="" itemLabel="--Selecionar Localização--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.localizacoes}" />
</p:selectOneMenu>
<h:outputLabel value="Responsável:" style="float: right;"/>
<p:selectOneMenu id="responsavel" value="#{gerenciamentoCadastroEquipamentosMB.idResponsavel}" disabled="true" style="width: 230px;">
<f:selectItem itemValue="" itemLabel="--Selecionar Responsável--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.responsaveis}" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator/>
<p:commandButton value="Ok" disabled="true" update=":formEquipamento:btnEditar :formEquipamento:btnExcluir :formEquipamento:btnVisualizar"/>
<p:commandButton value="Cancelar" onclick="dlgVisuEquipamento.hide();"/>
</p:dialog>
</h:form>
<!-- Formulário onde o usuário poderá visualizar os detalhes de um determinado
equipamento-->
<h:form id="formCadEquipamento">
<p:dialog header="Cadastrar Equipamento" widgetVar="dlgCadEquipamento" resizable="false" id="dialogCadEquipamento" modal="true">
<p:messages id="msgTelaCadEquipamento"/>
<h:panelGrid id="pngCadastrar" columns="4" cellpadding="4" >
<h:outputLabel value="Tag:" style="float: right;"/>
<p:inputText id="idTag" value="#{gerenciamentoCadastroEquipamentosMB.equipamento.tag}" required="true" requiredMessage="O campo é requerido" disabled="false" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Potência:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.potenciaMax}" disabled="false" style="width: 220px;font-weight:bold; ">
</p:inputText>
<h:outputLabel value="Classificação:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.classificacao}" disabled="false" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Alcance:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.alcance}" disabled="false" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Antena:" style="float: right;"/>
<p:selectOneMenu id="antena" value="#{gerenciamentoCadastroEquipamentosMB.idAntena}" style="width: 230px;">
<f:selectItem itemValue="" itemLabel="--Selecionar Antena--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.antenas}" />
</p:selectOneMenu>
<h:outputLabel value="Tipo:" style="float: right;"/>
<p:selectOneMenu id="tipo" value="#{gerenciamentoCadastroEquipamentosMB.idTipo}" style="width: 230px;font-weight: bold;">
<f:selectItem itemValue="" itemLabel="--Selecionar Tipo--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.tipos}" />
</p:selectOneMenu>
<h:outputLabel value="modelo:" style="float: right;"/>
<p:selectOneMenu id="modelo" value="#{gerenciamentoCadastroEquipamentosMB.idModelo}" style="width: 230px;">
<f:selectItem itemValue="" itemLabel="--Selecionar Modelo--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.modelos}" />
</p:selectOneMenu>
<h:outputLabel value="Função:" style="float: right;"/>
<p:selectOneMenu id="funcao" value="#{gerenciamentoCadastroEquipamentosMB.idFuncao}" style="width: 230px;">
<f:selectItem itemValue="" itemLabel="--Selecionar Função--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.funcoes}" />
</p:selectOneMenu>
<h:outputLabel value="Localização:" style="float: right;"/>
<p:selectOneMenu id="localizacao" value="#{gerenciamentoCadastroEquipamentosMB.idLocalizacao}" style="width: 230px;">
<f:selectItem itemValue="" itemLabel="--Selecionar Localização--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.localizacoes}" />
</p:selectOneMenu>
<h:outputLabel value="Responsável:" style="float: right;"/>
<p:selectOneMenu id="responsavel" value="#{gerenciamentoCadastroEquipamentosMB.idResponsavel}" style="width: 230px;">
<f:selectItem itemValue="" itemLabel="--Selecionar Responsável--"/>
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.responsaveis}" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator/>
<p:commandButton value="OK" actionListener="#{gerenciamentoCadastroEquipamentosMB.salvar}" update=":formEquipamento:tableEquipamentos :formEquipamento:btnEditar :formEquipamento:btnExcluir :formEquipamento:btnVisualizar :formCadEquipamento:dialogCadEquipamento" />
<p:commandButton value="Cancelar" onclick="dlgCadEquipamento.hide();"/>
</p:dialog>
<script type="text/javascript">
function verificaSucesso() {
var variavel = '#{gerenciamentoCadastroEquipamentosMB.isFechaTela}'; //Aqui pega a variável do Bean
alert('Retornou: ' + variavel);
if (variavel == true) {
alert('Entrou para fechar a tela');
dlgCadEquipamento.hide(); //E aqui verifica se retornou true e pode fechar
}
alert('Deixa a tela aberta');
}
</script>
</h:form>
<!-- Formulário onde o usuário podera editar os detalhes de um determinado
equipamento-->
<h:form id="formEditEquipamento">
<p:dialog header="Editar Equipamento" widgetVar="dlgEditEquipamento" resizable="false" id="dialogEditFab" modal="true">
<h:inputHidden value="#{gerenciamentoCadastroEquipamentosMB.equipamento.idEquipamento}" id="idEquipamento"/>
<h:panelGrid id="pngEdit" columns="4" cellpadding="4" >
<h:outputLabel value="Tag:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.tag}" disabled="false" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Potência:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.potenciaMax}" disabled="false" validator="validaNumero" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Classificação:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.classificacao}" disabled="false" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Alcance:" style="float: right;"/>
<p:inputText value="#{gerenciamentoCadastroEquipamentosMB.equipamento.alcance}" disabled="false" style="width: 220px;font-weight:bold; "/>
<h:outputLabel value="Antena:" style="float: right;"/>
<p:selectOneMenu id="antena" value="#{gerenciamentoCadastroEquipamentosMB.idAntena}" style="width: 230px;">
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.antenas}" />
</p:selectOneMenu>
<h:outputLabel value="Tipo:" style="float: right;"/>
<p:selectOneMenu id="tipo" value="#{gerenciamentoCadastroEquipamentosMB.idTipo}" style="width: 230px;font-weight: bold;">
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.tipos}" />
</p:selectOneMenu>
<h:outputLabel value="modelo:" style="float: right;"/>
<p:selectOneMenu id="modelo" value="#{gerenciamentoCadastroEquipamentosMB.idModelo}" style="width: 230px;">
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.modelos}" />
</p:selectOneMenu>
<h:outputLabel value="Função:" style="float: right;"/>
<p:selectOneMenu id="funcao" value="#{gerenciamentoCadastroEquipamentosMB.idFuncao}" style="width: 230px;">
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.funcoes}" />
</p:selectOneMenu>
<h:outputLabel value="Localização:" style="float: right;"/>
<p:selectOneMenu id="localizacao" value="#{gerenciamentoCadastroEquipamentosMB.idLocalizacao}" style="width: 230px;">
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.localizacoes}" />
</p:selectOneMenu>
<h:outputLabel value="Responsável:" style="float: right;"/>
<p:selectOneMenu id="responsavel" value="#{gerenciamentoCadastroEquipamentosMB.idResponsavel}" style="width: 230px;">
<f:selectItems value="#{gerenciamentoCadastroEquipamentosMB.responsaveis}" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator/>
<p:commandButton value="OK" actionListener="#{gerenciamentoCadastroEquipamentosMB.editaEquipamento}" update=":formEquipamento:tableEquipamentos :formEquipamento:growl :formEquipamento:btnEditar :formEquipamento:btnExcluir :formEquipamento:btnVisualizar :formEditEquipamento:dialogEditFab" oncomplete="dlgEditEquipamento.hide();"/>
<p:commandButton value="Cancelar" onclick="dlgEditEquipamento.hide();"/>
</p:dialog>
</h:form>
<!-- Dialog para confirmação de exclusão de um determindo fabricante -->
<h:form id="formExcluirEquipamento">
<p:confirmDialog id="confirmDialogExluirFab" message="Deseja realmente excluir o equipamento com o modelo #{gerenciamentoCadastroEquipamentosMB.equipamento.modelo.nome}?"
header="Excluir Equipamento" severity="alert" widgetVar="confirExclusaoEquipamento">
<h:inputHidden value="#{gerenciamentoCadastroEquipamentosMB.equipamento.idEquipamento}"/>
<p:commandButton id="confirm" value="Sim" update=":formEquipamento:tableEquipamentos :formEquipamento:btnEditar :formEquipamento:btnExcluir :formEquipamento:btnVisualizar :formEquipamento:growl" oncomplete="confirExclusaoEquipamento.hide();"
actionListener="#{gerenciamentoCadastroEquipamentosMB.excluirEquipamento(gerenciamentoCadastroEquipamentosMB.equipamento.idEquipamento)}" />
<p:commandButton id="decline" value="Não" onclick="confirExclusaoEquipamento.hide();" type="button" />
</p:confirmDialog>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Criado 26 de outubro de 2012
Ultima resposta 27 de out. de 2012
Respostas 4
Participantes 3