Dojo Grid編

javascript Dojo

Dojoにはテーブル表示に超便利なdojox.grid.Gridパッケージがあり、このGridの機能を使えばソートや行の追加などのテーブル操作がカンタンに実現できます。

dojo1.1系の場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Test dojox.grid.data.Objects Var1.1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <style type="text/css">
    @import "./js/dojo/1.1/dojox/grid/_grid/Grid.css";
    body {
      font-size: 0.9em;
      font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    .heading {
      font-weight: bold;
      padding-bottom: 0.25em;
    }
        
    #grid {
      border: 1px solid #333;
      width: 35em;
      height: 30em;
    }
    #grid2 {
      border: 1px solid #333;
      width: 35em;
      height: 30em;
    }
  </style>
  <script type="text/javascript" src="./js/dojo/1.1/dojo/dojo.js" 
    djConfig="isDebug:false, parseOnLoad: true"></script>
  <script type="text/javascript">
    dojo.require("dojox.grid.Grid");
    dojo.require("dojo.parser");
  </script>
  <script type="text/javascript">
  data = [ 
    { col1: "normal", col2: false, col3: "new", col4: 'But are not followed by two hexadecimal', col5: 29.91, col6: 10, col7: false },
    { col1: "important", col2: false, col3: "new", col4: 'Because a % sign always indicates', col5: 9.33, col6: -5, col7: false },
    { col1: "important", col2: false, col3: "read", col4: 'Signs can be selectively', col5: 19.34, col6: 0, col7: true },
    { col1: "note", col2: false, col3: "read", col4: 'However the reserved characters', col5: 15.63, col6: 0, col7: true },
    { col1: "normal", col2: false, col3: "replied", col4: 'It is therefore necessary', col5: 24.22, col6: 5.50, col7: true },
    { col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true },
    { col1: "note", col2: false, col3: "replied", col4: 'Which would simply be awkward in', col5: 12.15, col6: -4, col7: false }
  ];
  
  model = new dojox.grid.data.Objects(null, [ { col1: "fake" } ]);
  var view1 = {
    cells: [[
      {name: 'Column 0', field: 'col1'},
      {name: 'Column 1', field: 'col2'},
      {name: 'Column 2', field: 'col3'},
      {name: 'Column 3', field: 'col4', width: "150px"},
    ]]
  };
  var layout = [ view1 ];
  
  function getData() {
    model.setData(data);
    var newModel = new dojox.grid.data.Objects(null, data);
    dijit.byId("grid").setModel(newModel);
  }
</script>
</head>
<body>
<input type="button" value="getData" onclick="getData();"/>
<div class="heading">dojox.grid.data.Objects model change</div>
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
</html>

dojo1.2系の場合




    
参考サイト

    
Dojo 1.2 Grid
使いこなしたいDojoウィジェット - (2) Dojo Grid -- マイコミジャーナル --