easyui--5.DataGrid

1      Html方式（了解）

 <!--html形式实现
<table class="easyui-datagrid">   
    <thead>   
        <tr>   
            <thdata-options="field:'code'">编码</th>   
            <thdata-options="field:'name'">名称</th>   
            <thdata-options="field:'price'">价格</th>   
        </tr>   
    </thead>   
    <tbody>   
        <tr>   
           <td>001</td><td>name1</td><td>2323</td>   
        </tr>   
        <tr>   
           <td>002</td><td>name2</td><td>4612</td>   
        </tr>   
    </tbody>   
</table>  
-->

 

2      Html+js

2.1  Html

<table id="dg"></table> 

2.2  Js

$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
        {field:'stuNum',title:'学号',width:100},
        {field:'stuName',title:'姓名',width:100},
        {field:'stuSex',title:'性别',width:100,},
      {field:'stuAge',title:'年龄',width:100,},
      {field:'stuQQ',title:'QQ',width:100,},
    ]],
   pagination:true
});

3      混合方式（推荐）

3.1  Html

<table id="dg" class="easyui-datagrid" style="width:700px;height:350px"   
      data-options="fitColumns:true,singleSelect:true,pagination:true,toolbar:'#tb'">   
  <thead>   
      <tr>   
          <th data-options="field:'stuNum',width:100">学号</th>   
          <th data-options="field:'stuName',width:100">姓名</th> 
          <th data-options="field:'stuSex',width:100">性别</th>
   <th data-options="field:'stuAge',width:100">年龄</th>
   <th data-options="field:'stuQQ',width:100">QQ</th>   
      </tr>   
  </thead>   
 </table>

 <div id="tb">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'"> 新建</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"> 编辑</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"> 删除</a>
 </div> 

3.2  Js

$('#dg').datagrid({
      url:'datagrid_data.json'
});    

 

4      实例

4.1  返回结果pojo

/**
 * 用于接受easyUI 分页表格数据，也可以用map代替
 */
public class EasyUIDataGridResult implements Serializable{
    private Long total;

    private List<?> rows;

    public LonggetTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List<?>getRows() {
        return rows;
    }

    public void setRows(List<?> rows) {
        this.rows = rows;
    }
} 

1.2  Controller接受参数

 

1.3  Service

public EasyUIDataGridResult getItemList(int page, int rows) {
    //1.设置分页信息
    PageHelper.startPage(page,rows);
    //2.执行查询
    List<TbItem> itemList = itemMapper.selectByExample(new TbItemExample());
    //3.取分页结果 Rows：itemList , Total
    PageInfo<TbItem> pageInfo = new PageInfo<>(itemList);
    long total= pageInfo.getTotal();

    //4.返回值对象
    EasyUIDataGridResult result = new EasyUIDataGridResult();
    result.setRows(itemList);       //分页结果
    result.setTotal(total);
    return result;
}