jqgrid에서 json 중첩 배열에 대한 하위 행을 만드는 방법

다음과 같이 로컬 json 문자열이 있습니다.

var jsonObj = {
        "page": "1",
        "records": "2",
        "rows": [
{"id":"1","firstName":"ABC","lastName":"XYZ","city":"blr","state":"Karnataka","arr":[
{"arr1":"value1","arr2":"value2"},{"arr1":"value3","arr2":"value4"}]},
        {"id":"2","firstName":"DEF","lastName":"PQR","city":"Mumbai","state":"Maharashtra","arr":[{"arr1":"result1","arr2":"result2"},{"arr1":"result3","arr2":"result4"}]}]};

jqgridi를 사용하면 id1과 id2가있는 두 행에 위의 json 문자열을 표시하고 싶지만 중첩 배열 (즉, 위 문자열의 arr)의 경우 부모 행의 하위 행으로 표시하고 싶지만 하위 그리드로는 표시하지 않습니다.

하위 행의 다른 열은 두 개의 열 즉 arr1 및 arr2를 제외하고 중복 데이터를 상위 행으로 포함해야합니다. 로드시 하위 행이 표시되지 않아야합니다. 클릭시 하위 행이 확장되는 플러스 / 트레이닝 아이콘이 있어야합니다.

이것은 내가 표시하는 데 사용한 코드 jqgrid입니다.

 $("#list").jqGrid({
                datastr : jsonObj,
                datatype : "jsonstring",
                colNames : [ 'Id', 'FirstName', 'LastName', 'City', 'State', 'Array1', 'Array2' ],
                colModel : [ {
                        name : 'id',
                        index : 'id',
                        width : 100,
                        key : true
                }, {
                        name : 'firstName',
                        index : 'firstName',
                        width : 150

                }, {
                        name : 'lastName',
                        index : 'lastName',
                        width : 150

                }, {
                        name : 'city',
                        index : 'city',
                        width : 100

                }, {
                        name : 'state',
                        index : 'state',
                        width : 100

                }, {
                        name : 'arr1',
                        index : 'arr1',
                        width : 100,
                        jsonmap : "arr.0.arr1"
                }, {

                        name : 'arr2',
                        index : 'arr2',
                        width : 100,
                        jsonmap : "arr.0.arr2"
                } ],
                pager : '#pager',
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                sortname : 'id',
                sortorder : 'desc',
                viewrecords : true,
                gridview : true,
                caption : 'JSON Array',
                jsonReader : {
                        repeatitems : false, root: "rows"
                }
        });