js和html标签的混合使用

easyui除了传统的js方法之外也支持使用html标签来改变显示效果。

js方法示例：

$(\'#tt\').datagrid({  
    columns:[[  
        {field:\'itemid\',title:\'Item ID\',width:80},  
        {field:\'productid\',title:\'Product ID\',width:80},  
        {field:\'attr1\',title:\'Attribute\',width:200},  
        {field:\'status\',title:\'Status\',width:80}  
    ]]  
});  

html标签示例：

<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  
        url="datagrid2_getdata.php"  
        title="Load Data" iconCls="icon-save"  
        rownumbers="true" pagination="true">  
<thead>  
<tr>  
<th field="itemid" width="80">Item ID</th>  
<th field="productid" width="80">Product ID</th>  
<th field="listprice" width="80" align="right">List Price</th>  
<th field="unitcost" width="80" align="right">Unit Cost</th>  
<th field="attr1" width="150">Attribute</th>  
<th field="status" width="60" align="center">Stauts</th>  
</tr>  
</thead>  
</table>  

很明显html标签的方式要简洁明了得多，但是html标签可支持的配置不如js方法多，API也不全面，比如想要实现一个onClick方法，就不知如何通过html便签来实现了。
此时推荐采用js和html标签混合使用的方式。在js方法中配置html标签无法实现的参数。

如：

$(function(){
    $(\'#tt\').treegrid({
        onBeforeLoad:function(row,param){
if (row){
                $(this).treegrid(\'options\').url = \'treegrid_subdata.json\';
            } else {
                $(this).treegrid(\'options\').url = \'treegrid_data.json\';
            }
        },
        onContextMenu: function(e,row){
            e.preventDefault();
            $(this).treegrid(\'unselectAll\');
            $(this).treegrid(\'select\', row.code);
            $(\'#mm\').menu(\'show\', {
                left: e.pageX,
                top: e.pageY
            });
        }
    });
});

html标签可以基本保持不变，但是必须去除class="easyui-datagrid"属性，否则相当于调用两次treegrid({...})方法，只有第二次调用时配置的参数才生效。