Author Topic: i want get the sample,may i?  (Read 1718 times)

徐雪峰

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 48
    • View Profile
i want get the sample,may i?
« on: July 07, 2020, 11:50:27 pm »
i want get the sample,may i?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5791
    • View Profile
Re: i want get the sample,may i?
« Reply #1 on: July 08, 2020, 08:22:53 am »
There are 2 sample files provided in the SDK: array.htm, json.htm. Please open them in the browser to run.

If googleapis.com is blocked in your location, then please use other CDN sources e.g., unpkg.com, code.jquery.com, etc

Code: [Select]
<!DOCTYPE html>
<html>
<head>
<!--jQuery dependencies-->
<link href="https://unpkg.com/[email protected]/jquery-ui.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/jquery-ui.structure.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/jquery-ui.theme.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
<script src="https://unpkg.com/[email protected]/jquery-ui.js"></script>

<!--PQ Grid files-->
    <link rel="stylesheet" href="pqgrid.min.css" />
    <link rel="stylesheet" href="pqgrid.ui.min.css" />
    <!--bootstrap theme-->
    <link rel='stylesheet' href='themes/bootstrap/pqgrid.css' />

    <script src="pqgrid.min.js"></script>
    <!--for localization and intellisense -->
    <script src="localize/pq-localize-en.js"></script>

<!--for touch devices-->
    <script src="pqTouch/pqtouch.min.js"></script>

<!--jsZip for zip and xlsx import/export-->
    <script src="jsZip-2.5.0/jszip.min.js"></script>

<style>
    .pq-grid{
        font-size:13px;
    }
</style>
<script>
$(function () {
    var data = [
        { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
        { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
        { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
        { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
        { rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
        { rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
        { rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
        { rank: 8, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
        { rank: 9, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
        { rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
        { rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
        { rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
        { rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
        { rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
        { rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
        { rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
        { rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
        { rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
        { rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
        { rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
    ];
    var obj = {
        numberCell:{resizable:true,title:"#",width:30,minWidth:30},
        editor: {type: 'textbox'},
        title: "ParamQuery Grid with JSON Data",
        resizable:true,
        menuIcon: true,
        scrollModel:{autoFit:true}
    };
    obj.colModel = [
        { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
        { title: "Company", width: 200, dataType: "string", dataIndx: "company" },
        { title: "Revenues ($ millions)", width: 150, dataType: "float", format: '$#,###.00', dataIndx: "revenues" },
        { title: "Profits ($ millions)", width: 150, dataType: "float", format: '$#,###.00', dataIndx: "profits" }
    ];
    obj.dataModel = { data: data };
    $("#grid_json").pqGrid(obj);
});

</script>
</head>
<body>
<div id="grid_json" style="margin:100px;"></div>
</body>

</html>


jsfiddle example: https://jsfiddle.net/5c14mugy/

徐雪峰

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 48
    • View Profile
Re: i want get the sample,may i?
« Reply #2 on: July 08, 2020, 08:42:00 am »
OK