easyUI+ssm 商品管理后台

1、title 标题
2、iconCls 图标
3、sortName 默认排序字段
4、sortOrder 排序方式
5、rownumbers 显示行号
6、pagination 显示分页插件
7、field 获取返回数据的字段对应的值
8、width 列宽度，百分制
9、sortable 可排序
10、fitColumns 自适应
11、singleSelect 单选
12、toolbar 工具条

查询

数据封装类

1、请求数据封装

public class DataGridReq {
    /**
     * 当前页面
     */
    private Integer page;
    /**
     * 每页记录数量
     */
    private Integer rows;
    /**
     * 排序的字段
     */
    private String sort;
    /**
     * 排序方式
     */
    private String order;
    /**
     * 偏移量，即其实条数
     */
    private Integer offest;

    //注意：偏移量不是前台传递，而是后台计算出来的

    public Integer getOffest() {
        return (this.page - 1) * this.rows;
    }
}

2、响应的数据分装成

public class DataGridResult {
    private Integer total;//总条数
    private List rows;//记录
}

dao层

<!-- 分页排序 -->
    <select id="findAllByReq" resultMap="GoodResultMap">
        select * from goods
        <if test="sort!=null and sort!=''">
            <!-- 注意：order by后面的参数必须使用$来获取 -->
            order by ${sort} ${order}
        </if>
        <if test="page!=null and page!=''">
            limit #{offest},#{rows}
        </if>
    </select>

    <!-- 获取总数量 -->
    <select id="count" resultType="int">
        select count(*) from goods
    </select>

service层

将总条数和list分装到DataGrridResult中
count是总条数，goodList是封装好的商品信息

DataGridResult result=new DataGridResult(count,goodList);

controller层

@GetMapping("list")
    public DataGridResult list(DataGridReq dataGridReq) {
        System.out.println(dataGridReq);
        return goodsService.findAllByReq(dataGridReq);
    }

前端

<table id="tt" class="easyui-datagrid" style="width:100%"
       url="/taobao/goods/list"
       title="商品信息列表" 
       iconCls="icon-save"
       sortName="gname"
       sortOrder="asc"
       rownumbers="true"
       pagination="true"      
       fitColumns="true"
       singleSelect="true"
       toolbar="#tb">
    <thead>
    <tr>
        <th field="gname" width="80" sortable="true">商品名称</th>
        <th field="gprice" width="100" sortable="true">单价</th>
        <th field="num" sortable="true">库存</th>
        <th field="goodType" sortable="true">类别</th>
        <th field="description" width="220">描述</th>
    </tr>
    </thead>
</table>

删除

封装数据

public class AjaxResult {
    private Integer code;//信息码
    private String msg;//信息
    private Object data;//数据
}

dao层

<delete id="delete">
        delete from goods where gid=#{value}
</delete>

service层

public AjaxResult delete(Integer gid) {
        int delete = goodDao.delete(gid);
        if (delete == 0) {
            return new AjaxResult(GoodEnums.DEL_ERROR);
        }
        return new AjaxResult(GoodEnums.DEL_SUC);
    }

controller层

@PostMapping("{gid}/delete") //restful风格请求
public AjaxResult delete(@PathVariable Integer gid) {
    return goodsService.delete(gid);
}

前端

在toolbar的删除按钮中调用下面的函数

function del(){
        var row = $('#tt').datagrid('getSelected');//获取选择的那一行数据
        if (row){
            $.messager.confirm('Confirm','确定要删除吗？',function(r){
                if (r){
                    //用户选择确定按钮后，发送请求
                    $.post('/taobao/goods/'+row.gid+'/delete',function(result){
                        if (result.code==code.success){//如果返回成功code
                            $('#tt').datagrid('reload');    // 刷新页面
                        } else {
                            $.messager.show({
                                title: 'Error',
                                msg: result.msg // 显示错误信息
                            });
                        }
                    },'json');
                }
            });
        }
    }