<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%request.setAttribute("ctx", request.getContextPath());%>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${ctx}/layui-v2.9.14/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/jquery-1.11.3.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.9.14/layui.js"></script>
    <script type="text/javascript">
    </script>
</head>
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">日期选择</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
            <div class="layui-inline">
                <label class="layui-form-label">行内表单</label>
                <div class="layui-input-inline">
                    <input type="text" name="number" autocomplete="off" class="layui-input">
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                <button class="layui-btn" lay-submit layui-bg-blue lay-filter="btnAdd">添加</button>
    </form>
<div class="layui-hide" id="formEdit">
    <form class="layui-form" action="" lay-filter="formEdit" style="margin: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">验证必填项</label>
            <div class="layui-input-block">
                <input type="text" name="goodsName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        <div class="layui-form-item">
            <select name="selectCity" id="selectCity">
                <option value="">请选择省</option>
                <option value="浙江" selected>浙江省</option>
                <option value="你的工号">江西省</option>
                <option value="你最喜欢的老师">福建省</option>
            </select>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="btnEdit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </form>
<table class="layui-hide" id="table-id-list" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var util = layui.util;
        // 动态添加选项
        var persons = [];
        $.post('/index/getUserList.do',{}, function (res) {
            if(res.code == 200) {
                persons = res.data;
                // 初始化下拉框
                var selectCity = document.getElementById('selectCity');
                selectCity.options.length = 0;
                for (var i = 0; i < persons.length; i++) {
                    var option = new Option(persons[i].userName, persons[i].userId);
                    selectCity.options.add(option);
        // 重新渲染表单
        form.render('select');
        // 提交事件
        form.on('submit(search)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            // 此处可执行 Ajax 等操作
            return false; // 阻止默认 form 跳转
        table.render({
            elem: '#table-id-list',
            url: '/index/getList.do',
            page: true,
            cols: [[
                {field:'goodsId', fixed: 'left', width:80, title: 'ID', sort: true},
                {field:'goodsName', fixed: 'left', width:180, title: '名称', sort: true},
                {field:'wareUnit', fixed: 'left', width:180, title: '库存单位', sort: true},
                {field:'wareAmount', fixed: 'left', width:180, title: '库存金额', sort: true},
                {field:'outUnit', fixed: 'left', width:180, title: '出库单位', sort: true},
                {field:'outCount', fixed: 'left', width:180, title: '出库数量', sort: true},
                {field:'outAmount', fixed: 'left', width:180, title: '出库金额', sort: true},
                {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
            limits: [2, 10, 15],
            limit: 2, // 每页默认显示的数量
            // … // 其他属性
        // 触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if(obj.event === 'edit'){
                console.log('data', data);
                layer.open({
                    type: 1, // page 层类型
                    area: ['800px', '400px'],
                    title: '数据修改',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: $('#formEdit').html(),
                    success: function (layerow, index) {
                        form.val('formEdit', data);//为表单赋值回显
                        form.render();//重新渲染一下表单
                        //监听表单的提交时间.
                        form.on('submit(btnEdit)', function(data){
                            var field = data.field; // 获取表单字段值
                            // 此处可执行 Ajax 等操作
                            $.post("/index/update.do",field,function(res){
                                if(res.code ==200){
                                    layer.msg(res.msg);
                                    //关闭userForm
                                    layer.closeAll();
                                    //刷新表格
                                    table.reload('test');
                                }else{
                                    layer.msg(res)
                            return false; // 阻止默认 form 跳转
        // 监听表格分页事件
        table.on('page(test)', function(obj){
            console.log(obj); // obj 包含了当前分页的所有参数，比如 obj.curr 当前页码
            // 可以在这里发送请求，重新加载表格数据
            // 例如：
            table.reload('test', {
                // console.log(obj.curr, obj.limit);
                where: {
                    page: obj.curr, // 重新指定页码
                    limit: obj.limit // 重新指定每页显示条数
</script>
</body>
</html>