ローカルデータを使用してグリッドを作成できました。Oracleデータベースからデータを取得して剣道グリッドとして表示する方法を知りたいですか?
データソースの「読み取り」機能を変更してデータを取得するにはどうすればよいですか?
サーブレット
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を呼び出します
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: " ", width: "250px" }],
editable: "popup"
});
});
["{\" 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 \ ":\"数学\ "}"]
これをGrid.jspで取得しましたが、
$ {リスト}
渡すデータが正しいjson形式ではありません。メソッド内のchangedDataとyourDataを比較します。
グリッドには配列形式のデータが必要なので、配列形式に変換しています。配列にデータがある場合は、それを直接渡します。それは次のようになります:
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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加