Back Ground

jQGrid 본문

Javascript/JQuery

jQGrid

Back 2016. 8. 29. 16:36

jqgrid 는 jquery 의 플러그인 입니다.

기존에는 데이터를 그리려면 sql로 데이터를 받아 오고 while로 돌리면서 
table 의 tr, td값을 변경 하면 서 작업을 했다면,
jqgrid는 ajax 기능을 내장 하고 있어서 data를 받아오면 jqgrid에서 자체적으로 table을 생성 해줍니다.



jq그리드 레코드정보 가져오기 

[출처] jq그리드 레코드정보 가져오기|작성자 IT is Hard



jqGrid에 현재 표시되고 있는 레코드의 갯수

("#grid_id").getGridParam("reccount")

​

jqGrid에서 서버에 요청하여 리턴 받은 총 레코드 수

​("#grid_id").getGridParam("reccount")

​




​사용 예

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$("#list2").jqGrid({
          url: "/abc123.do",    //요청 url (예:컨트롤러)
          datatype: "json",      //주고 받을 데이터 타입
          mtype: "POST",          // GET or POST
          async: true,              // 동기 or 비동기 (true일 경우 비동기)
          postData:jQuery("#mainform1").serialize(),   //요청 데이터 serialize() 함수는 form안에 데이터를 a=1&b=2형식으로 만들어준다.          
          colNames: ["아이디", "사용자명"],    // jq그리드 컬럼 명
          colModel: [                //컬럼 속성
              //{name:'rate_bill', index:'rate_bill', width:'30', align:'center'},       
              { name: "userId"     ,sortable: false, width:"150" },
              { name: "userNm"  ,sortable: false,width:"150" }
              
          ],
          pager: "#pager2",       //페이지가 표시될 곳 (예: div태그)
          rowNum: 10,                 //한 번에 보여줄 레코드 수
          rownumbers: true,      //컬럼 맨 앞에 순번컬럼 붙일지 말지( 1,2,3...)
          rowList: [10, 20, 30],  //한 번에 보여줄 레코드 수를 변동할 때 선택 값
          height: '150',               //jq그리드 높이
          width: '1000',               //jq그리드 너비
         loadonce: true,
          caption: "테스트 jq그리드 목록",     //jq그리드에 붙을 이름
          viewrecords:true
          , onSelectRow: function(rowid, status, e) {     
             var data = jQuery("#list2").getRowData(rowid);
    }, loadComplete: function(rowid, status, e) {        
             
             if(jQuery("#list2").getGridParam("reccount")>0){
                 // 조회된 값이 1개 이상일 때 
             }else{
                 // 조회된 값이 없을 때
             }
  
    }​



출처:http://blog.naver.com/alsrud477/220337036878

[출처] jq그리드 레코드정보 가져오기|작성자 IT 


is Hard






JQGrid 예제



view


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link href="./css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    <link href="./css/ui.jqgrid.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="./js/i18n/grid.locale-en.js"></script>
    <script src="./js/jquery.jqGrid.min.js"></script>
 <script>
    $(document).ready(function () {
        // 변수를 선언합니다.
        var customDialog = {
            onclickSubmit: function (params) {
                var selectedRow = $('#grid').getGridParam('selrow');
                rowData = $('#grid').getRowData(selectedRow);
                return { id: rowData.id };
            }
        };
 
        $('#grid').jqGrid({
            url: 'ListBook',    
            editurl: 'EditBook',
            datatype: 'json',
            pager: '#pager',
            caption: 'Books',
            height: '100%',
            rowNum: 10,
            rowList: [10, 20, 30],
            colNames: ['id', 'bookname', 'publisher', 'price'],
            colModel: [
                { name: 'id', index: 'bookid', width: 30 },
                { name: 'bookname', index: 'bookname', width: 270, editable: true, edittype: 'text' },                
                { name: 'publisher', index: 'publisher', width: 80, editable: true, edittype: 'text' },                
                { name: 'price', index: 'price', width: 40, editable: true, edittype: 'text' }
            ]
        }).navGrid('#pager', {
            search: true,
            edit: true,
            add: true,
            del: true
        }, customDialog, {}, customDialog);
    });
</script>
</head>
<body>
    <table id="grid"></table>
    <div id="pager"></div>
</body>
</html>
 
 
 
 
 





listBook 서블렛

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  //response.getWriter().append("Served at: ").append(request.getContextPath());
  
  System.out.println("ListBook callded");
  BookDao dao = new BookDao();
  ArrayList<BookVo> list = dao.listBook();
  
  String str = "{";
  str += "\"page\":1,";
  str += "\"total\":1,";
  str += "\"records\":10,";
  str += "\"rows\":";
  
  str += "[";
  
  for(BookVo b:list)
  {
   str += "{\"id\":\""+b.getBookid()+"\",\"bookname\":\""+b.getBookname()+"\",\"publisher\":\""+b.getPublisher()+"\",\"price\":\""+b.getPrice()+"\"},";
  }
  
  str = str.substring(0, str.length()-1);
  
  str += "]}";
  
  
  response.setContentType("text/plain");
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();
  out.println(str); 
  
 }
 





데잇북 서블렛

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
package com.hanb.servlet;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.eclipse.jdt.internal.compiler.ast.ArrayAllocationExpression;
 
import com.hanb.dao.BookDao;
import com.hanb.vo.BookVo;
import com.hanb.vo.ScheduleVo;
 
/**
 * Servlet implementation class ListBook
 */
@WebServlet("/EditBook")
public class EditBook extends HttpServlet {
 private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public EditBook() {
        super();
        // TODO Auto-generated constructor stub
    }
 
 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  //response.getWriter().append("Served at: ").append(request.getContextPath());
  
  System.out.println("EditBook callded doGet");
  
  String str = "";
  
  response.setContentType("text/plain");
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();
  out.println(str); 
  
 }
 
 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  //doGet(request, response);
  
  int re = -1;
  request.setCharacterEncoding("UTF-8");
  System.out.println("EditBook callded doPost");
  String oper = request.getParameter("oper");
  System.out.println("oper:"+oper);
  if(oper.equals("add"))
  {
   String bookname = request.getParameter("bookname");
   String publisher = request.getParameter("publisher");
   int price = Integer.parseInt(request.getParameter("price"));
   
   BookVo b = new BookVo(0, bookname, publisher, price);
   BookDao dao = new BookDao();
   re = dao.insertBook(b);
  }
  else if(oper.equals("edit"))
  {
   String bookname = request.getParameter("bookname");
   String publisher = request.getParameter("publisher");
   int price = Integer.parseInt(request.getParameter("price"));
   int id = Integer.parseInt(request.getParameter("id"));
   
   BookVo b = new BookVo(id, bookname, publisher, price);
   BookDao dao = new BookDao();
   re = dao.updateBook(b);
  }
  else if(oper.equals("del"))
  {
   int id = Integer.parseInt(request.getParameter("id"));
   BookDao dao = new BookDao();
   re = dao.deleteBook(id);
  }
  
  
  response.setContentType("text/plain");
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();
  out.println(re); 
 }
 
}

 
 

출처:http://blog.naver.com/pjhyh129/220738878659

'Javascript > JQuery' 카테고리의 다른 글

key event -(key code)  (0) 2016.08.30
css selector 검색시 .prop('outerHTML')  (0) 2016.08.30
시사 JQuery - CSS Styling / Effects & Custom Animations  (0) 2016.08.26
시사 JQuery 이벤트  (0) 2016.08.26
JQuery 메소드  (0) 2016.08.26
'Javascript/JQuery' Related Articles more
Comments