dados personalizado dicas em jqGrid 3.4

StackOverflow https://stackoverflow.com/questions/1201473

  •  05-07-2019
  •  | 
  •  

Pergunta

Eu tenho trabalhado com o excelente plugin de jqGrid, e ele funciona muito bem. Recentemente, porém, me pediram para implementar algumas dicas de ferramentas personalizadas para o grid. Agora, a documentação é muito completo, mas não aborda como (se é de todo possível) para fazer isso.

Aqui está um exemplo do que eu estou procurando:

| col A | col B | ...
| de dados | dados | ...
| (Foco do mouse) - dados x

Eu procurei através da documentação e fonte de como / onde para definir dicas de ferramentas, mas o mais próximo que tenho obtido é tooltips personalizados para botões no modo de edição. Eu tenho um manipulador de eventos para o evento afterInsertRow - por meio de que eu poderia obter o ROWID e tal, mas eu não tenho certeza de como definir os atributos HTML nesse caso

.

EDIT: para esclarecer, eu gostaria de definir o atributo de título em uma célula individual para uma determinada peça de dados (que eu já tenho no modelo jqgrid)

EDIT 2: Eu tentei inserir o seguinte no evento afterInsertRow, sem alegria, onde ADATA é o modelo JSON, e ExpirationDate é o nome do modelo: 

afterInsertRow: function(rowid, aData) {
                grid.setCell(rowid, 'ExpirationDate', '', { title: aData.ExpiredBy });

o seguinte código no mesmo manipulador de eventos funcionar, no entanto: 

grid.setCell(rowid, 'ExpirationDate', '', { color: 'red' });

EDIT 3: trabalhar com excelentes suggesstions de redsquare, eu já determinou que o atributo title está sendo definido em algum momento após o evento afterInsertRow: Eu já atravessou e determinou que ele está sendo definido corretamente por qualquer método descrito em comentários, mas, infelizmente, eu recebo um código fonte não está disponível para este local ao tentar passo a mais, ou seja, eu não posso ver exatamente onde o título está sendo alterado.

EDIT 4: (! Obrigado pela sua paciência e me ajudar a trabalhar através deste) novamente tomar o comentário de redsquare sobre a tentativa do evento LoadComplete, eu era capaz de obter e modificar atributos da célula com sucesso, mas o atributo título teimosamente continua a mesma: 

loadComplete: function() {
                var ids = grid.getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
                }

edição final:. Consulte minha resposta abaixo - eu era capaz de encontrar a causa raiz do problema, com a ajuda de redsquare

Qualquer ajuda seria apreciada

Foi útil?

Solução

Ok, eu encontrei o problema depois de fazer alguma inspeção rigorosa das propriedades sendo definido. Acontece que eu, junta-cabeça que eu sou, não leia a documentação para o método grid.setCell (...) de perto o suficiente:

Este método pode alterar o conteúdo de célula particular e pode definir ou classe propriedades de estilo. Onde: • rowid: o ID da linha,

• colname: o nome da coluna (este parâmetro pode ser um começo número entre 0)

• Dados: O conteúdo que pode ser colocado para dentro da célula. Se string vazia o conteúdo não será alterado

• classe: se a classe é uma string então nós adicionamos uma classe para a célula usando addClass; E se classe é um array que definir o novo css Propriedades via CSS

• Propriedades: define o atributo properies da célula

Exemplo:

setCell ( "10", "imposto", '', {color: 'centro': 'text-align' 'vermelho'} '{title:' Vendas Tax '})

irá definir o conteúdo do domínio fiscal na linha 10 para vermelho e centrado e alterar o título de 'imposto sobre vendas'.

Em suma, os argumentos que eu estava passando para o método foram definindo as propriedades CSS (4º ARG) em vez dos atributos (a 5ª ARG). O resultado foi que dois atributos do título foram adicionados, com um a ser formatado de modo inadequado. O abaixo mostra a invocação correto do método para realizar o que eu estava tentando fazer: 

grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});

Obrigado novamente a redsquare para seu / sua ajuda para resolver este!

Outras dicas

O que informação seria a dica estar exibindo? Vamos assumir que a informação dica é talvez dentro da primeira célula (oculto) na linha. Você poderia ter como alvo qualquer linha dentro da grade e usando o método .Live você tem quaisquer novas linhas coberto. 

$('#gridId>tbody>tr').live('mouseover', showTip)
                     .live('mouseoff', hideTip);

function showTip(){

   var $row = $(this);
   //get tooltip from first hidden cell
   var tipText = $row.children(':eq(0)').text()
   //append tipText to tooltip and show

}


function hideTip(){

    //hide tip

}

ok após a clareza que você poderia tentar isso. Ele assume a célula que deseja a mudança é a quarta em cada linha e define o título da célula para o texto atual em que a célula. Faça as alterações necessárias.

NB A grade realmente quebra os padrões usando inteiro da id para as linhas. No entanto, o seguinte deve ainda trabalho. 

$("#gridId").jqGrid({
     ...,
     afterInsertRow : setCellTitle,
     ...
});



function setCellTitle(rowid){
  //get fourth cell in row
  var $cell = $(rowid).children(':eq(3)');
  //set title attribute
  $cell.attr('title', $cell.text());

}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top