java - 如何使用 Java 将数据从 Oracle 数据库连接到 Kendo Grid？

Question

我可以使用本地数据创建网格。我想知道如何从 Oracle 数据库获取数据以显示为 Kendo 网格？

如何修改datasource中的“read”函数来获取数据？

小服务程序

public class TeacherListPageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    HttpSession session=request.getSession();
    ArrayList<MessageObjects> listArr;
    OracleConnection oraconn= new OracleConnection();
    listArr= oraconn.teacherDetails();

    System.out.println("In teacher servlet \n" );

    if(!listArr.isEmpty()){
    Gson gson= new Gson();
    String json=gson.toJson(listArr);
    System.out.println("In list");
    System.out.println(json);

    request.setAttribute("list",json);
    request.getRequestDispatcher("Grid.jsp").forward(request, response);
    //response.sendRedirect("Grid.jsp");
    }
    else
    {
        System.out.println("list is empty");
    }

}

listArr= oraconn.teacherDetails(); 将调用 OracleConnection.java

甲骨文连接

public  ArrayList teacherDetails()
{
ArrayList<MessageObjects> list= new ArrayList<MessageObjects>();
ArrayList<String> list1= new ArrayList<>();
MessageObjects obj= new MessageObjects();
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
          con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","STUDENT_DB","Aishwarya11");
        Statement statement=con.createStatement();
        ResultSet rs= statement.executeQuery("select * from TEACHERS_DETAILS");
        while(rs.next()) {
        obj.setTid(rs.getString(1));
        obj.setName(rs.getString(2)); 
        obj.setGender(rs.getString(3));
        obj.setDob(rs.getString(4)) ;
        obj.setYoe(rs.getString(5)) ;
        obj.setMajsub(rs.getString(6));
        list.add(obj);
        Gson gson= new Gson();
        String json=gson.toJson(obj);
        System.out.println("In DAO");
        System.out.println(json);
        list1.add(json);
        System.out.println("List1");

             } 

    }
  catch (SQLException | ClassNotFoundException e) {
      System.out.println(e.getMessage());
  }
  return list1;

 }

将数据从servlet转发到jsp(Grid.jsp)

网格.jsp

<div id="grid"></div>
<script>


        $(document).ready(function() {
        var dataSource= new kendo.data.DataSource({
            transport:{
                read:{/* I want to know how to read data here , how to code ?*/,
                     dataType : "json",
                     type: "POST",
                     }


                },

            schema:{
                data: "xdata.rows",
                model:{
                    id:"tid",
                      fields:{
                          //     tid:{editable:false},

                            tid:{type:"String"},
                            name:{type:"String"},
                            gender:{type:"String"},
                            dob:{type:"String"},
                            yoe:{type:"String"},
                            majsub:{type:"String"}

                      }
                }
         },
         pageSize:20,
         batch:true
        });


        $("#grid").kendoGrid({
               dataSource:dataSource,
               height:350,

               scrollable: true,
               columns:[{field: "tid",title:"Teacher Id",width: "130px"},
                        {field: "name",title:"Name",width: "130px"},
                        {field: "gender",title:"Gender",width: "130px" },
                        {field: "dob",title:"Date of Birth",width: "130px"},
                        {field: "yoe",title:"Year of Experience",width: "130px"},
                        {field: "majsub",title:"Major sub",width: "130px" },

                        {command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                        editable: "popup"
               });
        });

• 我只是想将数据读取到网格，所以我没有提供更新、销毁、创建。
• 我成功地从数据库中检索数据并将其更改为 JSON。

["{\"tid\":\"001\",\"name\":\"Varalakshmi\",\"gender\":\"Female\",\"dob\":\"01/08/1989\",\"yoe\":\"2\",\"majsub\":\"Physics\"}","{\"tid\":\"002\",\"name\":\"Lakshman\",\"gender\":\"Male\",\"dob\":\"05/08/1979\",\"yoe\":\"8\",\"majsub\":\"Maths\"}"]

我在 Grid.jsp 中得到了这个，当我尝试使用它查看它时

${list}

Answer 1

您传递的数据不是正确的 json 格式。比较方法中的 changedData 和 yourData。

Grid 需要数组形式的数据，这就是我将其转换为数组形式的原因。如果数组中有数据，则直接传递。那应该是这样的:

var data5 = [{ "Id": 121, "referenceId": 18222, "status": "test", "message": 'kk', "ss": "ss" }, { "Id": 121, "referenceId": 18222, "status": "test", "message": 'kk', "ss": "ss" }, { "Id": 121, "referenceId": 18222, "status": "test", "message": 'kk', "ss": "ss" }];

剑道网格需要剑道 js 和 css 文件。

使用这些:

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css">

<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>

<div id="grid" data-role="grid" class="k-grid k-widget k-editable" style="height: 550px;">
        <script>
            $(document).ready(function () {
                var yourData = ["\"tid\":\"001\",\"name\":\"Varalakshmi\",\"gender\":\"Female\",\"dob\":\"01/08/1989\",\"yoe\":\"2\",\"majsub\":\"Physics\"}", "{\"tid\":\"002\",\"name\":\"Lakshman\",\"gender\":\"Male\",\"dob\":\"05/08/1979\",\"yoe\":\"8\",\"majsub\":\"Maths\"}"]
                var changedData = "[{\"tid\":\"001\",\"name\":\"Varalakshmi\",\"gender\":\"Female\",\"dob\":\"01/08/1989\",\"yoe\":\"2\",\"majsub\":\"Maths\"}, {\"tid\":\"002\",\"name\":\"Lakshman\",\"gender\":\"Male\",\"dob\":\"05/08/1979\",\"yoe\":\"8\",\"majsub\":\"Maths\"}]";
                var feedData = $.parseJSON(changedData);

                $("#grid").kendoGrid({
                    dataSource: feedData,
                    navigatable: true,
                    pageable: true,
                    height: 550,
                    //  toolbar: ["create", "save", "cancel"],
                    columns: [
                         { field: "tid", title: "Unit Price" },
                          { field: "name", title: "Units In Stock" },
                          { field: "gender", title: "gender" },
                          { field: "dob", title: "dob" },
                          { field: "yoe", title: "yoe" },
                          { field: "majsub", title: "majsub" },
                    ],

                    editable: true
                });
            });
        </script>
    </div>