个人中心
gpt4 book ai didi

javascript - dataModel URL javascript 函数不填充网格

转载 作者：太空宇宙 更新时间：2023-11-04 11:56:22 25 4
gpt4 key购买 nike

为什么网格不会填充？

我有使用 java 动态生成的 JSON 字符串。 (主要.java)[json字符串生成的gif图像][1]

  package com.queryData.main;

  import com.queryData.dao.DataDAO;
  import com.queryData.services.JsonServices;
  import java.sql.ResultSet;
  import java.util.List;
  import org.json.JSONObject;

  public class Main {
    ResultSet resultSet = null;
    DataDAO datadao = new DataDAO();

    public List<JSONObject> getJsonObject() {
        resultSet = datadao.getResultSet();
        List<JSONObject> resList = JsonServices.getFormattedResult(resultSet);
        return resList;
    }

    public static void main(String[] args) {
        Main m = new Main();
        List<JSONObject> jObj = m.getJsonObject();
        for (int i = 0; i < jObj.size(); i++) {
            System.out.println(jObj.get(i));
        }
    }
}

我有 paramQuery 网格加载，但 dataModel 加载数据时遇到问题。 (索引.xhtml)[无数据的网格加载 gif 图像][2]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
    <!--jQuery dependencies-->
    <link rel="stylesheet"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/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.2/jquery-ui.min.js"></script>
    <!--ParamQuery Grid files-->
    <h:outputStylesheet name="css/pqgrid.min.css" />
    <h:outputScript name="js/pqgrid.min.js" />
        <!--Include Touch Punch file to provide support for touch devices-->    
    <h:outputScript name="js/jquery.ui.touch-punch.js" />   
<script>
$(function(){
    var obj = {};
    obj.width = 700;
    obj.height = 400;    
    obj.colModel = [
        { title: "Person ID", width:100, dataIndx: "person_id"},
        { title: "Full Name", width:200, dataIndx: "fullname"},
        { title: "First Name", width:150, dataIndx: "firstname"},
        { title: "Last Name", width:150, dataIndx: "lastname"}
        ];    
    <!-- reference to load remote data -->    
    var dataModel = {
            recIndx: "personid",
            location: "remote",
            sorting: "local",
            paging: "local",
            dataType: "JSON",
            method: "GET",
            sortIndx: "lastname",
            sortDir: "up",            
            url: "main.java"
            , getData: function (dataJSON) {
                var data = dataJSON.data;
                return { data: dataJSON.data };
            }
        }    
    <!-- KEY PART TO LOAD DATA -->       
    $("div#grid_array").pqGrid( obj );
}); 
</script>
</h:head>
<h:body>
    <div id="grid_array"></div>    
</h:body>
</html>

我已经更改了 URL，但不知道应该如何编写 URL 引用，下面是我当前正在尝试更正的脚本

    <h:head>
    <!--jQuery dependencies-->
    <link rel="stylesheet"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/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.2/jquery-ui.min.js"></script>
    <!--ParamQuery Grid files-->
    <h:outputStylesheet name="css/pqgrid.min.css" />
    <h:outputScript name="js/pqgrid.min.js" />
        <!--Include Touch Punch file to provide support for touch devices-->    
    <h:outputScript name="js/jquery.ui.touch-punch.js" />

<script>
$(function()
{
<!-- reference to load remote data --> 
    var dataModel =
        {
            location: "remote",   
            sorting: "local",                     
            dataType: "JSON",
            method: "GET",
            url: "json",
            getData: function (dataJSON) {return { data: dataJSON.data };}    
        }   
<!-- reference to create column titles -->
    var obj = {dataModel:dataModel};    
    obj.colModel = 
        [
        { title: "Person ID", width:100, dataIndx: "person_id"},
        { title: "Full Name", width:200, dataIndx: "fullname"},
        { title: "First Name", width:150, dataIndx: "firstname"},
        { title: "Last Name", width:150, dataIndx: "lastname"}
        ];
<!-- reference to initiate the request -->      
    $("div#grid_array").pqGrid( obj );
}
); 
</script>

</h:head>
<h:body>
    <div id="grid_array"></div>    
</h:body>

这是生成 JSON 字符串的两个 servlet，我需要将 LIST 修改为字符串，以生成这种格式的 JSON 数据。

{“数据”:[行1，行2，..]}

并且可以通过我的 VIEW 索引中的 GET HTTP 请求通过 URL 进行检索。 xhtml

两个 bean 和一个索引 View :

第一个 bean - 

    package com.queryData.services;

import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import org.json.JSONObject;

public class JsonServices {
    public static List<JSONObject> getFormattedResult(ResultSet rs) {
        // List<JSONObject> resList = new ArrayList<JSONObject>();      
        List<JSONObject> resList = "{\"data\":" + new ArrayList<JSONObject>() + "}";
        // above is the attempt to modify   

        try {
            // get column names
            ResultSetMetaData rsMeta = rs.getMetaData();
            int columnCnt = rsMeta.getColumnCount();
            List<String> columnNames = new ArrayList<String>();
            // loop to get all column names
            for (int i = 1; i <= columnCnt; i++) {
                // adding all retrieved column names to List object
                columnNames.add(rsMeta.getColumnName(i).toUpperCase());
            }
            while (rs.next()) {
                // convert each object to an human readable JSON object
                JSONObject obj = new JSONObject();
                for (int i = 1; i <= columnCnt; i++) {
                    String key = columnNames.get(i - 1);
                    String value = rs.getString(i);
                    obj.put(key, value);
                }
                resList.add(obj);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return resList;
    }
}

第二个 bean - 

    package com.queryData.main;

import com.queryData.dao.DataDAO;
import com.queryData.services.JsonServices;
import java.sql.ResultSet;
import java.util.List;
import org.json.JSONObject;

public class Main {
    ResultSet resultSet = null;
    DataDAO datadao = new DataDAO();

    public List<JSONObject> getJsonObject() {
        resultSet = datadao.getResultSet();
        List<JSONObject> resList = JsonServices.getFormattedResult(resultSet);
        return resList;
    }

    public static void main(String[] args) {
        Main m = new Main();
        List<JSONObject> jObj = m.getJsonObject();
        for (int i = 0; i < jObj.size(); i++) {
            System.out.println(jObj.get(i));
        }
    }
}

查看索引。 xhtml

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"/>
    <h:outputStylesheet name="css/pqgrid.min.css"/>
    <h:outputScript name="js/pqgrid.min.js"/>           
    <h:outputScript name="js/jquery.ui.touch-punch.js"/>
<script>
$(function(){
    var obj = {};
    obj.width = 700;
    obj.height = 400;    
    obj.colModel = [
        { title: "Person ID", width:100, dataIndx: "person_id"},
        { title: "Full Name", width:200, dataIndx: "fullname"},
        { title: "First Name", width:150, dataIndx: "firstname"},
        { title: "Last Name", width:150, dataIndx: "lastname"}
        ];
    var dataModel = {
            recIndx: "personid",
            location: "remote",
            sorting: "local",
            paging: "local",
            dataType: "JSON",
            method: "GET",
            sortIndx: "lastname",
            sortDir: "up",            
            url: "main"
            , getData: function (dataJSON) {
                var data = dataJSON.data;
                return { data: dataJSON.data };
            }
        }
    $("div#grid_array").pqGrid( obj );
}); 
</script>   
</h:head>
<h:body>
<div id="grid_array"></div>  
</h:body>
</html>

已部署的测试应用程序可以在deployed test run处查看

最佳答案

您可以执行以下操作:

创建辅助 bean

Persons.java

@ManagedBean(name="persons")
@SessionScoped
public class Persons {
  ResultSet resultSet = null;
  DataDAO datadao = new DataDAO();
  public List<JSONObject> people = JsonServices.getFormattedResult(datadao.getResultSet());
  /** getter and setter **/
}

在 xhtml 中，添加一个隐藏元素，用于放置来自支持 bean 的数据

<h:inputHidden id="hiddenPeople" value="#{persons.people}" />

在你的 xhtml、javascript 部分

<script>
  $(function() {
     var peopleList = $('#hiddenPeople');
     var peopleJson = JSON.parse(peopleList)
     // display peopleJson
  });
</script>

现在，我不确定 List people 是否会转换为字符串，因此您可能希望将其转换为字符串而不是列表。

关于javascript - dataModel URL javascript 函数不填充网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41368416/

25 4 0
文章推荐： linux - 为什么我必须为子进程设置 `wait()`？
文章推荐： c++ - 静态和共享库链接器错误
文章推荐： c++ - XCODE:使用字符串流 时出现链接问题
文章推荐： html - 我们可以包含带有 API 的样式表链接作为 href 属性吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com