Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Vinicius Wilson C. Silva

jQuery Bootgrid, Como Marcar Campo input checkbox ?

Por , em Javascript

Recommended Posts

Vinicius Wilson C. Silva    0

Vinicius Wilson C. Silva
Postado

"jQuery Bootgrid"

 

Boa noite pessoal sou novo em java script e estou usando uma biblioteca de funções e css prontas de um template, me deparou com a seguinte situação:

<table id="data-table-selection" class="table table-striped">
            <thead>
                <tr>
                    <th data-width="5%" data-column-id="id" data-type="numeric" data-identifier="true">ID</th>
                    <th data-width="85%" data-column-id="sender">Sender</th>
                    <th data-width="10%" data-column-id="received">Received</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>Vinicius</td>
                <td>14.10.2013</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Wallace</td>
                <td>14.10.2013</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Vivian</td>
                <td>14.10.2013</td>
            </tr> 
            <tr>
                <td>4</td>
                <td>Carlos</td>
                <td>14.10.2013</td>
            </tr>                 

            </tbody>
        </table>

O Grid é montado na pagina de acordo com o css já com os Commands de "Search" "Paginação" e "Select" exatamente como este da pagina a seguir http://byrushan.com/projects/ma/v1-3-1/data-tables.html Em Selection Example

Gostaria de saber como vir selecionado ( checked ) o checkbox da linha 3 Vivian quando a pagina for carregada.
Agradeço a todos a ajuda

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Dica:
Pesquise sobre
* DOM
* Jquery -> * $(element).each(


Agora tem spoiler abaixo...Cuidado!

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<p><input type="checkbox" name="select" id="1" class="select-box"/> Luigi</p>
	<p><input type="checkbox" name="select" id="2" class="select-box"/> Mario</p>
	<p><input type="checkbox" name="select" id="3" class="select-box"/> Vivian</p>
	
	<script src="js/lib/jquery-1.10.2.js"></script>
	<script type="text/javascript">
		/*
		//Recomendo utilizar o Google Chrome, pq sim.
		
		//Primeiro a gente monitora assim q o Jquery estiver pronto, segue exemplo abaixo
		$(document).ready(function() {
			console.log('ESTOUUUU PRONTO!');
		});
		*/
		
		/*
		//Agora tentamos descobrir alguma coisa q todos os checks tem em comum, no caso é a class 'select-box'
		//Podemos pegar todas elas como seletor class
		$(document).ready(function() {
			console.log($('.select-box'));
		});
		*/
		
		/*
		//Podemos dar um loop em todos elementos da classe assim:
		$(document).ready(function() {
			$('.select-box').each(function(i, element){
				console.log(element);
			});
		});
		*/
		
		//E agora checar se o atributo do elemento corresponde a Vivian (no caso 3)
		$(document).ready(function() {
			$('.select-box').each(function(i, element){
				if(element.getAttribute("id") == '3'){
					$(element).prop('checked',true);
				}
			});
		});
	</script>
	
</body>
</html>

Espero que tenha sido esclarecedor haha

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Fiquei curioso haha acabei matando a charada.

 

Coisas relevantes:

 

-> O elemento que meu exemplo monitora é o valor do atributo 'id' 

<input type="text" id="ESTE_AQUI" />

Agora na sua pagina deveria ser monitorado o valor do atributo 'value' (Como está na sua foto)

<input type="text" value="aqui_xD" />

Eu acabei baixando aqui pra dar uma olhada e funcinou.

 

Só o fato de você monitorar corretamente não vai dar certo, já q o bootgrid demora alguns segundos para inicializar mesmo colocando na ordem correta e isolando o mesmo dentro do

$(document).ready(function(){

Então restou colocar uma pequena espera:

setTimeout(function(){
	//Seu novo codigo corrigido vai aqui...
}, 1000);

Outra opção é você entender melhor o componente que você utiliza.

Eles tem uma documentação bacana inclusive com o evento 'loaded' que seria justamente oq você precisa:

$("#data-table-selection").bootgrid().on("loaded.rs.jquery.bootgrid", function (e){
	// http://www.jquery-bootgrid.com/documentation#methods
});

Boa noite e bons códigos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Wilson C. Silva    0

Vinicius Wilson C. Silva
Postado
Mais uma vez Obrigado, Gabriel,
Até editei o post, mas voce ja tinha baixado o arquivo =]
A Dica do Timeout caiu como uma luva, percebi q o problema estava justamente no acesso aos componentes ( criados em tempo de execução) havia feito testes em um botão para ser clicado depois que tudo havia sido carregado.
Me falta pratica no JS, não conheço bem as chamadas de funções e manipulação de componentes, acabo indo pelo que conheço por exemplo.
Provavelmente deve ter algo relacionado a recuperar os "checkbox" marcados em outra pagina pelo metodo post. ( num array provavelmente,
Mas tive que "gambiarrar" criando um input=text para o passar os checkbox marcados e recuperar o text na outra pagina.

capturar.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito