添加Json数据作为dojogrid的源

时间:2012-03-05 09:47:09

标签: javascript json dojo dojox.grid.datagrid

我有一个类,其中我有一个方法名称method()以JSON字符串的形式返回一个String。输出是::

[{"ID":1,"Names":"Shantanu"},{"ID":2,"Names":"Mayur"},{"ID":3,"Names":"Rohit"},{"ID":4,"Names":"Jasdeep"},{"ID":5,"Names":"Rakesh"}]

现在这是我希望使用Dojo为Datagrid填充数据的形式。在我的jsp页面中,我使用它如下::

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="MyPackage.PopulateTextbox" %>
<%@ page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@import "http://localhost:8080/2_8_2012/js/dojo/resources/dojo.css";

@import "http://localhost:8080/2_8_2012/js/dijit/themes/nihilo/nihilo.css";
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
</script>

<script type="text/javascript">
var temp1;
$(document).ready(function() {

PopulateTextbox obj = new PopulateTextbox();
temp1 = obj.method();
});
out.println(temp1);
var storedata={
        identifier:"table1",
        label:"name",
        items: temp1
}
var gridStructure =[{
cells:[
            [
                  { field: "ID",
                        name: "ID_Emp",
                        width: "40%", styles: 'text-align: right;'
                  },
                  {
                      field: "Names",
                      name: "Name",
                      width: "40%", styles: 'text-align: right;'
                  }

            ]
      ]
}];

</script>

<title>Dojo Data</title>
</head>
<body class=nihilo>
<div style="width: 400px; height: 300px;">
  <div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-id="countryStoreForGrid" data-dojo-props="data:storeData"></div>
  <div id="grid"
    data-dojo-type="dojox.grid.DataGrid"
    data-dojo-props="store:countryStoreForGrid,
    structure:'gridStructure',
    queryOptions:{deep:true},
    query:{},
    rowsPerPage:40">
  </div>
</div>

</body>
</html>

我正在做的是当页面加载我正在创建PopulateTextbox类的对象并调用返回JSON字符串的方法。我在ITEMS下传递该字符串:作为Grid的数据。这是正确的方式吗?我可以在javascript中调用这样的方法吗?如果没有,请以正确的方式建议我。当我运行此页面时,我收到错误::

Webpage error details

Message: Expected ';'
Line: 25
Char: 17
Code: 0
URI: http://localhost:8080/2_8_2012/DisplayData.jsp

我在写作的同一行

PopulateTextbox obj = new PopulateTextbox();

PopulateTextbox.java的代码

package MyPackage;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.google.gson.Gson;

public class PopulateTextbox {

    Gson gson = new Gson();
    JSONObject obj = new JSONObject();
    JSONArray arr = new JSONArray();
    String temp1;

    String temp;
    List <String>rowValues = new ArrayList<String>();
    List <Integer>rowValues1 = new ArrayList<Integer>();
    String[] contactListNames;
    Connection con=null;
    Statement st=null;
    ResultSet rs=null;


    public String method(){


        try{


        String driver = "sun.jdbc.odbc.JdbcOdbcDriver";
        Class.forName(driver);

        String db = "jdbc:odbc:Practice_Database";
        con = DriverManager.getConnection(db,"","");

        st = con.createStatement();
        String sql = "SELECT Emp_Name,ID FROM EmployeeSearch";
        rs = st.executeQuery(sql);

        while(rs.next()){
            obj.put("ID", rs.getInt("ID"));
            obj.put("Names",rs.getString("Emp_Name"));
            arr.add(obj);
            //obj.add("Name", rs.getString("Emp_Name"));
            //rowValues1.add(rs.getInt("ID"));
            //rowValues.add(rs.getString("Emp_Name"));
            //obj.accumulate("Names",rs.getString("Emp_Name"));
        }
        //obj.accumulate("ID",rowValues1);

        //obj.accumulate("Names",rowValues);
        temp1 = arr.toString();
        System.out.println(temp1);
        contactListNames = (String[]) rowValues.toArray(new String[rowValues.size()]);
        temp = gson.toJson(contactListNames);




    }catch(Exception e){System.out.println(e);}
    /*finally{
        try {
                if(con!=null)con.close();
            } catch (SQLException e) {

                e.printStackTrace();
            }
        try {
            if(rs!=null)rs.close();
        } catch (SQLException e) {

            e.printStackTrace();
        }try {
            if(st!=null)st.close();

        } catch (SQLException e) {

            e.printStackTrace();
        }


    }*/
        return temp1;

    }
    public static void main(String args[])
    {
        PopulateTextbox obj = new PopulateTextbox();
        String temp1= obj.method();


    }
}

请帮忙。提前谢谢..

1 个答案:

答案 0 :(得分:0)

您的PopulateTextBox是一个java类,但您似乎是在javascript代码中引用它。

您可以使用JSP scriptlet在JSP中执行Java代码

首先,在JSP声明中声明字符串:

<%!
  String javaStr=null;
%>

然后,调用填充字符串的java函数:

<%

PopulateTextbox obj = new PopulateTextbox();
String javaStr = obj.method();

%>

然后,按如下方式修改您的JavaScript:

 <script type="text/javascript">
    var temp1;
$(document).ready(function() {

temp1 =<%= javaStr %>
});

删除“out.println(temp1);”来自您的JavaScript代码

您可以执行console.log(temp1)来查看firebug控制台中的数据,或者警告(temp1)以确保数据JSON位于temp1 javascript变量中