Quantcast
Viewing all articles
Browse latest Browse all 21760

JQuery GRID JSON data

I have following code to use JQuery GRID.

I tried to use XML data first, using DataXML.cfm which works.

After that, I tried to use JSON using following code which is the same I just change datatype to json.

I use url to test my cfm file which returns data.

Can any one help me or suggestion to see where I can look the following javaScripts or cfm file for JQuery GRID to find a solution,

 

Your help and information is great appreciated,

 

Iccsi,

 

following is cfc file

 

 

<cffunction name="getLoc" access="remote" returntype="any" returnformat="json">

<cfquery name="qryLoc" datasource="Mysource">

SELECT invid, invdate, amount, tax, total, note  FROM invheader

</cfquery>

<cfoutput>

<cfset i = 1>

<cfset data = ArrayNew(1)>

<cfloop query="qryLoc">

<cfset row = StructNew()>

<cfset row["invid"] = "#qryLoc.invid#">

<cfset row["invdate"] = "#qryLoc.invdate#">

<cfset row["amount"] = "#qryLoc.amount#">

<cfset row["tax"] = "#qryLoc.tax#">

<cfset row["total"] = "#qryLoc.total#">

<cfset row["note"] = "#qryLoc.note#">

<cfset data[i]  = row>

<cfset i = i + 1>

</cfloop>

<cfreturn #serializeJSON(data)#>

 

</cfoutput>

</cffunction>

 

following  is jGrid.cfm

 

$(function () {

    $("#list").jqGrid({

        url: 'http://127.0.0.1/test/Example.cfc?method=getLoc',

        datatype: 'json',

      

        colNames: ['Tax', 'Inv No', 'Date', 'Notes', 'Total', 'Amount' ],

        colModel: [

            { name: 'tax', width: 80, align: 'right' },

            { name: 'invid', width: 55 },

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

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

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

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

         

          

        ],

        pager: '#pager',

        rowNum: 10,

        rowList: [10, 20, 30],

        sortname: 'invid',

        sortorder: 'desc',

        viewrecords: true,

        gridview: true,

        autoencode: true,

        caption: 'My first grid'

    });

  });

 

 

</script>

</head>

 

<body>

 

 

 

<table id="list"><tr><td></td></tr></table>

    <div id="pager"></div>

 

</body>

</html>

 

 

XMLData.cfm is following data

 

<cfcontent type="text/xml;charset=utf-8" />

 

<rows>

   <page>1</page>

   <total>1</total>

   <records>1</records>

   <row id='1'>

       <cell>1</cell>

       <cell>07/26/2013</cell>

       <cell><![CDATA[Client 1]]></cell>

       <cell>700</cell>

       <cell>140</cell>

       <cell>840</cell>

       <cell><![CDATA[Nice work!]]></cell>

   </row>

</rows>

 

my cfc file returns following data

 

[{"tax":10.00,"invid":1,"invdate":"July, 24 2013 00:00:00","note":"Test","total":10.00,"amount":10.00},{"tax":50.00,"i nvid":2,"invdate":"July, 03 2013 00:00:00","note":"test","total":100.00,"amount":20.00},{"tax":50.00," invid":3,"invdate":"July, 15 2013 00:00:00","note":"test","total":100.00,"amount":20.00}]


Viewing all articles
Browse latest Browse all 21760

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>