사용자 정의 셀 구현 jqGrid : raty-plugin 통합

Question

저는 간단한 작업에서 첫눈에 며칠 - 이미 사용자 정의 셀을 구현하고 있습니다. 작업은 다음과 같습니다. id가있는 div 요소 (예 : "mydiv")를 사용하여 사용자 정의 셀을 만들고이 div의 함수를 $('#mydiv').raty({start: cellvaue, readonly:true})과 같이 호출 한 다음 3 번째 하위 작업 - 편집 모드 (editGridRow)에서 변경해야합니다. 값을 변경하는 것이 가능한 것처럼 raty 기능의 매개 변수를 readonly:false으로 변경하십시오.

먼저 포맷터를 사용했습니다. 포맷터에서 나는 div 함수를 정의하고, afterInsertRow 함수를 $ ('# mydiv') 함수로 호출하여 정의했다. 개요를 위해 그것은 완벽하게 작동했습니다. 그러나, editGridRow의 모달 편집 대화 상자에서 양식 입력 텍스트가 항상 렌더링되었으므로 여기서는 필요하지 않습니다. 아직 여기에 div 요소 만 필요합니다. 포맷터가 올바르게 이해한다면 포맷터는 값을 수정 만하지만 양식 입력 텍스트를 렌더링합니다.

그런 다음 edittype: custom으로 전환되었지만 이러한 기능이 처음으로 editGridRow에서만 호출되기 때문에 도움이되지 않습니다.

이 문제는 해결할 수 있다고 확신합니다. 유일한 문제는 방법입니다.

모든 정보 주셔서 감사합니다.

업데이트 올레그 덕분에 지금은이 작업의 기능 구현에 매우 가깝습니다. 여기서 나는 Oleg의 충고에 기초하거나 적어도 그의 조언을 해석 할 때 나의 해결책을 설명 할 것이다. jqGrid는 datatype: "json"으로 정의됩니다. 다음과 같이

name:'ranking', editable:true, edittype:'custom',formatter:ratingFormatter, 
editoptions:{custom_element:ratingFormatter, custom_value:ratingValue} 

언급 된 기능이 정의되어 있습니다 : 은 사용자 정의 셀로 정의

function ratingFormatter(cellvalue, options, rowObject) {return '<div class="rnk"></div>';}; 

function ratingValue(elem, operation, value) {return $('#ranking-score').val();}; 

그런 다음 모달 편집 대화 :

ondblClickRow: function(id) { 
jQuery('#grid').jqGrid('editGridRow',id, 
{closeOnEscape:true,width:400, 
savekey:[true,13], 
recreateForm:true,beforeShowForm:initRating 
}); 

initRating 기능 :

function initRating() {$('#ranking').raty({path:'/img/'})}; 

그리고 마지막으로 loadComplete 이벤트

loadComplete: function (data) { 
var ids = jQuery("#grid").getDataIDs(); 
for(var i=0;i<ids.length;i++){ 
var rowid = ids[i]; 
var ranking = data.rows[i].cell[6]; 
$('#' + rowid +'> td > div.rnk').raty({path:'/img/',start:ranking,readOnly:true}); 
$('#' + rowid).contextMenu('MenuJqGrid', eventsMenu); 
} 
} 

등급 플러그인과 같은 작은 단계를위한 많은 단계. 믿을 수 없는. 마지막으로 해결되지 않은 문제는 현재 등급 점수를 initRating 함수로 가져 오는 것입니다. 즉, 내가 editGridRow에 가서 등급 점수를 이미 정의하지 않았다는 의미입니다. 흠.

Answer 1

약 edittype:custom 옵션에 대해서는 this과이 오래된 대답을 읽는 것이 좋습니다. 사용자 지정 편집 기능 custom_element 및 custom_value을 ony가 아닌 한 번 호출하도록 설정하려면 recreateForm:true 설정을 사용하는 것이 중요합니다.

질문에 코드를 포함시키지 마십시오. 문제에 대한 설명을 통해 설명 한 내용을 다른 방식으로 구현할 수 있습니다. 예를 들어, raty-function의 매개 변수를 readonly:false으로 어떻게 변경하는지는 분명하지 않습니다. beforeShowForm 이벤트 (예 : this 참조)를 사용하거나 editoptions의 dataInit 속성을 사용합니다. 두 경우 모두 올바른 구현의 경우 모두 작동해야합니다.

나를 위해 무언가가 한 가지 더 있습니다. 셀에 id="mydiv"을 포함해야하는 이유는 무엇입니까? 구현시 동일한 이름의 여러 ID를 삽입 할 수 있습니까? 그것은 버그가 될 것입니다. 포함 된 셀 또는 행에 포함 된 셀을 찾을 수 있다면 loadComplete 이벤트 핸들러 안에 .raty({start: cellvaue, readonly:true})을 호출 할 수 있으며 추가 id 속성을 <td> 요소에 삽입 할 필요가 없습니다. afterInsertRow을 사용하면 그리드가 더 느려집니다. 모든 행이 그리드에 삽입 된 후에뿐만 아니라 모든 행을 추가 할 때 그리드를 렌더링해야하기 때문입니다 (gridview:true 옵션 참조).

업데이트 : 의견을 쓰는 데 시간을 소비하고 코드를 게시 한 후 코드를 수정하여 raty-plugin을 통합 할 수있는 방법을 보여주었습니다. 그 결과로 내가 대신 form editing 때문 만이 양식을 편집하지 완벽하게 지원 지역 편집 inline editing을 사용하지만, 내가 어떤 서버 구성 요소없이 데모를 만들고 싶었다
처럼 보인다 the demo입니다.

코드 에서처럼 행 편집에 두 번 클릭했습니다. 여기에 주요 코드 조각입니다 :

var lastSel; 
var grid = $("#list"); 
var initRaty = function(rowid) { 
    var ranking = grid.getCell(rowid,4); // the Ranking column has the index 4 
    // because we use rownumbers:true the index of the Ranking column will be 1 higher 
    $('#' + rowid +'> td:nth-child(5) > div').raty({ 
     path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/', 
     start:ranking, 
     readOnly:true 
    }); 
}; 
grid.jqGrid({ 
    // ... 
    colModel: [ 
     // other column definition 
     { name:'Ranking', editable:true, width: 100, title: false, 
      formatter: function(cellvalue, options, rowObject) { 
       // insert div needed for the raty plugin 
       // and insert a hidden span with the rating value 
       return '<div></div><span style="display: none;">'+cellvalue+'</span>'; 
      }, unformat: function (cellvalue, options, cellobject) { 
       // get rating value from the hidden span 
       return cellobject.find("span").text(); 
      }, edittype:'custom', editoptions: { 
       custom_element: function(value, options) { 
        var val = $(value); 
        var elem = $('<div id="'+options.id+'"/>'); 
        setTimeout(function(){ 
         elem.raty({ 
          path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/', 
          start:(val.length>1? val[1].innerText: value) 
         }); 
        }, 100); 
        return elem[0]; 
       }, 
       custom_value: function(elem) { 
        return elem.find("input").val(); 
       } 
      } 
     } 
    ], 
    editurl: 'clientArray', 
    loadComplete: function (data) { 
     var ids = grid.getDataIDs(); 
     for(var i=0;i<ids.length;i++){ 
      initRaty(ids[i]); 
     } 
    }, 
    ondblClickRow: function(id, ri, ci) { 
     grid.jqGrid('editRow',id,true,null,null, 'clientArray', {}, initRaty); 
    }, 
    onSelectRow: function(id) { 
     if (id && id !== lastSel) { 
      if (typeof lastSel !== "undefined") { 
       grid.jqGrid('restoreRow',lastSel); 
       var cell = $('#' + lastSel +'> td:nth-child(5)'); 
       var spans = cell.find('span'); 
       if (spans.length > 1) { 
        // if the lastSel row was not only selected, but also 
        // was in editing mode, get the hidden text with the ranking 
        var ranking = cell.find('span')[1].innerText; 
        cell.find('div').raty({ 
         path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/', 
         start:ranking, 
         readOnly:true 
        }); 
       } 
      } 
      lastSel = id; 
     } 
    }, 
    // other jqGrid parameters 
}); 

당신은 내가 똑같이 수정 된 값 initRaty을 (전화 afterSubmit을 recreateForm:true 옵션을 사용 afterComplete를 사용하거나해야합니다 형태로 편집을 사용하는 대신 editRow의 editGridRow 함수를 호출하는 경우 코드 예에서 의 aftersavefunc 매개 변수를 사용하십시오.