js和html标签的混合使用

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

js方法示例：

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

html标签示例：

<table id="tt" class="easyui-datagrid" style="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({...})方法，只有第二次调用时配置的参数才生效。