[JQUERY] 부모 - 자식 관계에 대한 JQuery와 그리드 아 격자

부모 - 자식 관계에 대한 JQuery와 그리드 아 격자

해결법

1. ---

   1.나는 당신이 어떤 당신이 할 수있는 쉬운 접근 나중에 객체 actionSet에서 정보를 저장하는 것이 좋습니다. 예를 들어, 당신은 userData에 매개 변수를 사용하고 beforeProcessing의 JSON 데이터 내부의 유저 데이터 부분을 채울 수 있습니다. 는 대답하거나 다른 하나를 따르 아 격자 생성합니다.

   나는 당신이 어떤 당신이 할 수있는 쉬운 접근 나중에 객체 actionSet에서 정보를 저장하는 것이 좋습니다. 예를 들어, 당신은 userData에 매개 변수를 사용하고 beforeProcessing의 JSON 데이터 내부의 유저 데이터 부분을 채울 수 있습니다. 는 대답하거나 다른 하나를 따르 아 격자 생성합니다.

   데모는 구현 방식을 보여줍니다

   그것은 다음과 같은 코드를 사용

   var mainGridPrefix = "s_";
   
   $("#grid").jqGrid({
       url: "Adofo.json",
       datatype: "json",
       colNames: ["First Name", "Last Name"],
       colModel: [
           { name: "givenName" },
           { name: "familyName" }
       ],
       cmTemplate: {width: 100, editable: true, editrules: {required: true},
           editoptions: {size: 10}},
       rowNum: 20,
       rowList: [20, 40, 60],
       pager: "#pager",
       gridview: true,
       caption: "Contacts",
       rownumbers: true,
       autoencode: true,
       height: "100%",
       idPrefix: mainGridPrefix,
       subGrid: true,
       jsonReader: { repeatitems: false },
       beforeProcessing: function (data) {
           var rows = data.rows, l = rows.length, i, item, subgrids = {};
           for (i = 0; i < l; i++) {
               item = rows[i];
               if (item.actionSet) {
                   subgrids[item.id] = item.actionSet;
               }
           }
           data.userdata = subgrids;
       },
       subGridRowExpanded: function (subgridDivId, rowId) {
           var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
               pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
               subgrids = $(this).jqGrid("getGridParam", "userData");
   
           $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
           $subgrid.jqGrid({
               datatype: "local",
               data: subgrids[pureRowId],
               colNames: ["Due Date", "Note"],
               colModel: [
                   { name: "actionDueDate", formatter: "date", sorttype: "date" },
                   { name: "actionNote" }
               ],
               sortname: "actionDueDate",
               height: "100%",
               rowNum: 10000,
               autoencode: true,
               autowidth: true,
               jsonReader: { repeatitems: false, id: "actionID" },
               gridview: true,
               idPrefix: rowId + "_"
           });
       }
   });
   

   업데이트 : 데모 하나에 사용 된 JSON 데이터는 아래를 참조 할 수 있습니다. 나는있는 jqGrid에 필요한 ID 속성을 추가했다. 나는 subgrids의 ID로의 actionId을 사용 :

   {
       "total": "10",
       "page": "1",
       "records": "78",
       "rows": [
           {
               "id": 10,
               "comment": null,
               "givenName": "Contact A",
               "familyName": "A",
               "actionSet": [
                   {
                       "actionID": 1,
                       "actionDueDate": "2012-12-08",
                       "actionNote": "Action 1"
                   },
                   {
                       "actionID": 2,
                       "actionDueDate": "2012-12-09",
                       "actionNote": "Action 2"
                   }
               ]
           },
           {
               "id": 20,
               "comment": null,
               "givenName": "Contact B",
               "familyName": "B",
               "actionSet": [
                   {
                       "actionID": 3,
                       "actionDueDate": "2012-12-11",
                       "actionNote": "Action 3"
                   },
                   {
                       "actionID": 4,
                       "actionDueDate": "2012-12-10",
                       "actionNote": "Action 4"
                   }
               ]
           }
       ]
   }
   

from https://stackoverflow.com/questions/14194754/jquery-grid-subgrid-for-parent-child-relation by cc-by-sa and MIT license