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>

修改:

删除:

更多推荐

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