jQuery表格插件ParamQuery简单使用方法示例

前端技术 2023/09/08 JavaScript



实现步骤：
先在html的head中加入对jQuery和jQuery UI的引用：

复制代码 代码如下:

<link rel=\"stylesheet\" href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css\" />
<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></script>       <!--用了CDN链接（自适应http, https的切换），所以src的开头直接用了\"//\"-->
<script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js\"></script>  <!--同上-->


再加入对Param Query Grid的引用：

复制代码 代码如下:

<link rel=\"stylesheet\" href=\"/Content/pqgrid/pqgrid.min.css\" />           <!--这个css文件必须引用，无论你是用了皮肤，还是没有用到皮肤，都要引用-->
<script type=\"text/javascript\" src=\"/Scripts/pqgrid.min.js\" ></script>    <!--这个js文件必须引用-->

增加脚本代码：

复制代码 代码如下:

$(function () {
                var data = [    [1, \'Exxon Mobil\', \'339,938.0\', \'36,130.0\'],
                                [2, \'Wal-Mart Stores\', \'315,654.0\', \'11,231.0\'],
                                [3, \'Royal Dutch Shell\', \'306,731.0\', \'25,311.0\'],
                                [4, \'BP\', \'267,600.0\', \'22,341.0\'],
                                [5, \'General Motors\', \'192,604.0\', \'-10,567.0\'],
                                [6, \'Chevron\', \'189,481.0\', \'14,099.0\'],
                                [7, \'DaimlerChrysler\', \'186,106.3\', \'3,536.3\'],
                                [8, \'Toyota Motor\', \'185,805.0\', \'12,119.6\'],
                                [9, \'Ford Motor\', \'177,210.0\', \'2,024.0\'],
                                [10, \'ConocoPhillips\', \'166,683.0\', \'13,529.0\'],
                                [11, \'General Electric\', \'157,153.0\', \'16,353.0\'],
                                [12, \'Total\', \'152,360.7\', \'15,250.0\'],
                                [13, \'ING Group\', \'138,235.3\', \'8,958.9\'],
                                [14, \'Citigroup\', \'131,045.0\', \'24,589.0\'],
                                [15, \'AXA\', \'129,839.2\', \'5,186.5\'],
                                [16, \'Allianz\', \'121,406.0\', \'5,442.4\'],
                                [17, \'Volkswagen\', \'118,376.6\', \'1,391.7\'],
                                [18, \'Fortis\', \'112,351.4\', \'4,896.3\'],
                                [19, \'Crédit Agricole\', \'110,764.6\', \'7,434.3\'],
                                [20, \'American Intl. Group\', \'108,905.0\', \'10,477.0\']
                            ];

                var obj = {};
                obj.width = 700;
                obj.height = 400;
                obj.colModel = [{ title: \"Rank\", width: 100, dataType: \"integer\" },
                    { title: \"Company\", width: 200, dataType: \"string\" },
                    { title: \"Revenues ($ millions)\", width: 150, dataType: \"float\", align: \"right\" },
                    { title: \"Profits ($ millions)\", width: 150, dataType: \"float\", align: \"right\" }];
                obj.dataModel = { data: data };
                $(\"#grid_array\").pqGrid(obj);

            });

本文地址：https://www.stayed.cn/item/22644

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案