ColdFusion 9, JSON, and jQuery EasyUI

Question

I am trying to output a ColdFusion request in JSON so that it can be used with jQuery EasyUI (specifically Datagrid).

From the example .json files that come with EasyUI, this is the format they are looking for ...

{"total":2
  , "rows":[ 
            { "productid":"FI-SW-01"
              , "productname":"Koi"
              , "unitcost":10.00
              , "status":"P"
              , "listprice":36.50,"attr1":"Large"
              , "itemid":"EST-1"
             }
          , { "productid":"K9-DL-01"
             , "productname":"Dalmation"
             , "unitcost":12.00 
             , "status":"P"
             , "listprice":18.50
             , "attr1":"Spotted Adult Female"
             , "itemid":"EST-10"
            }
        ]
 }

However, when I use SerializeJSON(emails)ColdFusion in the request, I get the following:

{ "COLUMNS":["CUSTOMERID","CUSTOMERFIRSTNAME"]
   , "DATA":[
               [101,"Bhavin"],[102,"Frank"]
            ]
}

This is not like EasyUI, so I think the questions are: (1) If EasyUI can recognize and work with ColdFusion output as shown, or (2) Is there a way to draw ColdFusion JSON output in a format similar to the one included in the example EasyUI?

Update:

This is how it looks if I use the parameter serializeQueryByColumns:

{ "ROWCOUNT":83
  , "COLUMNS":["CUSTOMERID","CUSTOMERFIRSTNAME"]
  , "DATA":{
            "CUSTOMERID":[101,102]
            ,"CUSTOMERFIRSTNAME":["Bhavin","Frank","]
            }
}

EasyUI. php, , , ColdFusion. :

$rs = mysql_query('select * from users');
$result = array();
while($row = mysql_fetch_object($rs)){
    array_push($result, $row);
}

echo json_encode($result);

!

Answer 1

loadFilter datagrid , datagrid.

<script>
var data = { "ROWCOUNT":83
  , "COLUMNS":["CUSTOMERID","CUSTOMERFIRSTNAME"]
  , "DATA":{
            "CUSTOMERID":[101,102]
            ,"CUSTOMERFIRSTNAME":["Bhavin","Frank"]
            }
};
function myLoadFilter(data){
    var result = {total:data.ROWCOUNT};
    var rows = [];
    var count = data.DATA[data.COLUMNS[0]].length;
    for(var i=0; i<count; i++){
        var row = {};
        $.map(data.COLUMNS, function(field){
            row[field] = data.DATA[field][i];
        })
        rows.push(row);
    }
    result.rows = rows;
    return result;
}
</script>

datagrid :

    <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
        data-options="
            singleSelect:true,
            collapsible:true,
            data:data,
            loadFilter:myLoadFilter
        ">
    <thead>
        <tr>
            <th data-options="field:'CUSTOMERID',width:100">CUSTOMERID</th>
            <th data-options="field:'CUSTOMERFIRSTNAME',width:200">CUSTOMERFIRSTNAME</th>
        </tr>
    </thead>
</table>

http://jsfiddle.net/d8zYy/

Answer 2

, EasyUI DataGris ( , datagrid , )

CF EasyUI :

• set struct.total = query.RecordCount( , . , , , ).
• set struct.rows = ArrayNew (1)
• (<cfloop query='myQuery'>
• , rowData​​li >
• ('myQuery.columnList')
• set struct.columnName = myQuery ['columnName']
• ArrayAppend (struct.rows, ROWDATA)
• return struct

, , ...