설 연수
하하호홓
설 연수
전체 방문자
오늘
어제
  • 분류 전체보기 (231)
    • Back-End (2)
      • Java (20)
      • JSP (13)
      • Spring (18)
      • Kotlin (0)
      • node.js (0)
    • Front-End (68)
      • JavaScript (19)
      • jQuery (39)
      • Angular (4)
      • HTML (5)
    • Dev-Ops (12)
      • Linux, Cloud (5)
      • docker, k8s (5)
      • ElasticSeach (2)
    • Other (33)
      • OOP (3)
      • 알고리즘 (2)
      • DB (12)
      • Git (1)
      • Swift (4)
    • Backup (65)

블로그 메뉴

    공지사항

    인기 글

    태그

    • Angular
    • CORS
    • Kafka
    • 패스트캠퍼스
    • INVALID
    • 크로스도메인
    • angular2
    • MYSQL
    • 404 error
    • jquery invalid
    • page not found
    • RESTful
    • mongodb
    • jOOQ
    • angular 콜백
    • docker
    • flex
    • angular callback
    • angular4
    • Redis

    최근 댓글

    최근 글

    티스토리

    hELLO · Designed By 정상우.
    설 연수

    하하호홓

    Front-End/jQuery

    jqGrid에서 json data로 표출하는 에제

    2012. 7. 5. 17:48

    Json를 다음과 같이 리털할 경우

    {
       "page":"1",
       "total":2,
       "records":"13", 
       "user":[ 
          {"id":"12345","name":"Desktop Computers","email":"josh@josh.com","item":{"price":"1000.72", "weight": "1.22" }, "note": "note", "stock": "0","ship": "1"}, 
          {"id":"23456","name":"<var>laptop</var>","note":"Long text ","stock":"yes","item":{"price":"56.72", "weight":"1.22"},"ship": "2"},
          {"id":"34567","name":"LCD Monitor","note":"note3","stock":"true","item":{"price":"99999.72", "weight":"1.22"},"ship":"3"},
          {"id":"45678","name":"Speakers","note":"note","stock":"false","ship":"4"} 
        ] 
    }

    리스트를 표출하는 소스에서는  다음과 같이 처리함

    jQuery(

    function()

    {

    jQuery("#list2").jqGrid({

        url:'/admin/user/list/json',

    datatype: "json",

    jsonReader : { 

    page: "page", 

    total: "total", 

    root: "user", 

    records: function(obj){return obj.length;},

    repeatitems: false, 

    id: "seq_user"

    },

        colNames:['seq_user','Date', 'Client', 'Amount','name','Total','Notes'],

        colModel:[

        {name:'seq_user',index:'seq_user', width:55},

        {name:'invdate',index:'invdate', width:90},

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

        {name:'amount',index:'amount', width:80, align:"right"},

        {name:'name',index:'name123123', width:80, align:"right"},

        {name:'total',index:'total', width:80,align:"right"},

        {name:'note',index:'note', width:150, sortable:false}

        ],

        rowNum:10,

        rowList:[10,20,30],

        pager: '#pager2',

        sortname: 'seq_user',

        viewrecords: true,

        sortorder: "desc",

        caption:"JSON Example"

    });

    jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

    }

    );


     

    저작자표시 (새창열림)

    'Front-End > jQuery' 카테고리의 다른 글

    jQuery Tree메뉴 간단하게 만들기  (0) 2012.07.09
    [jqgrid] cell 값 수정 할 때 넘어가는 rowid 값 설정  (0) 2012.07.09
    delegate & live 간단예제  (0) 2012.06.25
    jQuery img 경로 오류 시 대체 이미지 설정하기 (엑박 방지)  (0) 2012.06.21
    jQuery ready(fn) vs load(fn)  (0) 2012.04.30
      'Front-End/jQuery' 카테고리의 다른 글
      • jQuery Tree메뉴 간단하게 만들기
      • [jqgrid] cell 값 수정 할 때 넘어가는 rowid 값 설정
      • delegate & live 간단예제
      • jQuery img 경로 오류 시 대체 이미지 설정하기 (엑박 방지)
      설 연수
      설 연수

      티스토리툴바