jqGrid 3.4의 사용자 정의 데이터 도구 설명

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

  •  05-07-2019
  •  | 
  •  

문제

나는 훌륭한 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());

}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top