如何在从php文件获取的JsGrid表中加载行?

时间:2016-03-09 22:02:56

标签: javascript php jquery mysql jsgrid

我试图从MySQL中的表中加载数据行。我在PHP中使用了jsgrid。 我的两个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 demo的相同文件,但是我更改了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>

但是结果是空的,我不知道为什么?,但是我改变了代码,但没有取得成功 我在这里错过了什么?

更新

请参阅my update below

3 个答案:

答案 0 :(得分:0)

done功能应该有效。删除success处理程序并将映射放入done处理程序。然后将debugger放入done处理程序,以确保您在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处理程序中执行所有操作并检查响应的格式。

答案 1 :(得分:0)

对不起我的延误,但我想我的错误在哪里!

我修好了,我得到了我错过的东西, 在controll.php文件中,我使用了public class SplashScreen extends Activity { // Splash screen timer private static int SPLASH_TIME_OUT = 3000; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_splash); new Handler().postDelayed(new Runnable() { /* * Showing splash screen with a timer. This will be useful when you * want to show case your app logo / company */ @Override public void run() { // This method will be executed once the timer is over // Start your app main activity Intent i = new Intent(SplashScreen.this, MainActivity.class); startActivity(i); // close this activity finish(); } }, SPLASH_TIME_OUT); } } 函数,但是我忘记了在命名数组中发送数据,因此我将其更改为mysqli_fetch_row()函数。

关于basic.html我改为:

mysqli_fetch_assoc()

但我认为它不安全,我怎么能让它更安全?

答案 2 :(得分:0)

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

JSGRID Image

下面的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" }
        ]
    });

});