2012-10-29 3 views
2

JQGrid에서 드롭 다운을 동적으로 추가하고 싶습니다. 예를 들어동적으로 JQgrid의 드롭 다운을 추가하십시오.

는 : -

나는 그리드의 유형 아래에 있습니다. 내가 버튼을 클릭하면

enter image description here

이제 새로운 행이 그리드에 추가해야합니다. 그리고 새 행의 첫 번째 열 데이터는 두 번째 하이퍼 링크, 세 번째 드롭 다운 및 네 번째 확인란입니다.

즉 첫 번째 행과 같아야합니다.

그리고 모든 버튼을 클릭 할 때마다 새 행이 첫 번째 행과 유사하게 추가되어야합니다.

답변

5

formatter = 'select'및 type = 'select'속성의 경우 jQgrid는 키 - 값 쌍의 목록을 내부적으로 유지 관리합니다.

새 행을 삽입하는 동안 드롭 다운 상자의 값으로 "ID"를 입력해야합니다. 예

:

새로운 행을 삽입은 : 여기

$("#listData").jqGrid('addRowData',index,{kpiParameter:1,product:'XYZ',metric:'1',perkSharing:'XYZ'}); 

, '1'KpiParameter의 ID이다. 이 솔루션을 사용하려면 jQgrid를 정의하는 동안 드롭 다운의 키 - 값 쌍 전체 목록을로드해야합니다.

아래로있는 jqGrid를 작성할 수 있습니다

jQuery('#kpisetup').jqGrid({ 
      autowidth: true, 
      autoheight: true, 
      url : '', 
      mtype : 'POST', 
      colNames : [ 'KPI ID','KPI Parameter', 'Product','Metric','Perk Sharing'], 
      colModel : [ {name : 'kpi_id',index : 'kpi_id',autowidth: true,hidden:true,align:'center'}, 
         {name : 'kpi_parameter',index : 'kpi_parameter',width:200, 
               sortable:true, 
               align:'center', 
               editable:true, 
               cellEdit:true, 
               edittype: 'select', 
               formatter: 'select', 
               editrules: { required: true}, 
               editoptions:{value: getKPIParameters()//LOAD ALL THE KPI PARAMETER KEY-VALUE PAIR} 
         }, 
         {name : 'product',index : 'product',autowidth: true,formatter:'showlink',formatoptions:{baseLinkUrl:'#'},align:'center'}, 
         {name : 'metric',index : 'metric',width:75, 
               editable:true, 
               edittype: "select", 
               align:'center', 
               formatter: 'select', 
               editrules: { required: true}, 
               editoptions: {value: '1:select' //LOAD ALL THE METRIC VALUEs} 
         }, 
         {name : 'perksharing',align:'left',index : 'perksharing',autowidth: true,editable:true,edittype: "checkbox",align:'center'} 
         ], 
      rowNum : 10, 
      sortname : 'kpi_parameter', 
      viewrecords : true, 
      gridview:true, 
      pager : '#kpisetup_pager', 
      sortorder : 'desc', 
      caption : 'KPI Setup', 
      datatype : 'json' 
     }); 

희망이 당신을 위해 작동합니다.

감사합니다. 군.

+0

: - 언급 한대로 시도했지만 대신 드롭 다운이 필요한 곳에 하드 코드 값이옵니다. – Ankit

+1

예 ankit, 드롭 다운보기의 경우 행을 만든 후에 행을 '편집 가능'으로 만들어야합니다. 이 신택스를 사용할 수 있습니다 : "grid.editRow (RowId, true);" –

관련 문제