Easyui DataGrid增删改查实现

Java使用Spring MVC以及Mybatis实现 DataGrid的增删改查/分页,以Mysql数据库为例,效果:

具体代码如下:

0、数据库脚本:

CREATE TABLE `compy` (
  `id` bigint(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `compy_id` varchar(64) NOT NULL COMMENT '供应商ID',
  `compy_name` varchar(512) NOT NULL COMMENT '供应商名称[如:泰康]',
  `remark` varchar(1024) DEFAULT NULL COMMENT '备注',
  `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '数据更新时间',
  `create_time` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '数据创建时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8 COMMENT='供应商配置表';


1、前端页面:

<div class="easyui-layout" data-options="fit:true,border:false">
    <div id="searchCompanyUrl" style="padding:3px">
        <div class="comp-search-box">
                <div class="screen-top">
                    <div class="colRow">
                        <input id="s_compyName" type="text" class="easyui-textbox" name="compyName" data-options="label:'供应商名称:'" />
                    </div>
                    <div class="colRow">
                        <button class="easyui-linkbutton btnDefault" onclick="dosearchCompanyUrl();">
                            <i class="fa fa-search"></i>查询
                        </button>
                    </div>
                </div>
 
            </div>
            <div class="btnbar-tools">
                <a href="javascript:;" class="add" id="newCompy"><i class="fa fa-plus-square success"></i>添加</a>
                <a href="javascript:;" class="del" id="delCompy"><i class="fa fa-times-rectangle danger"></i>删除</a>
            </div>
    </div>
    
    <div data-options="region:'center',border:false"  style="overflow: hidden;">
       <table id="companyGrid"></table>
    </div>
</div>


 

2、JS相关:

<script type="text/javascript">
$(document).ready(function(){    
 
    //删除确认
    $('#delCompy').click(function(){
        var selRow = $('#companyGrid').datagrid('getSelections');  
        if(selRow.length<=0){
            layer.msg('请选择要删除的数据!')
        }else{
            layer.confirm('<div class="delMsgTip"><div class="delTip"><i class="icon"></i>你确定要删除当前数据!<br>是“确认”,否“取消”</div></div>', {type:0, title:false, shade:0}, function(index){
                var ids=[];
                for (var i = 0; i < selRow.length; i++) {
                    var id=selRow[i].id;   
                    ids.push(id); 
                }
                var paramIds = ids.join(','); 
                var basePath = $("#basePath").val();
                $.ajax({
                        cache : true,
                        type : "POST",
                        url : basePath+"/compy/delCompy",
                        data : { ids: paramIds },
                        async : false,
                        error : function(request) {
                            layer.msg('网络错误,请稍后再试!')
                        },
                        success : function(data) {
                            if(data=='success'){
                                dosearchCompanyUrl();
                                layer.msg('删除成功!')
                                $("#companyGrid").datagrid("clearChecked");
                                $("#companyGrid").datagrid("clearSelections");
                            }else{
                                layer.msg('删除失败!');
                            }
                        }
                 });
            });
        }
    });
    
    //加载列表
    var companyGrid = $('#companyGrid').datagrid({
        url : basePath+'/compy/getCompyList',
        idField : 'id',
        fit : true,
        fitColumns : true, //列宽自适应false
        border : true, //边框
        nowrap:true,
        rownumbers : true,
        pageSize:20,//初始化显示条数  
        pageList: [20,50,100],
        pagination : true,
        singleSelect:false,
        toolbar:"#searchCompanyUrl",
        frozenColumns : [ [ {
            title : 'id',
            field : 'id',
            width : 40,
            hidden : true
        } ] ],
        columns : [ [ { 
            field:'id',checkbox:true 
        },{
            field : 'compyId',
            title : '供应商编号',
            width : 150
        },{
            field : 'compyName',
            title : '供应商名称',
            width : 150
        },{
            field : 'remark',
            title : '备注',
            width : 150
        },{
            field : 'createTime',
            title : '数据创建时间',
            width : 150
        } ] ]
    });
});
 
//搜索
function dosearchCompanyUrl(){
    $('#companyGrid').datagrid('load',{
        companyName: $('#s_compyName').val()
    });
}
 
 
//新增保存提交
function add(){
    basePath = $("#basePath").val();
    var validate = $("#formAddCompany").form('validate');
    if(validate){
        $.ajax({
            cache : true,
            type : "POST",
            url : basePath+"/compy/addCompy",
            data : $('#formAddCompany').serialize(),
            async : false,
            error : function(request) {
                layer.msg('网络错误,请稍后再试!')
            },
            success : function(data) {
                if(data=='success'){
                    layer.closeAll();
                    dosearchCompanyUrl();
                    layer.msg('添加成功!')
                }else{
                    layer.msg('添加失败!')
                }
            }
        });
    }
}
function clearCompanyForm(){//重置表单
    $('#formAddCompany').form('clear');
}
</script>


3、Controller实现

/**
 * @ClassName: CompyController
 * @Description: Controller配置
 * @author sam
 * @date 2018年9月25日 下午4:03:23
 */
@Controller
@RequestMapping("/compy")
public class CompyController {
 
    @Autowired
    private compyService compyService;
 
    // 查询列表
    @PostMapping("/getCompyList")
    @ResponseBody
    public DataGrid getCompyList(PageUtils page, String companyName) {
        List<HeiniuCompy> dataList = compyService.getCompyList(page, companyName);
        int total = compyService.getCompyCount(companyName);
        DataGrid result = new DataGrid(total, dataList);
        return result;
    }
 
    // 添加
    @PostMapping("/addCompy")
    @ResponseBody
    public String addCompy(CompyDto compyDto) {
        // 保存
        int result = compyService.addCompy(compyDto);
        if (result > 0) {
            return "success";
        } else {
            return "fail";
        }
    }
 
    // 删除
    @PostMapping("/delCompy")
    @ResponseBody
    public String delCompy(String ids) {
        if (StringUtils.isEmpty(ids)) {
            throw new RuntimeException("参数为空");
        }
        int result = compyService.delCompy(ids);
        if (result > 0) {
            return "success";
        } else {
            return "fail";
        }
    }
 
}


4、DataGrid工具类

/**
 * @ClassName: DataGrid
 * @Description: DataGrid工具类
 * @author sam
 * @date 2018年9月22日 下午5:11:05
 */
public class DataGrid {
 
    private int total;
    private List<?> rows;
    // 页脚
    private List<?> footer;
 
    public DataGrid(int total, List<?> rows, List<?> footer) {
        super();
        this.total = total;
        this.rows = rows;
        this.footer = footer;
    }
 
    public DataGrid(int total, List<?> rows) {
        super();
        this.total = total;
        this.rows = rows;
    }
 
    public DataGrid() {
        super();
        // TODO Auto-generated constructor stub
    }
 
    public int getTotal() {
        return total;
    }
 
    public void setTotal(int total) {
        this.total = total;
    }
 
    public List<?> getRows() {
        return rows;
    }
 
    public void setRows(List<?> rows) {
        this.rows = rows;
    }
 
    public List<?> getFooter() {
        return footer;
    }
 
    public void setFooter(List<?> footer) {
        this.footer = footer;
    }
 
}


5、PageUtils分页工具类
 

/**
 * @ClassName: PageUtils 
 * @Description: 分页对象
 * @author sam 
 * @date 2018年9月20日 下午5:48:24
 */
public class PageUtils {
 
    private int page; // 当前页数
    private int rows; // 每行显示条数
 
    public PageUtils(int page, int rows) {
        super();
        this.page = page;
        this.rows = rows;
    }
 
    public PageUtils() {
        super();
        // TODO Auto-generated constructor stub
    }
 
    public int getPage() {
        return page;
    }
 
    public void setPage(int page) {
        this.page = page;
    }
 
    public int getRows() {
        return rows;
    }
 
    public void setRows(int rows) {
        this.rows = rows;
    }
}


6、Service层业务实现

@Autowired
private CompyDao compyDao;
    
@Override
public List<Compy> getCompyList(PageUtils page, String companyName) {
    List<Compy> list = new ArrayList<Compy>();
    try {
        list = compyDao.selectCompyByPage((page.getPage() - 1) * page.getRows(), page.getRows(), companyName);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return list;
}
 
@Override
public int getCompyCount(String companyName) {
    int total = 0;
    try {
        total = compyDao.selectCompyCount(companyName);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return total;
}
 
@Override
public int addCompy(CompyDto compyDto) {
    int result = 0;
    try {
        Compy compy = new Compy();
        BeanUtil.copyProperties(compyDto, compy);
        compy.setCompyId(UUID.randomUUID().toString());
        compy.setCreateTime(new Date());
        compy.setUpdateTime(new Date());
 
        result = compyDao.insert(compy);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return result;
}
 
@Override
public int delCompy(String ids) {
    int result = 0;
    try {
        String[] array = ids.split(",");
        result = compyDao.delCompy(array);
    } catch (Exception e) {    
        e.printStackTrace();
    }
    return result;
}


7、Mybatis CompyDao实现:

/**
 * @ClassName: CompyDao
 * @Description:Dao实现
 * @author sam
 * @date 2018年9月25日 下午3:28:23
 */
public interface CompyDao extends CompyMapper {
 
    // 删除记录
    int delCompy(@Param("array") String[] ids);
 
    // 查询列表(分页)
    List<Compy> selectCompyByPage(@Param("index") int index, @Param("rows") int rows,
            @Param("compy_name") String compyName);
 
    // 查询总数(分页)
    int selectCompyCount(@Param("compy_name") String compyName);
 
    // 查询名称下拉列表
    List<Compy> selectCompanyNameList();
}


8、Mybatis CompyDAO.xml实现

<select id="selectCompyByPage" resultMap="com.sam.generator.mapper.CompyMapper.BaseResultMap">
    select * 
    from compy
   <where>
      <if test="compy_name!=null and compy_name!=''">
        and compy_name like #{compy_name}
      </if>
   </where>
   order by create_time desc
   limit #{index},#{rows};
</select>
 
<select id="selectCompyCount" resultType="Integer">  
   select count(*) 
   from  compy 
   <where>
      <if test="compy_name!=null and compy_name!=''">
        and compy_name like #{compy_name}
      </if>
   </where>
</select>  
 
<delete id="delCompy">
    delete from compy where id in 
    <foreach item="idItem" collection="array"  open="(" separator="," close=")">
    #{idItem}
    </foreach>
</delete>


以上为主要配置完成!spring相关配置这里就不记录了,启动,运行。

猜你喜欢

转载自blog.csdn.net/yuyecsdn/article/details/89913798