oGrid 初探

oGrid 是个还蛮有趣的 pure JavaScript grid 控件 code 并不多而且是纯 JavaScript 写成，一条小龙觉得还算蛮好理解，不像其他几乎都是用 Jquery 为 base，所以很适合初学者拿来做研究，或是有需要的人可以后面再根据其架构来自行开发出自己的控件，如此一来因为是自行开发的长期下来，掌控度也会好很多。

基本上，一条小龙认为，企业想要长期发展，都还是需要自行开发能配合其成长的相关控件，不可能把自己生命交给第三方厂商，然后期待他能配合公司需求来修改控件，当然如果你愿意付钱，应该也是可以，但这样技术都还是掌握在别人手上，这样企业主能安心吗? 当然如果该专案，只是这在起步，未来前景还不知道，那倒是可以先找成熟的第三方控件来使用，比较能快速看到成果，但在评选第三方控件时，都还是要能去找到一个掌握度比较大的第三方控件才是，这样后面专案有任何需求，你也才有办法去修改调整。

话不多说，接下来初步看一下，该控件的基本使用方式，下面 code 展示 oGrid 的一些基本用途，像是可以使用 loadData 来载入 json 资料，然后在后面操作也可以动态再去更新 data，要注意的是这里的 loadData 只能载入 JS 中的 json 物件资料，如需要动态像后端server 要资料，则要改用 loadFromUrl 这个函式。

<SCRIPT language="javascript">
var obj;
window.onload = function () {
    obj = new obj4u.oGrid(dataTable);
    obj.loadData(rawData);  // loadData of method can auto generated columns
    obj.addRows(rawData.rows[0]);
    obj.insertRow(1, rawData.rows[0]);
    obj.addRows(rawData.rows);
    obj.renderData();
    obj.event.AddEvent("onSelectedRow", oGrid_SelectedRow);
}
 
function oGrid_SelectedRow(rowElement, row)
{
    var selectedRows = obj.getSelectRows();
    alert(rowElement.rowIndex+ " - " + selectedRows.length + "," + row["productid"]);
}
</SCRIPT>
<TABLE id="dataTable">
 
</TABLE>

由上面的 code 可以看出，该控件的使用方式，很接近 C#, Java 等的物件使用方式，很多第三控件使用的方式，是如下面一般，类似函式呼叫，然后传递参数的方式来使用，而且其中有个问题是，几乎大部分设定，都需要第一次初始化时，就要设定完成，不像 oGrid 较为灵活可以在任何时候去设定，只要在重新呼叫 renderData 即可按你的设定，再重新描述资料了。

$('#dg').datagrid({  
    url:'datagrid_data.json',  
    columns:[[  
        {field:'code',title:'Code',width:100},  
        {field:'name',title:'Name',width:100},  
        {field:'price',title:'Price',width:100,align:'right'}  
    ]],
    onSelect: function(rowIndex, rowData){
            
        }
});

oGrid 一条小龙就初步介绍到这边，有兴趣的读者，可以前往该网站 http://obj4u.com 进行更深入的了解。