Easyui DataGrid增删改查实现

最新推荐文章于 2025-01-13 18:24:10 发布

漫天雪_昆仑巅

最新推荐文章于 2025-01-13 18:24:10 发布

阅读量4.7k

点赞数 2

分类专栏： JavaScript 文章标签： easyui实现 dataGrid增删改查 dataGrid java datagrid操作

本文链接：https://blog.youkuaiyun.com/vtopqx/article/details/82867067

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用Java SpringMVC和Mybatis实现DataGrid的增删改查及分页功能，包括前端页面设计、JS交互、Controller、Service、DAO层代码示例，以及数据库脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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相关配置这里就不记录了，启动，运行。