jqGrid 적용...도와 주세요!!!!

질문Q #2753

든이제2014-06-20 08:29:28

현재 codeigniter를 사용하여...jqGrid를 적용 시키려 하는데...
정말 쉽지 않네요...
일단 테스트를 위하여....몇가지 데이터만 가지고 실행 하고 있는데...
model에서 데이터를 가지고 와서...
뿌려 주는 과정에서...

foreach($a as $row) {
           $responce->rows[$i]['id'] = $row['No'];
           $responce->rows[$i]['cell'] = array
           (
               $row['No'],
               $row['Itemcode'],
               $row['Itemname']
               // $row['FrgnName'],
               // $row['U_SWW'],
               // $row['In Stock(BOX)'],
               // $row['Sales Commited Qty(BOX)'],
               // $row['Incomming Qty(BOX)']
           );
           $i++;
       }
       echo json_encode($responce);
이부분을 실행 하면 echo로 인하여 첨부파일처럼....화면에는 뿌려 지는데...테이블 안으로 데이터가 들어 오질 안네요...
고수님들...아시는 분은 제발 답변 부탁 드립니다....
<---jquery 부분-->
$(document).ready(function() {
$("#list").jqGrid({
       url: 'http://192.168.10.17:9999/application/libraries/jq_grid.php', //another controller function for generating data
       mtype : "POST", //Ajax request type. It also could be GET
       datatype: "json", //supported formats XML, JSON or Arrray
       colNames:["No","Product Code","Product Name"],
       colModel:
       [
       {name:"No",index:"No", width:50, align:"left"},
       {name:"Itemcode",index:"Itemcode", width:150, align:"left"},
       {name:"Itemname",index:"Itemname", width:150, align:"left"}
       ],
       rowNum:10,
       width: 1200,
       height: 250,
       rowList:[10,20,30],
       pager: "#pager",
       sortname: "id",
       viewrecords: true,
       //rownumbers: true,
       //gridview: true,
       caption:"Product List"
});
});

답변32

#1 변종원(웅파) 2014-06-20 14:12:10

데이터가 정상적으로 넘어오는지,
넘어왔는데 jqgrid에서 못 뿌리는 건지 등등 확인 필요합니다.

게시물 이동합니다.

#2 든이제 2014-06-21 00:09:09

아래와 같이 값은 화면에 찍힙니다.
그런데...테이블 안으로 값이 들어 가야 하는데...그게 안돼네요...

{"rows":[{"id":"1","cell":["1","KD0110103","\uad6d\uac04\uc7a5 (930ml) New"]},{"id":"2","cell":["2","KD0110101","\uad6d\uac04\uc7a5 (15L)"]},{"id":"3","cell":["3","KD0110306","\uc9c4\uac04\uc7a5 \uae08S (930ml) New"]},{"id":"4","cell":["4","KD0110307","\uc9c4\uac04\uc7a5 \uae08S (1.8L) New"]},{"id":"5","cell":["5","KD0110301","\uc9c4\uac04\uc7a5 \uae08S (5L)"]},{"id":"6","cell":["6","KD0110302","\uc9c4\uac04\uc7a5 \uae08S (15L)"]},{"id":"7","cell":["7","KD0110205","\uc9c4\uac04\uc7a5 S (930ml) New"]},{"id":"8","cell":["8","KD0110206","\uc9c4\uac04\uc7a5 S (1.8L) New"]},{"id":"9","cell":["9","KD0110201","\uc9c4\uac04\uc7a5 S (5L)"]},{"id":"10","cell":["10","KD0110204","\uc9c4\uac04\uc7a5 S (15L)"]},{"id":"11","cell":["11","KD0110401","\uc9c4\uac04\uc7a5 \uae08 F3 (500ml)"]},{"id":"12","cell":["12","KD0110406","\uc9c4\uac04\uc7a5 \uae08 F3 (15L)"]},{"id":"13","cell":["13","KD0110407","\uc9c4\uac04\uc7a5 \uae08 F3 (1.8L) New"]},{"id":"14","cell":["14","KD0110405","\uc9c4\uac04\uc7a5 \uae08 F3 (930ml) New"]},{"id":"15","cell":["15","KD0110402","\uc9c4\uac04\uc7a5 \uae08 F3 (5L)"]},{"id":"16","cell":["16","KD0110501","\uc870\ub9bc\uac04\uc7a5 (1.8L)"]},{"id":"17","cell":["17","KD0110503","\uc870\ub9bc \uac04\uc7a5 (930ml) New"]},{"id":"18","cell":["18","KD0110504","\uc870\ub9bc\uac04\uc7a5 (1.8L) New"]}]}

#3 든이제 2014-06-21 01:06:21

jquery alert로 확인 해보니 값은 가지고 오는것 같습니다...그런데 테이블에 뿌려 지지를 않네요...휴....
웅파님 제발 도와주세요~ㅜ.ㅜ

#4 letsgolee 2014-06-21 20:20:50

jqgrid를 써본 적이 없고 또 소스 역시 다 주어진 것이 아니기 때문에 명확한 답이라 말하기는 어렵지만
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid 여기를 참조하여 추론해볼 때,
다음이 있어야 하지 않을까 싶네요.

php소스에서 다음 값이 주어져야 합니다.

page: the number of the requested page
total: the total pages of the query
records: the total records from the query

위의 예제로 보면 $responce->page와 $responce->total 그리고 $responce->records 이렇게 전달이 되지 않았다고 여깁니다.

#5 든이제 2014-06-21 23:46:52

letsgolee님이 말씀 하신것은 page를 할때 필요 한 부분이고 일단 json_encode로 넘어 오면 그것을 받아 뿌려 줘야 하는데...echo로 때문에 화면에는 뿌려지나....jqgrid 테이블에는 뿌려 지지 않는 부분이 안됩니다...위에서 말씀하신데로 page까지 제대로 코딩이 되야 테이블에 뿌려 진다는 말씀이신가요????

#6 letsgolee 2014-06-22 00:33:29

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqGrid Grouping Example</title>
<! -- Install jQuery -->
<script language="javascript" language ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<! -- Install jQueryUI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<! -- Install jqGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<!--<script src="lib/js/grid.grouping.js" type="text/javascript"></script>-->
<script>
// Create some data
var mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
$(function() {
// and create the list
$("#list").jqGrid({
data: mydata,
datatype: "local",
height: 'auto',
rowNum: 30,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100, editable:true},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: "#pager",
viewrecords: true,
sortname: 'name',
grouping:true,
groupingView : {
groupField : ['name']
},
caption: "Grouping Array Data"
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

#7 든이제 2014-06-22 03:52:38

letsgolee님...위와 같이 하면 됩니다...그런데 db에서 가지고 와서 뿌리는 과정에서 되지 않네요...휴...

#8 letsgolee 2014-06-22 07:19:54

어쩌면 서버에서 데이터 가져오는 것은 문제가 없지만 화면상에 뿌려주는 즉 jqGrid가 제대로 작동하지 않아서일 수 있습니다. 따라서 위의 제가 쓴 예제의

<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>

를 가지고 테스트해보세요. github에서 받은 소스는 jquery.jqGrid.js 파일이 매우 작습니다. 내부적으로 js폴더 안에 있는 파일을 불러들이는데 그 경로가 제대로 맞지 않으면 불러와지지 않을 수 있습니다. 그런데 예제의 jquery.jqGrid.js는 통합된 것이기 때문에 따로 js파일을 내부적으로 불러들일 필요가 없습니다.

#9 한대승(불의회상) 2014-06-23 12:28:29

든이제// json data 포맷에 문제가 있어 보이는군요.

#10 든이제 2014-06-23 12:50:03

포멧에 문제가 있다는건 무슨 뜻인가요? 그러면 어떻게 수정을 해야 할까요? 부탁드립니다..가르쳐 주세요!!! ^^;;

#11 darkninja 2014-06-23 13:04:25

http://jsonlint.com/

json data 포맷을 검증해 보세요!

따옴표 문제인가요?

#12 letsgolee 2014-06-23 14:38:12

테스트하니 잘 됩니다. 다음만 주의하세요...

json_data.php:

<?php

echo '{"page": 1, "total": 2, "records":18, "rows":[{"id":"1","cell":["1","KD0110103","\uad6d\uac04\uc7a5 (930ml) New"]},{"id":"2","cell":["2","KD0110101","\uad6d\uac04\uc7a5 (15L)"]},{"id":"3","cell":["3","KD0110306","\uc9c4\uac04\uc7a5 \uae08S (930ml) New"]},{"id":"4","cell":["4","KD0110307","\uc9c4\uac04\uc7a5 \uae08S (1.8L) New"]},{"id":"5","cell":["5","KD0110301","\uc9c4\uac04\uc7a5 \uae08S (5L)"]},{"id":"6","cell":["6","KD0110302","\uc9c4\uac04\uc7a5 \uae08S (15L)"]},{"id":"7","cell":["7","KD0110205","\uc9c4\uac04\uc7a5 S (930ml) New"]},{"id":"8","cell":["8","KD0110206","\uc9c4\uac04\uc7a5 S (1.8L) New"]},{"id":"9","cell":["9","KD0110201","\uc9c4\uac04\uc7a5 S (5L)"]},{"id":"10","cell":["10","KD0110204","\uc9c4\uac04\uc7a5 S (15L)"]},{"id":"11","cell":["11","KD0110401","\uc9c4\uac04\uc7a5 \uae08 F3 (500ml)"]},{"id":"12","cell":["12","KD0110406","\uc9c4\uac04\uc7a5 \uae08 F3 (15L)"]},{"id":"13","cell":["13","KD0110407","\uc9c4\uac04\uc7a5 \uae08 F3 (1.8L) New"]},{"id":"14","cell":["14","KD0110405","\uc9c4\uac04\uc7a5 \uae08 F3 (930ml) New"]},{"id":"15","cell":["15","KD0110402","\uc9c4\uac04\uc7a5 \uae08 F3 (5L)"]},{"id":"16","cell":["16","KD0110501","\uc870\ub9bc\uac04\uc7a5 (1.8L)"]},{"id":"17","cell":["17","KD0110503","\uc870\ub9bc \uac04\uc7a5 (930ml) New"]},{"id":"18","cell":["18","KD0110504","\uc870\ub9bc\uac04\uc7a5 (1.8L) New"]}]}';

test.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqGrid Grouping Example</title>
<! -- Install jQuery -->
<script language="javascript" language ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<! -- Install jQueryUI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<! -- Install jqGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<!--<script src="lib/js/grid.grouping.js" type="text/javascript"></script>-->
<script>
// Create some data

// and create the list
$(document).ready(function() {
$("#list").jqGrid({
url: 'json_data.php',
datatype: "json",

//height: 'auto',
rowNum: 10,
rowList: [10,20,30],
colNames:["No","Product Code","Product Name"],
        colModel:
        [
          {name:"No",index:"No", width:50, align:"left"},
          {name:"Itemcode",index:"Itemcode", width:150, align:"left"},
          {name:"Itemname",index:"Itemname", width:150, align:"left"}
        ],
pager: "#pager",
viewrecords: true,
sortname: 'id',
//grouping:true,
//groupingView : {
//groupField : ['name']
//},
 caption:"Product List"
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

결국 total, page, records값을 제대로 주니 나오네요...

#13 든이제 2014-06-24 06:39:12

letsgolee님 도와 주셔서 너무 감사합니다....
그런데....혹시 CI에서 테스트 해보신 건지요?
지금 CI에서 테스트 중인데 CI에서는 안되네요....ㅜ.ㅜ

#14 든이제 2014-06-24 07:43:32

아래의 사진처럼 나옵니다...CI에 적용 했을땐....이상하죠??? 휴....어떻게 해야 할까요???

#15 letsgolee 2014-06-24 08:22:38

인건 CI와 상관없습니다. 또 데이터가 잘 넘어온 것을 확인했기 때문에 나머지는 html과 javascript에서 처리가 되어야 합니다.

#16 letsgolee 2014-06-24 08:22:38

인건 CI와 상관없습니다. 또 데이터가 잘 넘어온 것을 확인했기 때문에 나머지는 html과 javascript에서 처리가 되어야 합니다.

#17 letsgolee 2014-06-24 08:24:48

위에 답변이 두개가 되어 동시에 올라갔습니다. 가끔 답변이 두개가 되어 한꺼번에 올라가고 또 하나를 지우려해도 삭제할 수 있는 아이콘 자체가 나타나지 않네요.

#18 든이제 2014-06-24 08:27:13

그럼 지금 자바 스크립트 쪽에서 문제가 발생 할수 있다는 건가요?? 아 정말 골치 아프네요....사진은 보셨는지요?

#19 한대승(불의회상) 2014-06-24 09:15:53

든이제// 캡쳐한 화면을 보니 목전에 다 왔네요.
화이팅 입니다. ^^

참고로 json 데이터는 json만 있어야 합니다.

#20 letsgolee 2014-06-24 11:03:50

그림을 보면 page 0 of 이렇게 되있죠? 그건 데이터가 제대로 jqgrid와 붙지 않았다는 겁니다. 따라서 jqgrid가 제대로 되는지부터 확인해 보세요. 예를 든다면 제가 예제로 한 것처럼 jgGrid옵션에서 data: mydata, 그리고 datatype: "local", 로 잡고 mydata값을 rows안에 있는 것만 넣어주세요. 이런 식으로요:

var mydata = [{"id":"1","cell":["1","KD0110103","\uad6d\uac04\uc7a5 (930ml) New"]},{"id":"2","cell":["2","KD0110101","\uad6d\uac04\uc7a5 (15L)"]},{"id":"3","cell":["3","KD0110306","\uc9c4\uac04\uc7a5 \uae08S (930ml) New"]},{"id":"4","cell":["4","KD0110307","\uc9c4\uac04\uc7a5 \uae08S (1.8L) New"]},{"id":"5","cell":["5","KD0110301","\uc9c4\uac04\uc7a5 \uae08S (5L)"]},{"id":"6","cell":["6","KD0110302","\uc9c4\uac04\uc7a5 \uae08S (15L)"]},{"id":"7","cell":["7","KD0110205","\uc9c4\uac04\uc7a5 S (930ml) New"]},{"id":"8","cell":["8","KD0110206","\uc9c4\uac04\uc7a5 S (1.8L) New"]},{"id":"9","cell":["9","KD0110201","\uc9c4\uac04\uc7a5 S (5L)"]},{"id":"10","cell":["10","KD0110204","\uc9c4\uac04\uc7a5 S (15L)"]},{"id":"11","cell":["11","KD0110401","\uc9c4\uac04\uc7a5 \uae08 F3 (500ml)"]},{"id":"12","cell":["12","KD0110406","\uc9c4\uac04\uc7a5 \uae08 F3 (15L)"]},{"id":"13","cell":["13","KD0110407","\uc9c4\uac04\uc7a5 \uae08 F3 (1.8L) New"]},{"id":"14","cell":["14","KD0110405","\uc9c4\uac04\uc7a5 \uae08 F3 (930ml) New"]},{"id":"15","cell":["15","KD0110402","\uc9c4\uac04\uc7a5 \uae08 F3 (5L)"]},{"id":"16","cell":["16","KD0110501","\uc870\ub9bc\uac04\uc7a5 (1.8L)"]},{"id":"17","cell":["17","KD0110503","\uc870\ub9bc \uac04\uc7a5 (930ml) New"]},{"id":"18","cell":["18","KD0110504","\uc870\ub9bc\uac04\uc7a5 (1.8L) New"]}];

그리고 테스트 해보면 jpgrid가 제대로 작동하는지 알 수 있을 겁니다.

#21 letsgolee 2014-06-24 11:18:21

다음의 코드는 작동이 되는 코드 입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqGrid Grouping Example</title>
<! -- Install jQuery -->
<script language="javascript" language ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<! -- Install jQueryUI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<! -- Install jqGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<!--<script src="lib/js/grid.grouping.js" type="text/javascript"></script>-->
<script>
// Create some data
var mydata = [
 {"id":"1","Itemcode":"KD0110103","Itemname":"\uad6d\uac04\uc7a5 (930ml) New"},
 {"id":"2","Itemcode":"KD0110101","Itemname":"\uad6d\uac04\uc7a5 (15L)"},
 {"id":"3","Itemcode":"KD0110306","Itemname":"\uc9c4\uac04\uc7a5 \uae08S (930ml) New"},
 {"id":"4","Itemcode":"KD0110307","Itemname":"\uc9c4\uac04\uc7a5 \uae08S (1.8L) New"},
 {"id":"5","Itemcode":"KD0110301","Itemname":"\uc9c4\uac04\uc7a5 \uae08S (5L)"},
 {"id":"6","Itemcode":"KD0110302","Itemname":"\uc9c4\uac04\uc7a5 \uae08S (15L)"},
 {"id":"7","Itemcode":"KD0110205","Itemname":"\uc9c4\uac04\uc7a5 S (930ml) New"},
 {"id":"8","Itemcode":"KD0110206","Itemname":"\uc9c4\uac04\uc7a5 S (1.8L) New"},
 {"id":"9","Itemcode":"KD0110201","Itemname":"\uc9c4\uac04\uc7a5 S (5L)"},
 {"id":"10","Itemcode":"KD0110204","Itemname":"\uc9c4\uac04\uc7a5 S (15L)"},
 {"id":"11","Itemcode":"KD0110401","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (500ml)"},
 {"id":"12","Itemcode":"KD0110406","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (15L)"},
 {"id":"13","Itemcode":"KD0110407","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (1.8L) New"},
 {"id":"14","Itemcode":"KD0110405","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (930ml) New"},
 {"id":"15","Itemcode":"KD0110402","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (5L)"},
 {"id":"16","Itemcode":"KD0110501","Itemname":"\uc870\ub9bc\uac04\uc7a5 (1.8L)"},
 {"id":"17","Itemcode":"KD0110503","Itemname":"\uc870\ub9bc \uac04\uc7a5 (930ml) New"},
 {"id":"18","Itemcode":"KD0110504","Itemname":"\uc870\ub9bc\uac04\uc7a5 (1.8L) New"}
];
$(document).ready(function() {
   $("#list").jqGrid({
       // url: 'http://192.168.10.17:9999/application/libraries/jq_grid.php',      //another controller function for generating data
     data: mydata,

        mtype : "POST",             //Ajax request type. It also could be GET
        datatype: "local",            //supported formats XML, JSON or Arrray
        colNames:["No","Product Code","Product Name"],
        colModel:
        [
          {name:"id", width:50, align:"left"},
          {name:"Itemcode", width:150, align:"left"},
          {name:"Itemname", width:150, align:"left"}
        ],
        rowNum:10,
        width: 1200,
        height: 250,
        rowList:[10,20,30],
        pager: "#pager",
        sortname: "id",
        viewrecords: true,
        //rownumbers: true,
        //gridview: true,
        caption:"Product List"
   });
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

이 코드에서 현재 "든이제"님의 jpGrid 경로를 맞추어서 실행을 해보세요. 만일 되지 않는다면 든이제 님의 jpGrid 경로 설정이나 내부적으로 문제가 있는 것이고 혹 된다면 작성한 코드를 잘 살펴보세요. 예를 든다면 든이제님이 예제로 쓴 코드 중에서 colModel에서 name:"No" 이렇게 적었는데 데이터 중 "No" 필드는 없습니다. "id"필드죠. 즉 코드 안에서도 잘못 작성하였다는 겁니다.

#22 든이제 2014-06-25 07:07:02

말씀하신데로 위의 코드로 하게 되면 작동을 하네요...그런걸로 미루어 볼때...jqgrid나 내부 문제는 아닌거 같고...CI controller 부분에서 jquery 경로로 불러 올때 문제가 있는거 같은데....아...정말 미치겠네요..혹시 제가 model부분 컨트롤러 부분 view부분을 보내드리면 답을 주실수 있는지요...
?????

#23 든이제 2014-06-25 07:31:27

---controller---
$responce->page = 1;
       $responce->total = 2;
       $responce->records = 18;
       $view_data['result'] = $this->model_inventory->jqGrid_data('west', '103');

       $i = 0;
       //print_r($view_data['result'][0]);
       foreach($view_data['result'] as $row) {
           $responce->rows[$i]['id'] = $row['No'];
           $responce->rows[$i]['cell'] = array
           (
               $row['No'],
               $row['Itemcode'],
               $row['Itemname']
           );
           $i++;
       }

       echo json_encode($responce);

---view---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqGrid Grouping Example</title>
<! -- Install jQuery -->
<script language="javascript" language ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<! -- Install jQueryUI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<! -- Install jqGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>

<script>
// Create some data
var mydata = [
{"id":"1","Itemcode":"KD0110103","Itemname":"\uad6d\uac04\uc7a5 (930ml) New"},
{"id":"2","Itemcode":"KD0110101","Itemname":"\uad6d\uac04\uc7a5 (15L)"},
{"id":"3","Itemcode":"KD0110306","Itemname":"\uc9c4\uac04\uc7a5 \uae08S (930ml) New"},
{"id":"4","Itemcode":"KD0110307","Itemname":"\uc9c4\uac04\uc7a5 \uae08S (1.8L) New"},
{"id":"5","Itemcode":"KD0110301","Itemname":"\uc9c4\uac04\uc7a5 \uae08S (5L)"},
{"id":"6","Itemcode":"KD0110302","Itemname":"\uc9c4\uac04\uc7a5 \uae08S (15L)"},
{"id":"7","Itemcode":"KD0110205","Itemname":"\uc9c4\uac04\uc7a5 S (930ml) New"},
{"id":"8","Itemcode":"KD0110206","Itemname":"\uc9c4\uac04\uc7a5 S (1.8L) New"},
{"id":"9","Itemcode":"KD0110201","Itemname":"\uc9c4\uac04\uc7a5 S (5L)"},
{"id":"10","Itemcode":"KD0110204","Itemname":"\uc9c4\uac04\uc7a5 S (15L)"},
{"id":"11","Itemcode":"KD0110401","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (500ml)"},
{"id":"12","Itemcode":"KD0110406","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (15L)"},
{"id":"13","Itemcode":"KD0110407","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (1.8L) New"},
{"id":"14","Itemcode":"KD0110405","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (930ml) New"},
{"id":"15","Itemcode":"KD0110402","Itemname":"\uc9c4\uac04\uc7a5 \uae08 F3 (5L)"},
{"id":"16","Itemcode":"KD0110501","Itemname":"\uc870\ub9bc\uac04\uc7a5 (1.8L)"},
{"id":"17","Itemcode":"KD0110503","Itemname":"\uc870\ub9bc \uac04\uc7a5 (930ml) New"},
{"id":"18","Itemcode":"KD0110504","Itemname":"\uc870\ub9bc\uac04\uc7a5 (1.8L) New"}
];
$(document).ready(function() {
$("#list").jqGrid({
url: 'http://192.168.10.17:9999/inventory/product-list', //another controller function for generating data
data: mydata,

mtype : "POST", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:["No","Product Code","Product Name"],
colModel:
[
{name:"id", width:50, align:"left"},
{name:"Itemcode", width:150, align:"left"},
{name:"Itemname", width:150, align:"left"}
],
rowNum:10,
width: 1200,
height: 250,
rowList:[10,20,30],
pager: "#pager",
sortname: "id",
viewrecords: true,
//rownumbers: true,
//gridview: true,
caption:"Product List"
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>

#24 든이제 2014-06-25 07:32:37

--화면에 찍히는 값--
{"page":1,"total":2,"records":18,"rows":[{"id":"1","cell":["1","KD0110103","\uad6d\uac04\uc7a5 (930ml) New"]},{"id":"2","cell":["2","KD0110101","\uad6d\uac04\uc7a5 (15L)"]},{"id":"3","cell":["3","KD0110306","\uc9c4\uac04\uc7a5 \uae08S (930ml) New"]},{"id":"4","cell":["4","KD0110307","\uc9c4\uac04\uc7a5 \uae08S (1.8L) New"]},{"id":"5","cell":["5","KD0110301","\uc9c4\uac04\uc7a5 \uae08S (5L)"]},{"id":"6","cell":["6","KD0110302","\uc9c4\uac04\uc7a5 \uae08S (15L)"]},{"id":"7","cell":["7","KD0110205","\uc9c4\uac04\uc7a5 S (930ml) New"]},{"id":"8","cell":["8","KD0110206","\uc9c4\uac04\uc7a5 S (1.8L) New"]},{"id":"9","cell":["9","KD0110201","\uc9c4\uac04\uc7a5 S (5L)"]},{"id":"10","cell":["10","KD0110204","\uc9c4\uac04\uc7a5 S (15L)"]},{"id":"11","cell":["11","KD0110401","\uc9c4\uac04\uc7a5 \uae08 F3 (500ml)"]},{"id":"12","cell":["12","KD0110406","\uc9c4\uac04\uc7a5 \uae08 F3 (15L)"]},{"id":"13","cell":["13","KD0110407","\uc9c4\uac04\uc7a5 \uae08 F3 (1.8L) New"]},{"id":"14","cell":["14","KD0110405","\uc9c4\uac04\uc7a5 \uae08 F3 (930ml) New"]},{"id":"15","cell":["15","KD0110402","\uc9c4\uac04\uc7a5 \uae08 F3 (5L)"]},{"id":"16","cell":["16","KD0110501","\uc870\ub9bc\uac04\uc7a5 (1.8L)"]},{"id":"17","cell":["17","KD0110503","\uc870\ub9bc \uac04\uc7a5 (930ml) New"]},{"id":"18","cell":["18","KD0110504","\uc870\ub9bc\uac04\uc7a5 (1.8L) New"]}]}

#25 든이제 2014-06-25 08:39:16

한가지 말씀드리자면 CI프레임 사용하지 않은 서버에서 확인 해본 결과....동작을 제대로 하네요...CI문제가 아닐까요??? 아님 CI에서 따로 설정을 해줘야 하는건 아닌지....휴....

#26 한대승(불의회상) 2014-06-25 08:48:13

든이제// CI문제는 아닙니다. ^^

#27 든이제 2014-06-25 08:49:48

그럼 어떻게 해야 하나요?? 알려주시면 감사 드리겠습니다.

#28 letsgolee 2014-06-25 09:32:48

이게 되는 코드입니다. 데이터베이스와는 잘 맞추어 사용하세요.

controller: jqgrid.php

<?php

class JqGrid extends CI_Controller {

 function __construct() {
  parent::__construct();
 }

 function index() {

  $data = array();
  $this->load->view('jqgrid', $data);
 }

 function ajax_request() {

  // 데이터베이스를 만들자... 이것도 일...
  $data = array(
   array("No"=>"1","Itemcode"=>"KD0110103","Itemname"=>"국간장 (930ml) New"),
   array("No"=>"2","Itemcode"=>"KD0110101","Itemname"=>"국간장 (15L)"),
   array("No"=>"3","Itemcode"=>"KD0110306","Itemname"=>"진간장 금S (930ml) New"),
   array("No"=>"4","Itemcode"=>"KD0110307","Itemname"=>"진간장 금S (1.8L) New"),
   array("No"=>"5","Itemcode"=>"KD0110301","Itemname"=>"진간장 금S (5L)"),
   array("No"=>"6","Itemcode"=>"KD0110302","Itemname"=>"진간장 금S (15L)"),
   array("No"=>"7","Itemcode"=>"KD0110205","Itemname"=>"진간장 S (930ml) New"),
   array("No"=>"8","Itemcode"=>"KD0110206","Itemname"=>"진간장 S (1.8L) New"),
   array("No"=>"9","Itemcode"=>"KD0110201","Itemname"=>"진간장 S (5L)"),
   array("No"=>"10","Itemcode"=>"KD0110204","Itemname"=>"진간장 S (15L)"),
   array("No"=>"11","Itemcode"=>"KD0110401","Itemname"=>"진간장 금 F3 (500ml)"),
   array("No"=>"12","Itemcode"=>"KD0110406","Itemname"=>"진간장 금 F3 (15L)"),
   array("No"=>"13","Itemcode"=>"KD0110407","Itemname"=>"진간장 금 F3 (1.8L) New"),
   array("No"=>"14","Itemcode"=>"KD0110405","Itemname"=>"진간장 금 F3 (930ml) New"),
   array("No"=>"15","Itemcode"=>"KD0110402","Itemname"=>"진간장 금 F3 (5L)"),
   array("No"=>"16","Itemcode"=>"KD0110501","Itemname"=>"조림간장 (1.8L)"),
   array("No"=>"17","Itemcode"=>"KD0110503","Itemname"=>"조림 간장 (930ml) New"),
   array("No"=>"18","Itemcode"=>"KD0110504","Itemname"=>"조림간장 (1.8L) New")
  );

  
  // view에서 전달해야 할 것... 최소 두가지. 여기서는 get방식으로 가져왔다.
  // post로 가져올 이유가 없어보여서...

  // 보여줄 페이지
  $page = $this->input->get('page');
  // 한 페이지 당 나열될 데이터 갯수
  $per_page = $this->input->get('rows');

  // 전체 데이터 갯수
  $records = count($data);

  // 한 페이지당 나열될 갯수로 전체 데이터 갯수를 나누면 전체 페이지가 나옴.
  $total_pages = ceil($records / $per_page);

  if ($page > $total_pages) $page=$total_pages;

  // 데이터 전송 준비
  $responce = new stdClass;

  $responce->page = $page;
        $responce->total = $total_pages;
        $responce->records = $records;

        $i = 0;

  // 시작 시점
  // 데이터베이스에서는 limit 설정을 한다고 생각하면 됨...
  // LIMIT $start, $per_page 이런 식으로 하면 됨.
  $start = ($page -1) * $per_page;


        for($j = $start; $j < $records; $j++) {
   $row = $data[$j];
            $responce->rows[$i]['id'] = $row['No'];
            $responce->rows[$i]['cell'] = array
            (
                $row['No'],
                $row['Itemcode'],
                $row['Itemname']
            );
            $i++;
        }

        echo json_encode($responce);
 }

}

viewer: jqgrid.php

<!DOCTYPE html>
<html>
<head>
<title>jqGrid test</title>
<!-- Install jQuery -->
<script language="javascript" language ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Install jQueryUI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!-- Install jqGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<!--<script src="lib/js/grid.grouping.js" type="text/javascript"></script>-->
<script>
$(document).ready(function() {
 $("#list").jqGrid({
  url: 'http://localhost/codeigniter-test/jqgrid/ajax_request',
  mtype : "GET", //Ajax request type. It also could be GET
  datatype: "json", //supported formats XML, JSON or Arrray
 colNames:["No","Product Code","Product Name"],
 colModel:
 [
 {name:"No", width:50, align:"left"},
 {name:"Itemcode", width:150, align:"left"},
 {name:"Itemname", width:150, align:"left"}
 ],
 rowNum:10,
 width: 1200,
 height: 250,
 rowList:[10,20,30],
 pager: "#pager",
 sortname: "No",
 viewrecords: true,
 //rownumbers: true,
 //gridview: true,
 caption:"Product List"
 });
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

주의할 것이 있다면 만일 encoding이 서로 일치하지 않으면 데이터값이 null이 될 수 있습니다. 되도록 둘 다 utf-8로 작업을 하세요. 마찬가지로 파일 인코딩도 그렇구요...

#29 든이제 2014-06-26 06:14:49

성공했습니다!!!!!!! 모두들 감사드려요!!!!!!~~~~~~~~~~~~~~~~~~~~~~

#30 letsgolee 2014-06-26 07:57:29

성공했다니 축하합니다. 저한테 밥한끼 사셔야 할 듯...

#31 든이제 2014-06-26 08:25:06

letsgolee님 정말로...그래야 할것 같습니다~ 저는 미국에 있는데...혹시 미국에 계신다면 꼭 사드릴께요~ ㅎㅎㅎ

#32 letsgolee 2014-06-26 18:16:29

미국에 갈 일있으면 연락할께요...ㅎㅎㅎ