ParamQuery数据显示

时间:2014-04-29 07:26:15

标签: php jquery html json

我正在尝试在php中实现ParamQuery一个类似于插件的excel。我正在尝试从生成json输出的php中获取数据。它正在正确获取但我想在div中显示数据:grid_array在指定的format.Am无法做到这些字段都是空白的。

我的json输出代码:data.php

<?php
 $conn = mysql_connect('localhost','root','pass');
 if(!$conn){
  die('Mysql connection error '.mysql_error());
 }

 $db = mysql_select_db('pop',$conn);
 if(!$db){
  die('Database selection failed '.mysql_error());
 }

 $sql = 'SELECT *FROM items';

 $result = mysql_query($sql,$conn);


 $data = array();
 while($row = mysql_fetch_array($result)){
  $row_data = array(
   'id' => $row['Item_id'],
   'Product' => $row['Product'],
    'Brand' => $row['Brand'],
    'Model' => $row['Model']
   );
  array_push($data, $row_data);
 }

 echo json_encode($data);
?>

我的html文件应该显示数据:

<html>
<head>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="pqgrid.min.css" />
    <script src="pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="themes/office/pqgrid.css" />

<script>
   $(document).ready(function(){
   var url = 'data.php';
      $.getJSON(url, function(data) {
          $.each(data, function(index, data) {
            var obj = { width: 700, height: 400, title: "ParamQuery Grid Example",resizable:true,draggable:true };
        obj.colModel = [{ title: "Id", width: 100, dataType: "integer" },
        { title: "Product", width: 200, dataType: "string" },
        { title: "Brand", width: 150, dataType: "string" },
        { title: "Model", width: 150, dataType: "string"}];
        obj.dataModel = { data:data};
        $("#grid_array").pqGrid(obj);

    });


   });
                    });


</script>
</head>
<body>

 <div id="grid_array" style="margin:100px;">
</div>
</body>

</html>

1 个答案:

答案 0 :(得分:1)

也许现在回答已经太晚了,无论如何我发现你没有正确设置colModel ......我的意思是,你忘了将列链接到"fields"

即:

{ title: "Product", width: 200, dataType: "string", dataIndx: "Product" }

其中dataIndx是JSON字段; &#34;标题&#34;只是标题,但不是直接数据绑定...结果你可以看到的是行但空白

我基于paramgrid演示here

您可以在colModel结构中看到de dataIndx字段...