Infragistics|Ignite UI for jQuery|如何將 igGrid (Ignite UI for JavaScript) 與 Java (JSP) 結合使用

infragistics log


Ignite UI for Javascript 還可以在使用 Java (JSP) 構建的網站上使用。

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


創建一個網絡項目






創建JPS(HelloIgnite.jsp)




您可以通過複製並粘貼下面的源代碼來按原樣使用它。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Hello Ignite!</h1>
</body>
</html>



完成到目前為止的步驟後,您就可以發佈網頁了。讓我們運行服務器並檢查一下。 訪問下面的URL並確認可以顯示“Hello Ignite!!”。



igGrid 簡介

您可以通過將下面的源代碼複製並粘貼到 HelloIgnite.jsp 來嘗試一下。

*CDN可用於快速實施。


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

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

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


加載 Ignite UI for JavaScript 的腳本文件

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


igGrid排列

<table id='grid'></table>


igGrid 設置

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



延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言