달력

9

« 2019/9 »

  • 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
  •  
  •  
  •  
  •  
  •  
2014.05.08 12:58

[jQuery] jqGrid array 테이블 CODE/jQuery 활용2014.05.08 12:58

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
<!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">
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<head><title>
</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.multiselect.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<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>
<body>
<table id="list"></table>
<div id="pager"></div>
<script>
$(document).ready(function () {
    gridView();
});
 
function gridView(){
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
   jQuery("#list").jqGrid({
      datatype: "local",
      data: mydata,
      height: 250,
         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"},
          {name:'name',index:'name', width:100},
          {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
          {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},  
          {name:'total',index:'total', width:80,align:"right",sorttype:"float"},  
          {name:'note',index:'note', width:150, sortable:false}  
         ],
         gridview: true,             
             rownumbers: false,
             rowNum: 10,
             rowList: [5, 10, 15],
             pager: '#pager',
             sortname: 'orderdate',
             viewrecords: true,
             sortorder: 'desc',
             caption: 'Preserving Selection on Client-side sorting',
             height: '100%'
});
}
</script>
</body>
</html>

'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08
구글 지도 예제소스  (0) 2014.04.01
Posted by 레이칸트