달력

5

« 2014/5 »

  •  
  •  
  •  
  •  
  • 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

'2014/05'에 해당되는 글 2

  1. 2014.05.09 [jQuery] jqGrid Multiple Footer 테이블
  2. 2014.05.08 [jQuery] jqGrid array 테이블
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/q/13673340/315935</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
        .ui-jqgrid tr.myfootrow td {font-weight: bold; overflow: hidden; white-space:nowrap; height: 21px;padding: 0 2px 0 2px;border-top-width: 1px; border-top-color: inherit; border-top-style: solid;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>
 
    <script type="text/javascript">
    //<![CDATA[
        /*global $ */
        /*jslint browser: true, plusplus: true */
        $(function () {
            "use strict";
            var myData = [
                    { id: "1",  invdate: "2007-10-01"name"test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "2",  invdate: "2007-10-02"name"test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "3",  invdate: "2007-09-01"name"test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "4",  invdate: "2007-10-04"name"test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "5",  invdate: "2007-10-31"name"test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "6",  invdate: "2007-09-06"name"test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "7",  invdate: "2007-10-04"name"test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "8",  invdate: "2007-10-03"name"test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "9",  invdate: "2007-09-01"name"test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "10", invdate: "2007-09-08"name"test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                    { id: "11", invdate: "2007-09-08"name"test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "12", invdate: "2007-09-10"name"test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
                ],
                $grid = $("#list"),
                initDate = function (elem) {
                    setTimeout(function () {
                        $(elem).datepicker({
                            dateFormat: "dd-M-yy",
                            autoSize: true,
                            changeYear: true,
                            changeMonth: true,
                            showWeek: true,
                            showButtonPanel: true
                        });
                    }, 100);
                },
                numberTemplate = {formatter: "number", align: "right", sorttype: "number",
                    editrules: {number: true, required: true},
                    searchoptions: { sopt: ["eq""ne""lt""le""gt""ge""nu""nn""in""ni"] }};
        
            $grid.jqGrid({
                datatype: "local",
                data: myData,
                colNames: ["Client""Date""Amount""Tax""Total""Closed""Shipped via""Notes"],
                colModel: [
                    {name"name", width: 65},
                    {name"invdate", width: 80, align: "center", sorttype: "date",
                        formatter: "date", formatoptions: {newformat: "d-M-Y"}, datefmt: "d-M-Y",
                        editoptions: { dataInit: initDate },
                        searchoptions: { sopt: ["eq""ne""lt""le""gt""ge"], dataInit: initDate }},
                    {name"amount", width: 75, template: numberTemplate },
                    {name"tax", width: 52, template: numberTemplate },
                    {name"total", width: 65, template: numberTemplate },
                    {name"closed", width: 80, align: "center", formatter: "checkbox",
                        edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                        stype: "select",
                        searchoptions: {
                            sopt: ["eq""ne"],
                            value: ":Any;true:Yes;false:No"
                        }},
                    {name"ship_via", width: 100, align: "center", formatter: "select",
                        edittype: "select",
                        editoptions: {
                            value: "FE:FedEx;TN:TNT;IN:Intim",
                            defaultValue: "Intime"
                        },
                        stype: "select",
                        searchoptions: {
                            sopt: ["eq""ne"],
                            value: ":Any;FE:FedEx;TN:TNT;IN:Intim"
                        }},
                    {name"note", width: 100, sortable: false}
                ],
                cmTemplate: {editable: true},
                rowNum: 5,
                rowList: [5, 10, 20],
                pager: "#pager",
                gridview: true,
                ignoreCase: true,
                rownumbers: true,
                sortname: "invdate",
                viewrecords: true,
                sortorder: "desc",
                height: "100%",
                hidegrid: false,
                caption: "How to implement multiline footer",
                footerrow: true,
                loadComplete: function () {
                    var $this = $(this),
                        sum = $this.jqGrid("getCol""amount", false, "sum"),
                        $footerRow = $(this.grid.sDiv).find("tr.footrow"),
                        localData = $this.jqGrid("getGridParam""data"),
                        totalRows = localData.length,
                        totalSum = 0,
                        $newFooterRow,
                        i;
        
                    $newFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
                    if ($newFooterRow.length === 0) {
                        // add second row of the footer if it's not exist
                        $newFooterRow = $footerRow.clone();
                        $newFooterRow.removeClass("footrow").addClass("myfootrow ui-widget-content");
                        $newFooterRow.children("td").each(function () {
                            this.style.width = ""// remove width from inline CSS
                        });
                        $newFooterRow.insertAfter($footerRow);
                    }
                    $this.jqGrid("footerData""set", {invdate: "Total (page):", amount: sum});
        
                    // calculate the value for the second footer row
                    for (i = 0; i < totalRows; i++) {
                        totalSum += parseInt(localData[i].amount, 10);
                    }
                    $newFooterRow.find(">td[aria-describedby=" + this.id + "_invdate]").text("Grand Total:");
                    $newFooterRow.find(">td[aria-describedby=" + this.id + "_amount]").text(
                        $.fmatter.util.NumberFormat(totalSum, $.jgrid.formatter.number)
                    );
                }
            });
        
        });
    //]]>
    </script>
</head>
<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
</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 레이칸트
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 레이칸트