é o seguinte. Não estou conseguindo os resultados satisfatórios na montagem de uma arvore usando checkbox como em um treeview. Bem, quando coloco os dados fixos funciona muito bem. Mas quando trago os dados do BD, aí que complica, ou seja, não funciona. A lógica é a seguinte para entenderem. Tenho alguns dados chaves, vindos do bando, que são: MOTIVO, UNIDADE_NEGÓCIO, FAMILIA e claro o produto(tudo medicamentos). Existe uma LINQ que me traz essas informações para eu montar a árvore. Essa LINQ, por enquanto me traz tudo e serializo e envio para uma função JQUERY. Nessa função, eu faço um EACH no resultado da que vem da controller(LINQ), monto os nós e decarrego o HTML então na página. Na função, faço uns IF's para que não se repita os nomes nos nós. Não dá para fazer um distinct, pois tenho várias vezes o mesmo MOTIVO mas para ID diferentes e assim para os demais, por isso os IF's na jquery. O que está acontecendo? Não monta os checkbox's, traz as informações, mas não monta os checkbox e por isso não cria a barra de scroll lateralmente. Não vou escrever muito senão fica inelegível, mas veja os códigos abaixo:
1) Esse código com dados fakes funciona e é assim que gostaria. Os includes de javascript e CSS estão ok, senão não funcionava.
<div class="row">
<div class="col-md-12">
<div class="col-md-1">
<label for="cbxCodTipo">UF:</label>
</div>
<div class="col-md-4">
<select class="form-control col-md-6" name="cbxCodTipo" id="cbxCodTipo" onchange=" return MontaCidades();">
<option value="00">Selecione um estado</option>
<option value="AC">ACRE</option>
<option value="AL">ALAGOAS</option>
<option value="AP">AMAPÁ</option>
<option value="AM">AMAZONAS</option>
<option value="BA">BAHIA</option>
<option value="CE">CEARÁ</option>
<option value="DF">DISTRITO FEDERAL</option>
<option value="ES">ESPÍRITO SANTO</option>
<option value="GO">GOIÁS</option>
<option value="MA">MARANHÃO</option>
<option value="MT">MATO GROSSO</option>
<option value="MS">MATO GROSSO DO SUL</option>
<option value="MG">MINAS GERAIS</option>
<option value="PA">PARÁ</option>
<option value="PB">PARAÍBA</option>
<option value="PR">PARANÁ</option>
<option value="PE">PERNAMBUCO</option>
<option value="PI">PIAUÍ</option>
<option value="RJ">RIO DE JANEIRO</option>
<option value="RN">RIO GRANDE DO NORTE</option>
<option value="RS">RIO GRANDE DO SUL</option>
<option value="RO">RONDÔNIA</option>
<option value="RR">RORAIMA</option>
<option value="SC">SANTA CATARINA</option>
<option value="SP">SÃO PAULO</option>
<option value="SE">SERGIPE</option>
<option value="TO">TOCANTINS</option>
</select>
</div>
<div class="col-md-6">
<div class="col-md-2">
<label for="cbxCidade">Cidade:</label>
</div>
<select class="form-control col-md-4" name="cbxCidade" id="cbxCidade"></select>
</div>
</div>
<div class="col-md-12">
<div class="col-md-1">
<label for="cbxRede">Rede:</label>
</div>
<div class="col-md-4">
<select class="form-control col-md-6" name="cbxRede" id="cbxRede"></select>
</div>
<div class="col-md-6">
<div class="col-md-2">
<label for="cbxRede">Descrição:</label>
</div>
<select class="form-control col-md-4" name="cbxDescricao" id="cbxDescricao"></select>
</div>
</div>
<div class="col-md-12">
<div class="col-md-1">
<label for="cbxProduto">Produto:</label>
</div>
<div class="col-md-4">
<select class="form-control col-md-6" name="cbxProduto" id="cbxProduto"></select>
</div>
</div>
<div class="col-md-12">
<div class="col-md-1">
<label for="cbxUnNegocio">Unidade Negócio:</label>
</div>
<div class="col-md-4">
<select class="form-control col-md-6" name="cbxUnNegocio" id="cbxUnNegocio"></select>
</div>
</div>
</div>
<br />
<div id="content">
<div class="listTree"></div>
<button class="btn btn-primary" onclick=" return MontaArvore();">Pesquisar</button>
</div>
<br>
<div id='jqxWidget'>
<div style='float: left; width:auto;'>
<div id='jqxTree' style='visibility: hidden; float: left; margin-left: 20px;'>
<ul>
<li item-checked='false' item-expanded='false'>
Produto
<ul>
<li item-expanded='true'>
MIP
<ul>
<li item-expanded='true'>
Família: ACCUVIT
<ul>
<li>ACCUVIT COMREV FRX30</li>
</ul>
</li>
<li item-expanded='true'>
Família: FLOGORAL
<ul>
<li>FLOGORAL SPRAY CEREJA CTX30ML</li>
<li>FLOGORAL SPRAY MENTA CTX30ML</li>
<li>FLOGORAL CREM DENTAL CTX70G</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div style='margin-left: 60px; float: left;'>
<div style='margin-top: 10px;'>
<input id='jqxCheckBox' type="hidden">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<label for="txtObs">Observação:</label>
</div>
<div class="col-md-12">
<textarea id="txtObs" style="width: 450px;"></textarea>
</div>
</div>
</div>
<br />
<div id="content">
<div class="listTree"></div>
<button class="btn btn-success" ">Gravar</button>
@Html.ActionLink("Voltar", "Index", "Home", new { }, new { @class = "btn btn-danger" })
</div>
Aqui está o meu controller com a LINQ.
[HttpPost]
public JsonResult ArvoreAcao(string _uf)
{
RupturaEntities db = new RupturaEntities();
var monta_arvore = (from rup in db.Ruptura
from apr in db.Apresentacao.Where(apr => apr.Codigo_Apresentacao == rup.Codigo_Apresentacao)
from pdv in db.PDV.Where(pdv => pdv.CodigoPDV == rup.CodigoPDV)
from mot in db.Motivo.Where(mot => mot.IDMotivo == rup.IDMotivo)
select new {
rup.IDRuptura,
rup.DataRuptura,
rup.IDMotivo,
mot.Motivo1,
rup.IDOrigem,
rup.CodigoPDV,
pdv.UF,
pdv.Cidade,
loja = pdv.Cnpj + " - " + pdv.Descricao,
rup.Codigo_Apresentacao,
apr.Unidade_Negocio,
apr.Franquia,
apr.Familia,
apr.Descricao}).ToList().Distinct().OrderBy(apr => apr.Descricao);
return Json(new { monta_arvore }, JsonRequestBehavior.AllowGet);
}
E por último meu JQUERY, onde está o problema.
function MontaArvore() {
var str = "";
var motivo = "";
var unidade_neg = "";
var familia = "";
$.ajax({
url: '/Acao/ArvoreAcao',
datatype: 'json',
contentType: 'application/json; charset=utf-8',
type: 'POST',
data: JSON.stringify({}),
success: function (data) {
$(data.monta_arvore).each(function () {
if (motivo != this.Motivo1) {
str += '<ul>';
str += '<li item-checked="false" item-expanded="false">';
str += this.Motivo1;
}
if (unidade_neg != this.Unidade_Negocio) {
str += '<ul>';
str += '<li item-expanded="false">';
str += this.Unidade_Negocio;
}
if (familia != this.Familia) {
str += '<ul>';
str += '<li item-expanded="false">';
str += this.Familia;
}
str += '<ul>';
str += '<li>' + this.Descricao + '</li>';
str += '</ul>';
str += '</li>';//Familia
str += '</ul>';//Familia
str += '</li>';//Unidade de negocio
str += '</ul>';//Unidade de negocio
motivo = this.Motivo1;
unidade_neg = this.Unidade_Negocio;
familia = this.Familia;
});
str += '</li>';//li item-checked após o ul principal
str += '</ul>';
$('#jqxTree').html(str);
str = "";
},
error: function (error) {
}
})
}
Pode ser algum <UL>
ou alguma <LI>
, sei lá, qualquer coisa assim. A questão é que os checks não são montados e com os dados fakes eles(checks) ficam ótimos. Qualquer ajuda é bem-vinda. Obrigado.