実装手順: まず、HTML の先頭に jQuery および jQuery UI への参照を追加します: コードをコピー コードは次のとおりです: <スクリプト src="//ajax.googleapis. com/ajax /libs/jquery/1.8.3/jquery.min.js"> /"--> < !--同上--> Param Query Grid への参照を追加します: コードをコピーします コードは次のとおりです: </script<!--この js ファイルは引用符で囲む必要があります--><BR></div></P> <P>スクリプト コードを追加します: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="95789" class="copybut" id="copybut95789" onclick="doCopy('code95789')"><U>コードをコピーします</U></a></span> コードは次のとおりです: </div><div class="codebody" id="code95789"><BR>$(function () {<BR> var data = [ [1, 'Exxon Mobil', '339,938.0', '36,130.0'],<BR> [2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],<BR> [3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],<BR> [4, 'BP', '267,600.0', '22,341.0'],<BR> [5, 'General Motors', '192,604.0', '-10,567.0'],<BR> [6, 'Chevron', '189,481.0', '14,099.0'],<BR> [7, 'DaimlerChrysler', '186,106.3', '3,536.3'],<BR> [8, 'Toyota Motor', '185,805.0', '12,119.6'],<BR> [9, 'Ford Motor', '177,210.0', '2,024.0'],<BR> [10, 'ConocoPhillips', '166,683.0', '13,529.0'],<BR> [11, 'General Electric', '157,153.0', '16,353.0'],<BR> [12, 'Total', '152,360.7', '15,250.0'],<BR> [13, 'ING Group', '138,235.3', '8,958.9'],<BR> [14, 'Citigroup', '131,045.0', '24,589.0'],<BR> [15, 'AXA', '129,839.2', '5,186.5'],<BR> [16, 'Allianz', '121,406.0', '5,442.4'],<BR> [17, 'Volkswagen', '118,376.6', '1,391.7'],<BR> [18, 'Fortis', '112,351.4', '4,896.3'],<BR> [19, 'Crédit Agricole', '110,764.6', '7,434.3'],<BR> [20, 'American Intl. Group', '108,905.0', '10,477.0']<BR> ];</P><P> var obj = {};<BR> obj.width = 700;<BR> obj.height = 400;<BR> obj.colModel = [ { title: "ランク"、width: 100、dataType: "integer "}, <{> {title:" company ", width: 200, dattype:" string "}, <BR> {title:"収益 ($ miss) "、width: 150、datatype:" float "、align: "right" },<BR> { title: "利益 ($ 百万)"、width: 150、dataType: "float"、align: "right" }];<BR> obj.dataModel = { data: data }; <BR> $("#grid_array").pqGrid(obj);<BR> </P> });<P><BR></div> </P>最後に、表示したい場所に div 要素を追加してテーブルを表示します: <P> </P><P><div class="codetitle"><span><a style="CURSOR: pointer" data="35310" class="copybut" id="copybut35310" onclick="doCopy('code35310')">コードをコピー<U></U></a> コードは次のとおりです:</span></div><div class="codebody" id="code35310"><div id="grid_array"> ;< /div><br><br> </div> 実行すると効果がわかります<p> </p>テーマスキンを追加したデモ<p><br><br><img src="http://files.jb51.net/file_images/article/201312/20131205093124.jpg?201311593317" alt="jQueryテーブルプラグインParamQueryの簡単な使い方 example_jquery" > </p>実装手順: <p>js コードのロジック部分には変更はありません (笑)。 <br>次のように、HTML の先頭部分にスタイル参照を追加すると完了です。<br> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="16747" class="copybut" id="copybut16747" onclick="doCopy('code16747')">コードをコピー<u></u></a> コードは次のとおりです:</span></div> <div class="codebody" id="code16747"><link rel="stylesheet" href ="/ Content/pqgrid/pqgrid.min.css" /> /pqgrid/主題/peach/pq-grid.css" /><br><script type="text/javascript" src="/Scripts/ pqgrid.min.js" >
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
