ColdFusion 9,JSON和jQuery EasyUI

时间:2014-03-04 14:22:35

标签: jquery json coldfusion coldfusion-9

我正在尝试向JSON输出ColdFusion查询,以便它可以与jQuery EasyUI(特别是Datagrid)一起使用。

从EasyUI附带的示例.json文件中,这是他们正在寻找的格式......

{"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"
            }
        ]
 }

但是当我在ColdFusion查询中使用SerializeJSON(emails)时,我得到了这个:

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

EasyUI似乎没有认识到这一点,所以我猜问题是(1)EasyUI能否识别并使用ColdFusion的输出,如图所示,或者(2)是否有办法使ColdFusion输出JUI的格式类似于EasyUI示例中包含的格式吗?

更新

如果我使用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);

谢谢!

2 个答案:

答案 0 :(得分:6)

datagrid的loadFilter函数可以将任何数据转换为可以加载到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/

获得

答案 1 :(得分:4)

看起来EasyUI DataGris不会接受数据的自定义格式(这很遗憾,因为数据网格看起来非常好看)

将CF查询转换为EasyUI的正确格式应该是直截了当的:

  • 创建一个用于保存数据的结构
  • 设置struct.total = query.RecordCount(如果这就是它想要的。对于远程分页,它更可能是总结果,无论当前页面如何)
  • set struct.rows = ArrayNew(1)
  • 循环查询(<cfloop query='myQuery'>
  • 创建一个新结构rowData
  • 遍历字段('myQuery.columnList')
  • 设置struct.columnName = myQuery ['columnName']
  • ArrayAppend(struct.rows,rowData)
  • return struct

我开始怀疑上面写这个列表只需要编写实际函数......