1

我试图从 MySQL 的表中加载数据行。我将 jsgrid 与 PHP 一起使用。我的两个 php 文件连接到 localhost 数据库并使用 mysqli 函数从表中选择行，并将查询结果复制到数组中并发json_encode()送到我放置 jsgrid 代码的 HTML 文件。<iframe>然后，我通过html 标签将 html 文件调用到其他 PHP 文件中。

PHP 文件的名称是： newsConf、controll和getnewscat

HTML 文件：basic.html

在controll.php中：

public function newsConfig(){
$this->CONN = new Conn();//class from external page to connect DB
try{
    $dfnet = $this->CONN->open_connect();
    $qnco = mysqli_query($dfnet,"select * from category");
    if(!$qnco) return "";
    else{
        while($qncoarray = mysqli_fetch_row($qnco)){
            //here I try copy rows into array
            $nnopCo[] = array(
                'ID' => $qncoarray['ID'],
                'Name' => $qncoarray['Name']
            );
        }
        return $nnopCo;
    }
    $this->CONN->close_connect($dfnet);
}
catch(Exception $er){
}

在getnewscat.php中：

<?php require_once "../../bin/controll.php";
$db_controll = new Controll();
$cat_news = new ArrayObject($db_controll->newsConfig());

header('Content-type: application/json');
echo json_encode($cat_news->getArrayCopy());

?>

在 basic.html: 是来自 jsgrid 演示的同一个文件，但我更改了 javascript 中的代码并取消了 db.js 文件

$(function() {
    $("#jsGrid").jsGrid({
        height: "70%",
        width: "50%",//100%
        selecting: false,
        filtering: false,
        editing: false,
        sorting: false,
        paging: true,
        autoload: true,
        pageSize: 15,
        pageButtonCount: 5,
        controller: {
            loadData: function(clients){
                var d = $.Deferred();
                $.ajax({url: "../bin/getnewscat.php", dataType: "json",function(obj){
                    for (var i = 0; i < obj.length; i++) {
                        /*res[i]=data.i;
                        i++;*/
                        clients = {
                            "ID": obj.ID,
                            "Name": obj.Name
                        };
                    }
                }
                }).done(function(response) {
                    d.resolve(response.value);
                });
                return d.promise();
            }

在newsConf.php 中：该文件应该调用basic.html并通过以下方式给出结果：

<iframe name="demo" src="jsgrid-1.2.0/demos/basic.html"></iframe>

但是结果是空的，我不知道为什么？但是我更改了代码但没有成功。
我在这里错过了什么？

更新

请参阅下面的更新。

4

3 回答 3

0

我遇到了同样的问题。但是，一旦我将返回添加到 $.ajax 行，我得到的只是空行，但网格正在尝试渲染一些东西。见下图。

JSGRID 图像

PHP代码如下：

$sql = "SELECT e.estimateid, e.customerid, e.compid, cu.first_name,cu.last_name,e.reference_num, e.estimate_date, e.expiry_date, e.hours, e.sales_person, e.project_name
          FROM estimates AS e INNER JOIN company AS c ON e.compid = c.compid
          INNER JOIN customers AS cu ON e.customerid = cu.customerid";

  $resultsE = $conn->query($sql);
    $rows = array();
      while ($r = $resultsE->fetch_assoc()){
         $rows[] = $r;
      }
      $data = array($rows);
    }
    //header("Content-Type: application/json"); //If I uncomment this line the Grid says No Results.
    echo json_encode($data);

JS代码如下：

$(function() {

    $("#jsGrid").jsGrid({
        height: "90%",
        width: "98%",
        filtering: true,
        inserting: false,
        editing: false,
        sorting: true,
        paging: true,
        autoload: true,
        pageSize: 10,
        pageButtonCount: 5,

        //deleteConfirm: "Do you really want to delete client?",
        controller: {
            loadData: function(filter) {
          return $.ajax({url: "/js/jsgrid/estimates/index.php",data: filter  });
            },
            /*insertItem: function(item) {
                return $.ajax({
                    type: "POST",
                    url: "/estimates/",
                    data: item
                });
            },
            updateItem: function(item) {
                return $.ajax({
                    type: "PUT",
                    url: "/estimates/",
                    data: item
                });
            },
            deleteItem: function(item) {
                return $.ajax({
                    type: "DELETE",
                    url: "/estimates/",
                    data: item
                });
            }*/
        },
        fields: [
            { name: "estimateid", type: "number", width: 10, title: "EstId" },
            { name: "customerid", type: "number", width: 10, title: "CustId" },
            { name: "compid", type: "number", width: 10, title: "CompId"},
            { name: "first_name", type: "text", width: 50, title: "First Name" },
            { name: "last_name", type: "text", width: 50, title: "Last Name" },
            { name: "reference_num", type: "text", width: 12, title: "Ref.#" },
            { name: "estimate_date", type: "text", width: 12, title: "Est. Date" },
            { name: "expiry_date", type: "text", width: 12, title: "Exp. Date" },
            { name: "hours", type: "number", width: 10, title: "Hours" },
            { name: "sales_person", type: "text", width: 50, title: "Sales" },
            { name: "project_name", type: "text" , width: 50, title: "Project"},
            { type: "control" }
        ]
    });

});
于 2017-07-13T14:32:48.653 回答
0

抱歉我的延误，但我想我的错误在哪里！

我修复了它，我得到了我错过的东西，在 controll.php 文件中，我使用mysqli_fetch_row()了函数，但我忘记了我在命名数组中发送数据，所以我将其更改为mysqli_fetch_assoc()函数。

关于 basic.html 我将其更改为：

    <script>
            $(function() {
                {

                $("#jsGrid").jsGrid({
                    height: "70%",
                    width: "50%",//100%
                    selecting: false,
                    filtering: false,
                    editing: false,
                    sorting: false,
                    paging: true,
                    autoload: true,
                    pageSize: 15,
                    pageButtonCount: 5,
                    controller: {
                        loadData: function(filter) {
//here how I fix it!
return $.ajax({url: "../bin/getnewscat.php",data:filter
                            });

                        }
    },
    ////////////////////////////////////////////////////////////
                    fields: [
                        { name: "ID", type: "number", width: 50 },
                        { name: "Name", type: "text", width: 50},
                        { type: "control", modeSwitchButton: false, deleteButton: false }
                    ]
               });
    $(".config-panel input[type=checkbox]").on("click", function() {
                    var $cb = $(this);
                    $("#jsGrid").jsGrid("option", $cb.attr("id"), $cb.is(":checked"));
                });

            });
        </script>

但我认为它不安全，我怎样才能让它更安全？

于 2016-03-13T08:46:19.967 回答
0

该done功能应该可以工作。删除success处理程序并将您的映射放入done处理程序。然后放入debuggerdone 处理程序以确保您在response. 然后相应地映射响应并解决延迟。

loadData: function(clients){

    var d = $.Deferred();

    $.ajax({
        url: "../bin/getnewscat.php"
    }).done(function(response) {
        // put a debugger here to ensure that your response have 'value' field
        var clients = $.map(response.value, function(item) {
            return {
                ID: item.SomeID,
                Name: item.SomeName
            };
        });

        d.resolve(clients);
    });

    return d.promise();
}

我不确定您是否需要映射。也许你可以最终删除它。但是在 done 处理程序中执行所有操作并检查响应的格式。

于 2016-03-10T08:26:03.457 回答