如何使用Java將數據從Oracle數據庫連接到Kendo Grid？

Question

我可以使用本地數據創建一個網格。我想知道如何從Oracle數據庫獲取數據以顯示爲Kendo Grid？

如何修改數據源中的「讀取」函數來獲取數據？

的Servlet

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（）;將調用從servlet的OracleConnection.java

的OracleConnection

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; 

} 

轉發數據把jsp（Grid.jsp）

Grid.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 \ 「\ 」名稱\「：\ 」Varalakshmi \「，\ 」性別\「：\ 」女性\「，\」 DOB \ 「：\」 1989年1月8日\ 「\ 」YOE \「：\ 」2 \「 \ 」majsub \「：\ 」物理學\「}」， 「{\」 TID \ 「：\」 002 \」，\ 「名稱\」：\ 「拉克什曼\」，\ 「性別\」：\ 「男\」，\ 「DOB \」：\ 「1979年5月8日\」，\ 「YOE \」：\ 「8 \」，\ 「majsub \」：\ 「的數學\」}「]

我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>