개발 Q&A

제목 jqGrid 적용...도와 주세요!!!!
글쓴이 든이제 작성시각 2014/06/20 08:29:28
댓글 : 32 추천 : 0 스크랩 : 0 조회수 : 26098   RSS
현재 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"
   });
});
 다음글 가입 할수 없는 ID 설정 해놓고 회원 가입시 설정해... (9)
 이전글 자바 스크립트 -> php로 배열 넘길때 질문입니... (4)
목록

댓글

변종원(웅파) / 2014/06/20 14:12:10 / 추천 0
데이터가 정상적으로 넘어오는지,
넘어왔는데 jqgrid에서 못 뿌리는 건지 등등 확인 필요합니다.

게시물 이동합니다.
든이제 / 2014/06/21 00:09:09 / 추천 0
아래와 같이 값은 화면에 찍힙니다.
그런데...테이블 안으로 값이 들어 가야 하는데...그게 안돼네요...

{"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"]}]} 
든이제 / 2014/06/21 01:06:21 / 추천 0
jquery alert로 확인 해보니 값은 가지고 오는것 같습니다...그런데 테이블에 뿌려 지지를 않네요...휴....
웅파님 제발 도와주세요~ㅜ.ㅜ
letsgolee / 2014/06/21 20:20:50 / 추천 0
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 이렇게 전달이 되지 않았다고 여깁니다. 
 
든이제 / 2014/06/21 23:46:52 / 추천 0
letsgolee님이 말씀 하신것은 page를 할때 필요 한 부분이고 일단 json_encode로 넘어 오면 그것을 받아 뿌려 줘야 하는데...echo로 때문에 화면에는 뿌려지나....jqgrid 테이블에는 뿌려 지지 않는 부분이 안됩니다...위에서 말씀하신데로 page까지 제대로 코딩이 되야 테이블에 뿌려 진다는 말씀이신가요????
letsgolee / 2014/06/22 00:33:29 / 추천 0 
<!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>
든이제 / 2014/06/22 03:52:38 / 추천 0
letsgolee님...위와 같이 하면 됩니다...그런데 db에서 가지고 와서 뿌리는 과정에서 되지 않네요...휴...
letsgolee / 2014/06/22 07:19:54 / 추천 0
어쩌면 서버에서 데이터 가져오는 것은 문제가 없지만 화면상에 뿌려주는 즉 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파일을 내부적으로 불러들일 필요가 없습니다.
한대승(불의회상) / 2014/06/23 12:28:29 / 추천 0
든이제// json data 포맷에 문제가 있어 보이는군요.
든이제 / 2014/06/23 12:50:03 / 추천 0
포멧에 문제가 있다는건 무슨 뜻인가요? 그러면 어떻게 수정을 해야 할까요? 부탁드립니다..가르쳐 주세요!!! ^^;;
darkninja / 2014/06/23 13:04:25 / 추천 0
http://jsonlint.com/

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

따옴표 문제인가요?
letsgolee / 2014/06/23 14:38:12 / 추천 0
테스트하니 잘 됩니다. 다음만 주의하세요...

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값을 제대로 주니 나오네요...








 
든이제 / 2014/06/24 06:39:12 / 추천 0
letsgolee님 도와 주셔서 너무 감사합니다....
그런데....혹시 CI에서 테스트 해보신 건지요?
지금 CI에서 테스트 중인데 CI에서는 안되네요....ㅜ.ㅜ
든이제 / 2014/06/24 07:43:32 / 추천 0
아래의 사진처럼 나옵니다...CI에 적용 했을땐....이상하죠??? 휴....어떻게 해야 할까요???
letsgolee / 2014/06/24 08:22:38 / 추천 0
인건 CI와 상관없습니다. 또 데이터가 잘 넘어온 것을 확인했기 때문에 나머지는 html과 javascript에서 처리가 되어야  합니다.