文章/答案/技术大牛

发布

社区首页 >问答首页 >dataModel函数不填充网格

问dataModel函数不填充网格
EN

Stack Overflow用户

提问于 2016-12-28 19:19:48

回答 1查看 494关注 0票数 1

为什么网格不能填充？

我使用java动态地生成了JSON字符串。(主要。json字符串生成的java) gif映像

  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映像

<!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，我需要从一个列表修改为一个字符串，以生成这种格式的JSON数据。

{“数据”：row1，row2，.}

并可通过我的视图索引中的GET HTTP请求通过URL检索。xhtml

两个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;
    }
}

第二粒豆子-

    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>

部署的测试应用程序可以在部署测试运行上查看

javascript

java

json

function

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-29 16:25:42

你可以这样做：

创建支持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>

现在，我不确定列表人员是否会被转换为字符串，所以您可能希望将其转换为字符串而不是列表。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41368416

复制

相似问题

问dataModel函数不填充网格
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问dataModel函数不填充网格EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问dataModel函数不填充网格
EN