easyui-04（数据查询）

一、DataGrid

扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

2.用法：

创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。

案例

<table class="easyui-datagrid">  
    <thead>  
        <tr>  
            <th data-options="field:'code'">编码</th>  
            <th data-options="field:'name'">名称</th>  
            <th data-options="field:'price'">价格</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>001</td><td>名称1</td><td>2323</td>  
        </tr>  
        <tr>  
            <td>002</td><td>名称2</td><td>4612</td>  
        </tr>  
    </tbody>  
</table>  

通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。

<table class="easyui-datagrid" style="width:400px;height:250px"  
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
    <thead>  
        <tr>  
            <th data-options="field:'code',width:100">编码</th>  
            <th data-options="field:'name',width:100">名称</th>  
            <th data-options="field:'price',width:100,align:'right'">价格</th>  
        </tr>  
    </thead>  
</table>  

<table id="dg"></table>  
$('#dg').datagrid({   
    url:'datagrid_data.json',   
    columns:[[   
        {field:'code',title:'代码',width:100},   
        {field:'name',title:'名称',width:100},   
        {field:'price',title:'价格',width:100,align:'right'}   
    ]]   
});