-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
142 lines (140 loc) · 6.48 KB
/
index.html
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
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Bootstrap + jqGrid + serializeCFJSON Demo</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="keywords" content="ColdFusion,jqGrid,Bootstrap,Javascript,serializeCFJSON" />
<meta name="description" content="CFQueryReader is a custom Ext data reader, to parse the native JSON return of a ColdFusion Query object." />
<meta name="author" content="Steve 'Cutter' Blades" />
<meta name="copyright" content="(c)2012 Stephen Blades" />
<link rel="stylesheet" href="resources/scripts/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="resources/scripts/bootstrap/css/bootstrap-responsive.css" />
<link rel="stylesheet" href="resources/scripts/jquery-plugins/UI/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" href="resources/scripts/jquery-plugins/jqgrid-4.3.1/css/ui.jqgrid.css" />
<link rel="stylesheet" href="resources/scripts/google-code-prettify/prettify.css">
<link rel="stylesheet" href="resources/styles/custom/jqGridDemo.css" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://examples.cutterscrossing.com/serializeCFJSON">serializeCFJSON</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#demo">Demo</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#purpose">Purpose</a></li>
</ul>
<!-- <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p> -->
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<span class="span1"> </span>
<span class="span10">
<ul>
<li><b>Project:</b> - <a href="https://github.com/cutterbl/serializeCFJSON" target="_blank">serializeCFJSON</a></li>
<li><b>Author:</b> - <a href="http://www.cutterscrossing.com">Steve 'Cutter' Blades</a></li>
<li><b>Version:</b> - 0.8</li>
<li><b>Revised:</b> - 2 May, 2012</li>
<li><b>Tags:</b> - <a href="http://www.adobe.com/products/coldfusion" target="_blank">ColdFusion</a>, JavaScript, Development</li>
</ul><br />
<a name="purpose"></a>
<h3>Purpose</h3>
<p>A jQuery function that will parse the JSON returned from an ajax call to a remote
ColdFusion method and recursively convert any ColdFusion query object into a
standard JSON recordset, as recognized by a great number of plugins and libraries.</p>
<p>Standard native ColdFusion query object, as rendered by it's 'json' returnFormat:</p>
<pre class="prettyprint lang-js">
{
"COLUMNS":["ID","NAME","EMAIL"],
"DATA":[
[1,"Ed Spencer","[email protected]"],
[2,"Abe Elias","[email protected]"],
[3,"Cutter","[email protected]"]
]
}
</pre>
<p>converted by the method, the output becomes</p>
<pre class="prettyprint lang-js">
[
{"id":1,"name":"Ed Spencer","email":"[email protected]"},
{"id":2,"name":"Abe Elias","email":"[email protected]"},
{"id":3,"name":"Cutter","email":"[email protected]"}
]
</pre>
<p>The method will recursively trace each node of the JSON structure, and convert any object it finds with a COLUMNS and a DATA key, including those created by using the <a href="http://www.cfquickdocs.com/cf9/#queryconvertforgrid" target="_blank">ConvertQueryForGrid()</a> method. <strong>Note:</strong> The method will automatically lower case the column names.</p>
<a name="usage"></a>
<h3>Usage</h3>
<pre class="prettyprint lang-js">
var populateGrid = function (postdata) {
$.ajax({
url: '/com/cc/Blog/Entries.cfc',
data: {
method: 'GetEntries',
returnFormat: 'json'
},
method:'POST',
dataType:"json",
success: function(d,r,o){
d = $.serializeCFJSON(d);
if(d.success){
// do something with the data
} else {
// handle the error
}
}
});
};
</pre>
</span>
</div>
<div class="row-fluid">
<span class="span1"> </span>
<div id="gridBlock" class="span10 well">
<a name="demo"></a>
<p>This example uses serializeCFJSON to convert the paging data requests used by an instance of jqGrid.</p>
<form action="" name="searchForm" id="searchForm" class="inline-form">
<h3>Demo</h3>
<input type="text" name="title" placeholder="Title" class="span3"><br />
<input type="text" name="from" class="addDatePicker span3" placeholder="From">
<input type="text" name="to" class="addDatePicker span3" placeholder="To">
<p>To search for entries on a specific date, use the <em>To</em> field only.</p>
<div style="text-align: right;">
<input type="submit" value="Search" name="searchBtn" class="btn" />
<input type="reset" value="Reset" class="btn" />
</div>
</form>
<div id="gridCont1" class="gridCont">
<table id="gridTest" class="gTable"></table>
<div id="pager" class="gTable"></div>
</div><br clear="all" />
</div>
</div>
</div>
<div id="grid-dialog-error" title="Error" class="ui-helper-hidden">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span id="grid-dialog-error-message"></span></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="resources/scripts/bootstrap/js/bootstrap.js"></script>
<script src="jquery.serializecfjson-0.2.min.js"></script>
<script src="resources/scripts/jquery-plugins/UI/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="resources/scripts/jquery-plugins/jqgrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script src="resources/scripts/jquery-plugins/jqgrid-4.3.1/js/jquery.jqGrid.min.js"></script>
<script src="resources/scripts/jquery-plugins/jquery-json/jquery.json-2.3.min.js"></script>
<script src="resources/scripts/google-code-prettify/prettify.js"></script>
<script src="resources/scripts/custom/jqGridDemo.js"></script>
</body>
</html>