GRID COM BARRA DE PROGRESSO

MORCELI 18/04/2016 10:54:23
#461069
Bom dia pessoal,


Começei as estudar um pouco de programação WEB, não sei muita coisa por isso precisava entender o codigo abaixo que é um exemplo que peguei na Internet, a parte que estou tentando aplicar no meu projeto é um grid com Barra de Progresso, a pessoa declarou uma variável e listou os itens nessa variável (var mydata = [
{ id: [Ô]1[Ô], invdate: [Ô]2007-10-01[Ô], name: [Ô]test[Ô], note: [Ô]note[Ô]), eu precisava saber um jeito como linkar e carregar meu grid direto do Banco ou de um datatable, Eu sei como carregar um Gridview, mas nesse exemplo não sei como buscar as informações de uma banco de dados.


  .cellDiv 
{
    left: 0px; top:5px; height:22px;
    position:relative;padding:0;margin-right:-4px;border:0;
}
.cellTextRight
{
    position:relative;
    margin-right:4px;
    text-align:right;
    float:right;
}
.gradient1{
    /* fallback (Opera) */
    background: #008AEF;
    /* Mozilla: https://developer.mozilla.org/en/CSS/-moz-linear-gradient */
    background: -moz-linear-gradient(left, #008AEF, white);
    /* Chrome, Safari: http://webkit.org/blog/175/introducing-css-gradients/ */
    background: -webkit-gradient(linear, left top, right top, from(#008AEF), to(white));
    /* MSIE http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx */
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=[ô]#008AEF[ô], EndColorStr=[ô]white[ô], GradientType=1);
    /*ie8*/
    -ms-filter: [Ô]progid:DXImageTransform.Microsoft.Gradient(StartColorStr=[ô]#008AEF[ô], EndColorStr=[ô]white[ô], GradientType=1)[Ô];
    position: absolute; left: -2px; top:-5px; right: 2px; height:22px; float:left;
}
.gradient2{
    background: #63C384;
    background: -moz-linear-gradient(left, #63C384 0%, white 100%);
    background: -webkit-gradient(linear, left top, right top, from(#63C384), to(white));
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=[ô]#63C384[ô], EndColorStr=[ô]white[ô], GradientType=1);
    -ms-filter: [Ô]progid:DXImageTransform.Microsoft.Gradient(StartColorStr=[ô]#63C384[ô], EndColorStr=[ô]white[ô], GradientType=1)[Ô];
    position: absolute; left: -2px; top:-5px; right: 2px; height:22px; float:left;
}

Java
var grid = $([Ô]#list[Ô]);
var gradientNumberFormat = function (cellvalue, gradientClass, minDataValue,
                                 maxDataValue, minDisplayValue, maxDisplayValue) {
    var dataAsNumber = parseFloat(cellvalue); /* parseInt(cellvalue, 10);*/
    if (dataAsNumber > maxDataValue) {
        dataAsNumber = maxDataValue;
    }
    if (dataAsNumber < minDataValue) {
        dataAsNumber = minDataValue;
    }
    var prozentVal = minDisplayValue+(dataAsNumber-minDataValue)*(maxDisplayValue-
                                      minDisplayValue)/(maxDataValue-minDataValue);
    return [ô]<div class=[Ô]cellDiv[Ô]><div class=[Ô][ô]+gradientClass+[ô][Ô] style=[Ô]width:[ô]+
            prozentVal+[ô]%;[Ô]></div><div class=[Ô]cellTextRight[Ô]>[ô]+cellvalue +
            [ô]</div></div>[ô];
};
var mydata = [
    { id: [Ô]1[Ô],  invdate: [Ô]2007-10-01[Ô], name: [Ô]test[Ô],  note: [Ô]note[Ô],
      amount: [Ô]200.00[Ô], tax: [Ô]10.00[Ô], total: [Ô]210.00[Ô] },
    { id: [Ô]2[Ô],  invdate: [Ô]2007-10-02[Ô], name: [Ô]test2[Ô], note: [Ô]note2[Ô],
      amount: [Ô]300.00[Ô], tax: [Ô]20.00[Ô], total: [Ô]320.00[Ô] },
    { id: [Ô]3[Ô],  invdate: [Ô]2007-09-01[Ô], name: [Ô]test3[Ô], note: [Ô]note3[Ô],
      amount: [Ô]400.00[Ô], tax: [Ô]30.00[Ô], total: [Ô]430.00[Ô] },
    { id: [Ô]4[Ô],  invdate: [Ô]2007-10-04[Ô], name: [Ô]test[Ô],  note: [Ô]note[Ô],
      amount: [Ô]200.00[Ô], tax: [Ô]10.00[Ô], total: [Ô]210.00[Ô] },
    { id: [Ô]5[Ô],  invdate: [Ô]2007-10-05[Ô], name: [Ô]test2[Ô], note: [Ô]note2[Ô],
      amount: [Ô]300.00[Ô], tax: [Ô]20.00[Ô], total: [Ô]320.00[Ô] },
    { id: [Ô]6[Ô],  invdate: [Ô]2007-09-06[Ô], name: [Ô]test3[Ô], note: [Ô]note3[Ô],
      amount: [Ô]400.00[Ô], tax: [Ô]30.00[Ô], total: [Ô]430.00[Ô] },
    { id: [Ô]7[Ô],  invdate: [Ô]2007-10-04[Ô], name: [Ô]test[Ô],  note: [Ô]note[Ô],
      amount: [Ô]200.00[Ô], tax: [Ô]10.00[Ô], total: [Ô]210.00[Ô] },
    { id: [Ô]8[Ô],  invdate: [Ô]2007-10-03[Ô], name: [Ô]test2[Ô], note: [Ô]note2[Ô],
      amount: [Ô]300.00[Ô], tax: [Ô]20.00[Ô], total: [Ô]320.00[Ô] },
    { id: [Ô]9[Ô],  invdate: [Ô]2007-09-01[Ô], name: [Ô]test3[Ô], note: [Ô]note3[Ô],
      amount: [Ô]400.00[Ô], tax: [Ô]30.00[Ô], total: [Ô]430.00[Ô] },
    { id: [Ô]10[Ô], invdate: [Ô]2007-10-01[Ô], name: [Ô]test[Ô],  note: [Ô]note[Ô],
      amount: [Ô]200.00[Ô], tax: [Ô]10.00[Ô], total: [Ô]210.00[Ô] },
    { id: [Ô]11[Ô], invdate: [Ô]2007-10-02[Ô], name: [Ô]test2[Ô], note: [Ô]note2[Ô],
      amount: [Ô]300.00[Ô], tax: [Ô]20.00[Ô], total: [Ô]320.00[Ô] },
    { id: [Ô]12[Ô], invdate: [Ô]2007-09-01[Ô], name: [Ô]test3[Ô], note: [Ô]note3[Ô],
      amount: [Ô]400.00[Ô], tax: [Ô]30.00[Ô], total: [Ô]430.00[Ô] },
    { id: [Ô]13[Ô], invdate: [Ô]2007-10-04[Ô], name: [Ô]test[Ô],  note: [Ô]note[Ô],
      amount: [Ô]200.00[Ô], tax: [Ô]10.00[Ô], total: [Ô]210.00[Ô] },
    { id: [Ô]14[Ô], invdate: [Ô]2007-10-05[Ô], name: [Ô]test2[Ô], note: [Ô]note2[Ô],
      amount: [Ô]300.00[Ô], tax: [Ô]20.00[Ô], total: [Ô]320.00[Ô] },
    { id: [Ô]15[Ô], invdate: [Ô]2007-09-06[Ô], name: [Ô]test3[Ô], note: [Ô]note3[Ô],
      amount: [Ô]400.00[Ô], tax: [Ô]30.00[Ô], total: [Ô]430.00[Ô] },
    { id: [Ô]16[Ô], invdate: [Ô]2007-10-04[Ô], name: [Ô]test[Ô],  note: [Ô]note[Ô],
      amount: [Ô]200.00[Ô], tax: [Ô]10.00[Ô], total: [Ô]210.00[Ô] },
    { id: [Ô]17[Ô], invdate: [Ô]2007-10-03[Ô], name: [Ô]test2[Ô], note: [Ô]note2[Ô],
      amount: [Ô]300.00[Ô], tax: [Ô]20.00[Ô], total: [Ô]320.00[Ô] },
    { id: [Ô]18[Ô], invdate: [Ô]2007-09-01[Ô], name: [Ô]test3[Ô], note: [Ô]note3[Ô],
      amount: [Ô]400.00[Ô], tax: [Ô]30.00[Ô], total: [Ô]430.00[Ô] }
];
grid.jqGrid({
    data: mydata,
    datatype: [Ô]local[Ô],
    colNames: [[ô]Inv No[ô], [ô]Date[ô], [ô]Client[ô], [ô]Amount[ô], [ô]Tax[ô], [ô]Total[ô], [ô]Notes[ô]],
    colModel: [
        { name:[ô]id[ô], index:[ô]id[ô], key:true, width:70, align:[Ô]right[Ô], sorttype:[Ô]int[Ô],
            formatter: function (cellvalue) {
                // the number 1  will be mapped to no color bar
                // the number 18 will be mapped to the color bar with 100% filled
                return gradientNumberFormat(cellvalue, [Ô]gradient1[Ô], 1, 18, 0, 100);
            }
        },
        { name:[ô]invdate[ô], index:[ô]invdate[ô], width:90, sorttype:[Ô]date[Ô] },
        { name:[ô]name[ô], index:[ô]name[ô], width:100 },
        { name:[ô]amount[ô], index:[ô]amount[ô], width:80, align:[Ô]right[Ô], sorttype:[Ô]float[Ô],
            formatter: function (cellvalue) {
                // the number 200 will be mapped to the 10% filled color bar
                // the number 400 will be mapped to the 90% filled color bar
                return gradientNumberFormat(cellvalue,[Ô]gradient2[Ô],200,400,10,90);
            }
        },
        { name:[ô]tax[ô], index:[ô]tax[ô], width:80, align:[Ô]right[Ô], sorttype:[Ô]float[Ô] },
        { name:[ô]total[ô], index:[ô]total[ô], width:80, align:[Ô]right[Ô], sorttype:[Ô]float[Ô] },
        { name:[ô]note[ô], index:[ô]note[ô], width:150, sortable:false }
    ],
    pager: [ô]#pager[ô],
    rowNum: 10,
    rowList: [5, 10, 20, 50],
    sortname: [ô]id[ô],
    sortorder: [ô]desc[ô],
    viewrecords: true,
    height: [Ô]100%[Ô],
    caption: [Ô]Numbers with gradient color[Ô]
});
grid.jqGrid([ô]navGrid[ô], [ô]#pager[ô],
            { add:false, edit:false, del:false, search:false, refresh:true });

KERPLUNK 18/04/2016 23:06:58
#461106 Resposta escolhida
To vendo que você está querendo evoluir para Web, muito bom! Mas vamos devagar. Primeiro você precisa entender o que é uma aplicação Web: Uma aplicação Web, é uma composição de HTML + JavaScript + CSS. Ponto final, não tem mais nada. Então você precisa de um mínimo entendimento do que é cada uma dessas 3 [Ô]linguagens[Ô]:

HTML: é a marcação de texto em si. No seu exemplo ela nem está presente, mas sem ela, não vai funcionar.
CSS: São os estilos, que estão no começo do que você postou. Elas definem uma série de aspectos em relação à aparência.
JavaScript: Cada vez mais raro de se ver alguém usando em sua forma pura, geralmente preferindo substituir por um framework pronto(como JQuery), é a parte que faz iterações na sua aplicação Web. Seja buscando dados de uma WebAPI, seja modificando estilos e até mesmo marcações HTML, ela faz com que a aplicação fique responsiva.

Se entendi o que você quer, você quer preencher um grid, utilizando dados de um banco de dados. Bem, tenho novidades ruins para você: Nenhuma dessas tecnologias se conecta diretamente com um banco de dados como você conhece. Pois é, parece mentira, mas não é. Mas calma, nem tudo está perdido. O Javascript é capaz de consumir dados de WebAPI ou WebServices e é esse o pulo do gado. Tá vendo aquela declaração de variável [Ô]mydata[Ô] (var = mydata.....)? Pois é, aquilo ali é uma variável que contém dados em formato JSON, que são mais ou menos como um retorno de uma tabela. é esse tipo de dados que uma API retorna, texto em um determinado formato, que pode ser JSON ou XML, no caso do exemplo, JSON. Então, para preencher um grid com dados de um banco de dados, você precisa fazer com que [Ô]mydata[Ô] de alguma forma se conecte à uma WebAPI, buscando dados. E isso é tarefa para o AJAX. é o AJAX quem consegue fazer essa [Ô]busca de dados[Ô], fazendo uma chamada à uma WebAPI ou WebService, ele retorna os dados e armazena em uma variável ou até mesmo é usado como variável. No caso do componente que você está usando (jqGrid), ele já possui um parâmetro que recebe uma URL e faz toda essa parte do AJAX automaticamente.

Tenho quase certeza que tudo isso vai soar como [Ô]grego[Ô] pra você assim no início, mas é crucial que você entenda o que estou dizendo e não é vendo código que vai te ajudar. A primeira coisa à fazer é saber identificar cada uma das partes que mencionei, HTML, Javascript e CSS. E além de identificar, você precisa de um mínimo de noção do que cada uma delas faz. Também tenho quase certeza que mesmo assim você vai querer ver a coisa funcionando. E por isso fiz um pequeno HTML pra você mostrando como isso é feito. Ele está todo comentado e acho que isso pode ajudar.

No exemplo html, está chamando dados de exemplo do próprio site do jqGrid mesmo. Mas nada impede de você criar sua própria WebAPI, que vai trazer os dados do SEU banco de dados. Para isso, sugiro que veja os vídeos do meu canal. Lá, eu ensino como fazer isso, passo à passo, mastigadinho, com exemplos e código fonte. Tomara que você assista mesmo e tente fazer não só saia baixando código, porque posso garantir que assim, você não vai ter um conhecimento sólido.
KERPLUNK 18/04/2016 23:07:31
#461107
Faltou o exemplo;
MORCELI 19/04/2016 09:40:29
#461122
Obrigado por sua atenção Kerplunk, vou olhar suas aulas....
Fica com Deus!!
Tópico encerrado , respostas não são mais permitidas
Voltar