문제
나는 훌륭한 jqGrid 플러그인으로 작업해 왔고 훌륭하게 작동합니다.하지만 최근에는 그리드에 대한 몇 가지 사용자 정의 도구 설명을 구현해 달라는 요청을 받았습니다.이제, 선적 서류 비치 매우 철저하지만 이를 달성하는 방법(가능한 경우)에 대해서는 다루지 않습니다.
내가 찾고 있는 것의 예는 다음과 같습니다.
| col a | col b | ...
| 데이터 | 데이터 | ...
| (마우스 호버) - 데이터 x
툴팁을 정의하는 방법/위치에 대한 문서와 소스를 검색했지만 가장 가까운 것은 편집 모드의 버튼에 대한 사용자 정의 툴팁입니다.afterInsertRow 이벤트에 대한 이벤트 핸들러가 있습니다. 이를 통해 rowId 등을 얻을 수 있지만 해당 이벤트에서 HTML 속성을 정의하는 방법을 잘 모르겠습니다.
편집하다:명확히 하기 위해 개별 셀의 제목 속성을 특정 데이터 조각(jqgrid 모델에 이미 가지고 있음)으로 설정하고 싶습니다.
편집 2:나는 기쁨없이 afterInsertRow 이벤트에 다음을 삽입하려고 시도했습니다. 여기서 aData는 JSON 모델이고 ExpirationDate는 모델 이름입니다.
afterInsertRow: function(rowid, aData) {
grid.setCell(rowid, 'ExpirationDate', '', { title: aData.ExpiredBy });
그러나 동일한 이벤트 핸들러의 다음 코드는 작동합니다.
grid.setCell(rowid, 'ExpirationDate', '', { color: 'red' });
편집 3:redsquare의 훌륭한 제안을 참고하여 제목 속성이 언젠가 설정될 것이라고 판단했습니다. ~ 후에 afterInsertRow 이벤트:단계별로 살펴보고 주석에 설명된 두 가지 방법 중 하나로 올바르게 설정되었음을 확인했지만, 불행히도 더 나아가려고 할 때 이 위치에 대한 소스 코드를 사용할 수 없다는 메시지가 표시됩니다. 즉, 제목이 정확히 어디에 있는지 볼 수 없습니다. 변경되고 있습니다.
편집 4:(인내심을 갖고 이 문제를 해결할 수 있도록 도와주셔서 감사합니다!) 다시 loadComplete 이벤트 시도에 대한 redsquare의 의견을 받아들여 셀 속성을 성공적으로 가져오고 수정할 수 있었지만 제목 속성은 여전히 동일하게 유지됩니다.
loadComplete: function() {
var ids = grid.getDataIDs();
for (var i = 0; i < ids.length; i++) {
grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
}
최종 편집:아래 답변을 참조하세요. Redsquare의 도움을 받아 문제의 근본 원인을 찾을 수 있었습니다.
어떤 도움이라도 주시면 감사하겠습니다.
해결책
좋아, 나는 설정중인 속성을 면밀히 검사 한 후 문제를 발견했다. 내가 knuckle-head, 내가 grid.setcell (...) 메소드에 대한 문서를 읽지 않았다는 것이 밝혀졌습니다.
이 방법은 특정 셀의 내용을 변경할 수 있으며 클래스 또는 스타일 속성을 설정할 수 있습니다. 여기서 : • Rowid : 행의 ID,
• colname : 열의 이름 (이 매개 변수는 0부터 시작될 수 있습니다)
• 데이터 : 셀에 넣을 수있는 내용. 빈 문자열이 있으면 내용이 변경되지 않습니다
• 클래스 : 클래스가 문자열 인 경우 AddClass를 사용하여 셀에 클래스를 추가합니다. 클래스가 배열 인 경우 CSS를 통해 새로운 CSS 속성을 설정합니다.
• 속성 : 셀의 속성을 설정합니다.
예시 :
setCell ( "10", "tax", ', {color :'red ','text-align ':'center '}', {제목 : '판매 세'})
세금 필드의 내용을 10 행으로 설정하고 중심으로 설정하고 제목을 '판매 세'로 변경합니다.
요컨대, 내가이 방법으로 전달한 인수는 속성 (5 번째 Arg) 대신 CSS 속성 (4 번째 Arg)을 설정하는 것이 었습니다. 그 결과 두 개의 제목 속성이 추가되었으며 하나는 부적절하게 형식화되었습니다. 아래는 내가하려는 일을 달성하기위한 방법의 올바른 호출을 보여줍니다.
grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});
이것을 해결하는 데 도움을 주신 Redsquare에게 다시 한번 감사드립니다!
다른 팁
툴팁이 어떤 정보를 표시할까요? 툴팁 정보가 행의 첫 번째 셀 (숨겨진) 내부에 있다고 가정하자. 그리드 내부의 행을 대상으로하고 .live 메소드를 사용하여 새 행을 덮을 수 있습니다.
$('#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
}
알았어, 명확하게 말하면 이것을 시도해 볼 수 있습니다.변경하려는 셀이 각 행의 네 번째 셀이라고 가정하고 셀 제목을 해당 셀의 현재 텍스트로 설정합니다.필요에 따라 변경하세요.
주의: 그리드는 실제로 행에 정수 ID를 사용하여 표준을 위반합니다.그러나 다음은 여전히 작동합니다.
$("#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());
}