클릭 후 격자에서 이미지 변경

바구니의 내 행에 이미지가 있고 클릭 한 후에 이미지를 변경하고 싶습니다.클릭 후 격자에서 이미지 변경

여러 가지 방법으로 변경하려고했지만 이미지는 그대로 유지됩니다.

가

{name:'Basket', index:'Basket', width:7, formatter: basketFormatter, align: 'center', sortable:false, search:false}

포맷터 : 함수

function add2Basket(image, rowId){ 

    $(image).attr('src', '/img/basket_on.gif'); 
    $("#list").setCell(rowId, 'Basket', '<img src="basket_on.gif" />');

그러나 상기 라인 없음

function basketFormatter(cellvalue, options, rowObject){ 

    var rowId = options.rowId; 

    var basket = '<img src="/img/basket_off.gif" border="0" onClick="add2Basket(this,' + "'" + rowId + "'" + ')"/></a>'; 

    return basket; 
}

부분적 이미지 변경

이

그리드의 정의이며 .

추가 </a>없이 올바른 포맷터 HTML 조각을 생성하는 사용자 정의 포맷터를 해결해야 할 모든

출처

2013-04-15 PhDJ

귀하는 : ''으로 img는 자동으로 닫는 태그이므로 끝에 '/'를 추가 할 필요가 없습니다. 안녕하세요, 닫기 링크 태그는 무엇입니까? 어쩌면 당신의 문제는 아니지만 글을 써야합니다 : '' –

은 복사/붙여 넣기의 남은 부분입니다.주의 해 주셔서 감사합니다. – PhDJ

첫째 :

<img src="..." />

다음, 당신은 글로벌 정의 함수 add2Basket로 사용 onClick 필요하지 않습니다. 대신 onCellSelect 콜백을 사용하여 요소를 그리드 본문 안쪽을 클릭하여 호출 할 수 있습니다. iCol 또는 e.target.nodeName을 사용하여 필요한 이벤트 만 필터링 할 수 있습니다. src 속성을 설정하면 이미지를 변경할 수 있습니다.

enter image description here

The demo

는 플래그 작은 격자를 보여 주지만 국기를 클릭하여 다른 나라의 플래그를 변경할 수 있습니다. 다음 코드를 사용했습니다.

onCellSelect: function (rowid, iCol, cellContent, e) { 
    if (e.target.nodeName.toLowerCase() === "img") { 
     $(e.target).attr("src", swapList[$(e.target).attr("src")]); 
    } 
}

여기서 swapList에 정의 된 플래그는 다음에 있어야합니다.

출처

2013-04-15 15:14:22 Oleg

감사합니다 올레그,이 제대로 onCellSelect 변경할 셀의, 이제 뭔가 다른 셀에 afterSaveCell 함수를 사용하여 있지만 내가이 코드를 시도 할 때 입력 한 동일한 셀을 변경하려면 원하는 : $ ("#list"). setCell (rowId, 6, ''); , 이미지가 바뀌지 않습니다. columnnumber를 바꾼다면 제대로 작동합니다. 이렇게 결합하면 솔루션도 손상됩니다! – PhDJ

@PhDJ : 환영합니다! 올바른'rowId'와 정확한 컬럼 인덱스 (6)를 사용 하시겠습니까? 정말로 셀 편집 모드를 사용합니까? 편집 모드에서만 콜백 [afterSaveCell] (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing#events)이 호출됩니다. 나는 너의 새로운 문제를 더 자세하게 묘사해야한다고 생각한다. 사용하는 JavaScript 코드를 포함해야합니다. – Oleg

afterSaveCell이 호출되었을 때 포맷터가 호출 되었기 때문에 내가 한 모든 변경 사항을 실행 취소 한 것처럼 보였습니다. 포맷터의 코드를 변경하여 이미지를 변경하면 이제는 모두 올바르게 작동합니다. – PhDJ

클릭 후 격자에서 이미지 변경

답변

관련 문제