文章分類／Infragistics
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, });