Quantcast
Channel: Adobe Community: Message List - ColdFusion
Viewing all articles
Browse latest Browse all 21760

Re: ColdFusion data source for jqGrid

$
0
0

I was able to run jqGrid on my local machine. Basically, you only need to adapt the example code from the web site. And, you are all set!

 

<!--- xml_data.cfm --->

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

 

 

<!--- jqGrid.html --->

<html>

<head>

  <title>jqGrid</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://trirand.com/blog/jqgrid/js/jquery.js" type="text/javascript"></script>

  <script src="http://trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js" type="text/javascript"></script>

  <script src="http://trirand.com/blog/jqgrid/js/jquery.layout.js" type="text/javascript"></script>

  <script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>

  <script type="text/javascript">

  $.jgrid.no_legacy_api = true;

  $.jgrid.useJSON = true;

  </script>

  <script src="http://trirand.com/blog/jqgrid/js/ui.multiselect.js" type="text/javascript"></script>

  <script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>

  <script src="http://trirand.com/blog/jqgrid/js/jquery.tablednd.js" type="text/javascript"></script>

  <script src="http://trirand.com/blog/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script>

 

 

  <script type="text/javascript">

  jQuery().ready(function (){

    jQuery("#list1").jqGrid({

        url:'http://localhost:8888/test/xml_data.cfm',

        datatype: "xml",

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

        colModel:[

          {name:'id',index:'id', width:75},

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

          {name:'name',index:'name', width:100},

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

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

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

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

        ],

        rowNum:10,

        autowidth: true,

        rowList:[10,20,30],

        pager: jQuery('#pager1'),

        sortname: 'id',

        viewrecords: true,

        sortorder: "desc",

        caption:"XML Example"

    })

    .navGrid('#pager1',{edit:false,add:false,del:false});

  });

  </script>

</head>

<body>

  <table id="list1"></table>

  <div id="pager1"></div>

</body>

</html>


Viewing all articles
Browse latest Browse all 21760

Trending Articles



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