dhtmlxGridの使い方(1)

1.使用する前準備
必要なモジュールをあらかじめ読み込ませる

<link rel="STYLESHEET" type="text/css" href="dhtmlxGrid/css/dhtmlXGrid.css">
<script src="dhtmlxGrid/js/dhtmlXCommon.js"></script>
<script src="dhtmlxGrid/js/dhtmlXGrid.js"></script>
<script src="dhtmlxGrid/js/dhtmlXGridCell.js"></script>
<script src="dhtmlxGrid/js/dhtmlXGrid_start.js"></script>

2.簡単なグリッド作成

var gridUsers;
onload=function(){
gridUsers = new dhtmlXGridObject('dhtmlxGrid');
gridUsers.imgURL = "dhtmlxGrid/imgs/";
gridUsers.setHeader("ID,氏名,権限");
gridUsers.setInitWidths("100,120,120");
gridUsers.setColAlign("left,left,left");
gridUsers.init();
gridUsers.loadXML("userlist.xml");
}

(1)new
newでdhtmlxGridオブジェクトを生成。
(2) imgURL
imgURLメンバにGrid用スキンのディレクトリを設定してあげる。
(3)setHeader
グリッドのヘッダを設定する。
ここで横軸の数が決定されるので
"ID,氏名,権限,,,"
など空名等を入れると名前なしの列が出来る。
(4)setInitWidths
各列の表示サイズを設定します。
ここで隠し列にしたい時なんかは0を設定すればいい。
(5)setColAlign
各列の表示位置を設定します。
left,center,right
(6)init
設定に従って初期化を行い<div id="dhtmlxGrid"/>とhtml中に記述した場所にグリッドを描画する。
(7)loadXML
指定したURLからXMLを読み込みそれをグリッドに配置する。
ちなみにこの処理の次に読み込み後の処理などを入れても満足に動作しません。
読み込み後の処理を行いたい場合、loadXML("hoge.xml",onloadXMLhoge)などとしてonloadXMLhoge関数を作成して、そこに処理を書く。

3.セルへのアクセス

・１セルへのアクセス

var row=2;
var col=3;
var str=gridUsers.cells2(row,col).getValue();

・総舐め方法

for(var row=0;row<gridUsers.getRowsNum();row++){
for(var col=0;col<gridUsers.getColumnCount();col++){
 str=gridUsers.cells2(row,col).getValue();
}
}

・行の複数選択(たとえば全行選択)

for(var row=0;row<gridUsers.getRowsNum();row++){
gridUsers.selectCell(row,0,true,true);
}

・選択行を舐める(複数選択も含む)・・怪しいやり方

for(var row=0;row<gridUsers.selectedRows.length;row++){
for(var col=0;col<gridUsers.getColumnCount();col++){
 str = gridUsers.selectedRows[row].cells[col].textContent;
}
}