pqGridの基本形 - IT練習ノート

javascriptのグリッドライブラリにpqGridがあります。
シンプルな基本形があると、そこから設定を追加して行っていろいろ試せるので、用意してみました。
f:id:naotoogawa:20160807231737p:plain
<!DOCTYPE html>
<html>
    <head>
    <!--jQuery dependencies-->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <!--ParamQuery Grid files-->
    <link rel="stylesheet" href="./pqgrid.dev.css" />
    <script type="text/javascript" src="./pqgrid.dev.js" ></script> 
    <!--Basic code  -->
    <script type="text/javascript" >
$(function () {

    // from pgGrid Demo
    var data = [
        { rank: 1 , company: 'Exxon Mobil'      , revenues: '339,938.0', profits: '36,130.0'  },
        { rank: 2 , company: 'Wal-Mart Stores'  , revenues: '315,654.0', profits: '11,231.0'  },
        { rank: 3 , company: 'Royal Dutch Shell', revenues: '306,731.0', profits: '25,311.0'  },
        { rank: 4 , company: 'BP'               , revenues: '267,600.0', profits: '22,341.0'  },
        { rank: 5 , company: 'General Motors'   , revenues: '192,604.0', profits: '-10,567.0' },
        { rank: 6 , company: 'Chevron'          , revenues: '189,481.0', profits: '14,099.0'  },
        { rank: 7 , company: 'DaimlerChrysler'  , revenues: '186,106.3', profits: '3,536.3'   },
        { rank: 8 , company: 'Toyota Motor'     , revenues: '185,805.0', profits: '12,119.6'  },
        { rank: 9 , company: 'Ford Motor'       , revenues: '177,210.0', profits: '2,024.0'   },
        { rank: 10, company: 'ConocoPhillips'   , revenues: '166,683.0', profits: '13,529.0'  },
    ];

    // grid 
    var obj = {
        title      : "sample" ,
        flexHeight : true     ,
        width      : 500      ,
        hwrap      : false    ,
    }

    obj.dataModel = {
       data : data  
    };

    obj.colModel = [ 
        { title : "rank"    , dataIndx : "rank"     , width :  10 , dataType : "integer" },
        { title : "company" , dataIndx : "company"  , width : 200 , dataType : "string"  },
        { title : "revenues", dataIndx : "revenues" , width : 100 , dataType : "integer" },
        { title : "profits" , dataIndx : "profits"  , width : 100 , dataType : "integer" }
    ];

//   obj.selectionModel = {
//
//   }

    $("#grid").pqGrid(obj);

    $("#debug").button().click(function() {
        var grid = $("#grid");
        var colModel = grid.pqGrid( "getColModel" );
        console.log(colModel);
        var data = grid.pqGrid("getData", {dataIndx : [
            "rank", "company", "revenues"
        ]});
        console.log(data);
    });

});

    </script>
    </head>        
<body>
    <div id="grid" ></div>
    <button type="button" id="debug" >debug log</button>
</body>
</html>