文章分類/

Infragistics|Ignite UI for jQuery|如何透過 Java 使用 igGrid (Ignite UI for JavaScript)

0 次瀏覽
2023-11-05 更新

infragistics log

Ignite UI for Javascript 也可以在使用 Java 建置的網站上使用。

在本文中,我們將介紹使用Eclipse(Java開發中常用的IDE)的建置過程。

建立一個網路項目

創建一個類別(HelloIgnite)

您可以透過複製並貼上下面的原始程式碼來按原樣使用它。

package ignite.sample;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloIgnite extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException
		{
		response.setContentType("text/html");

		PrintWriter out = response.getWriter();

		// HTML
		out.println("<html>");
		out.println("<head>");
		out.println("<title>Hello Ignite</title>");
		out.println("</head>");
		out.println("<body>");
		out.println("<h1>Hello Ignite!!</h1>");
		out.println("</body>");
		out.println("</html>");
	}
}

使用建立的 Java 類別執行 URL 映射

造訪先前建立的 HelloIgnite 類別時應該顯示哪個 URL?執行 URL 映射。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>IgniteUISample</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>

	<servlet>
		<servlet-name>helloIgnite</servlet-name>
		<servlet-class>ignite.sample.HelloIgnite</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>
		helloIgnite
		</servlet-name>
		<url-pattern>
		/
		</url-pattern>
	</servlet-mapping>
</web-app>

完成到目前為止的步驟後,您就可以發佈網頁了。讓我們運行伺服器並檢查一下。

訪問下面的URL並確認可以顯示“Hello Ignite!!”。

http://localhost:8080/IgniteUISample/

igGrid 簡介

您可以透過將下面的原始程式碼複製並貼上到 HelloIgnite 類別中來嘗試一下。

*CDN可用於快速實施。

package ignite.sample;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloIgnite extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException
		{
		response.setContentType("text/html");

		PrintWriter out = response.getWriter();

		// HTML
		out.println("<!DOCTYPE html>");
		out.println("<html lang="ja">");
		out.println("<head>");
		out.println("    <meta charset="UTF-8" />");
		out.println("    <title>HelloIgnite</title>");
		out.println("	 <script src='http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js'></script>");
		out.println("    <script src='http://code.jquery.com/jquery-1.11.3.min.js'></script>");
		out.println("    <script src='http://code.jquery.com/ui/1.11.1/jquery-ui.min.js'></script>");
		out.println("    <!-- Ignite UI Required Combined CSS Files -->");
		out.println("    <link href='http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/themes/infragistics/infragistics.theme.css' rel='stylesheet' />");
		out.println("    <link href='http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/structure/infragistics.css' rel='stylesheet' />");
		out.println("    <!-- Ignite UI Required Combined JavaScript Files -->");
		out.println("    <script src='http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.core.js'></script>");
		out.println("    <script src='http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.lob.js'></script>");
		out.println("</head>");
		out.println("<body>");
		out.println("    <table id='grid'></table>");
		out.println("    <script>");
		out.println("        $(function () {");
		out.println("            var data = [");
		out.println("                      { 'Name': 'John Smith', 'Age': 45 },");
		out.println("                      { 'Name': 'Mary Johnson', 'Age': 32 },");
		out.println("                      { 'Name': 'Bob Ferguson', 'Age': 27 }");
		out.println("                ];");
		out.println("            $('#grid').igGrid({");
		out.println("                dataSource: data,");
		out.println("            });");
		out.println("        });");
		out.println("    </script>");
		out.println("</body>");
		out.println("</html>");


	}
}

載入 Ignite UI for JavaScript 的樣式表文件

out.println("    <!-- Ignite UI Required Combined CSS Files -->");
out.println("    <link href='http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/themes/infragistics/infragistics.theme.css' rel='stylesheet' />");
out.println("    <link href='http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/structure/infragistics.css' rel='stylesheet' />");

載入 Ignite UI for JavaScript 的腳本文件

out.println("    <!-- Ignite UI Required Combined JavaScript Files -->");
out.println("    <script src='http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.core.js'></script>");
out.println("    <script src='http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.lob.js'></script>");

igGrid排列

out.println("    <table id='grid'></table>");

igGrid 設定

out.println("            $('#grid').igGrid({");
out.println("                dataSource: data,");
out.println("            });");

檢查結果

修改HelloIgnite類別後,重新啟動伺服器,檢查igGrid是否可以顯示。

http://localhost:8080/IgniteUISample/

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊