您的位置：首页 > 编程语言 > Java开发

spring boot easyui菜鸟教程（01）——datagrid增删改查

2018-01-23 11:53 513 查看

1. 项目结构：

2. controller

//查询商品信息,返回json
@RequestMapping(value = "/findProductJson")
@ResponseBody
public List<Product> findProductJson(Map map){
List<Product> productList=productService.findAll();
map.put("productList",productList);
return productList;
}
//新增商品信息,重定向到product.save,返回json
@RequestMapping(value = "/saveProduct",method = RequestMethod.POST)
public String  saveProduct(Product p){
productService.save(p);
return "redirect:/index/findProduct";
}

3. html页面(easyui)

新增、查询

<head>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css"  th:href="@{/easyui/themes/default/easyui.css}"/>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{/easyui/themes/icon.css}"/>
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/color.css" th:href="@{/easyui/themes/color.css}"/>
<link rel="stylesheet" type="text/css" href="../static/easyui/demo/demo.css" th:href="@{/easyui/demo/demo.css}"/>
<script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{/easyui/jquery.min.js}"></script>
<script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{/easyui/jquery.easyui.min.js}"></script>
<script>
$(function () {
/*点击新增弹窗管理方法*/
manager_tool={
addProduct:function () {
$("#addProductDialog").dialog("open");
}
}

/*新增的弹窗方法内容*/
$("#addProductDialog").dialog({
width:400,
closed:true,
title:'新增管理',
buttons:[{
text:'提交',
iconCls:'icon-add-new',
handler:function () {
//新增提交方法
$.ajax({
url:'saveProduct',
type:'post',
data:{
name:$('input[name="name"]').val(),
price:$('input[name="price"]').val(),
standerd:$('input[name="standerd"]').val(),
code:$('input[name="code"]').val(),
srcPath:$('input[name="srcPath"]').val()
},
success:function (data,response,status) {
$.messager.progress('close');
$.messager.show({
title: '提示',
msg: '新增管理成功',
}),
$('#addProductDialog').dialog("close").form('reset'),
$('#easyuiStyle2').datagrid('reload')
}
})

} },
{
text:'取消',
iconCls:'icon-redo',
handler:function(){
$("#addProductDialog").dialog("close").form("reset") //取消弹窗方法
},
}]
});
})

$("#easyuiStyle2").datagrid({
url:'findProductJson',
rownumbers:true,
fitColumns:true,
pagination:true,
pageSize:5,
pageList:[5,10,15],
pageNumber:1,
toolbar:'#toolbar2',
columns:[[
{
field:'id',
title:'自动编号',
width:100,
checkbox:true
},
{
field:'name',
title:'品名',
width:100,
},
{
field:'price',
title:'价格',
width:100,
},
{
field:'standerd',
title:'规格',
width:100,
},
{
field:'code',
title:'编码',
width:100,
},
{
field:'srcPath',
title:'图片地址',
width:100,
}
]]
})
})
</script>
<body>
<!--datagrid html布局内容-->
<table id="easyuiStyle2"></table>
<div id="toolbar2"><!--工具栏按钮布局内容-->
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="manager_tool.addProduct()">新增</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-update" onclick="_update()">修改</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="_delete()">删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" onclick="manager._cancel()">取消</a>
</div>

<!--新增弹窗html布局-->
<div id="addProductDialog">
<form method="post">
<input type="hidden" name="id"/>
<table align="center">
<tr>
<td>品名:</td>
<td><input required="true" type='text' name='name'></input></td>
</tr>
<tr>
<td>价格:</td>
<td><input required="true" type='text' name='price'></input></td>
</tr>
<tr>
<td>规格:</td>
<td><input required="true" type='text' name='standerd'></input></td>
</tr>
<tr>
<td>编码:</td>
<td><input required="true" type='text' name='code'></input></td>
</tr>
<tr>
<td>图片地址:</td>
<td><input required="true" type='text' name='srcPath'></input></td>
</tr>
</table>
</form>
</div>

</body>
</html>

修改:

删除:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： datagrid easyui

相关文章推荐

新的分享

章节导航