前端表格操作注意事项

2018-08-29  本文已影响0人  BrightHeart

Layer进行删除时,弹出框进行确认是否删除

1.删除按钮添加onclick
<a class="btn btn-xs btn-danger" data-toggle="modal"  th:onclick="'javascript:DeletePro('+${project.projectId}+');'">删除</a>
2.编写按钮中添加的onclick中的DeletePro
function DeletePro(pId){
        layer.open({
            title:'删除项目',
            content:'请确认是否删除',
            yes: function (index,layero) {
                $.post('/admin/project/delete',{pId:pId}).done(function (date) {
                    if (date.state == "success"){
                        layer.msg("删除成功",{
                            time:1000
                        },function () {
                            window.location.href = "/admin/project/project";
                        })
                    }
                }).error(function () {
                    layer.msg("服务器异常");
                });
                layer.close(index);
            }
        });
    }
3.注意事项
layer.open({
  content: '测试回调',
  yes: function(index, layero){  //function()中第二个参数是layero不是layer
    //do something
    layer.close(index); //如果设定了yes回调,需进行手工关闭
  }
});   

模态框查看详细信息

1. 在每一行的查看按钮添加onclick
<a class="btn btn-xs btn-success" data-toggle="modal" th:onclick="'javascript:UpdatePro('+${project.projectId}+');'">修改</a>
2. 编写按钮中添加的onclick中的SelectPro,利用AJAX异步登录获取数 据,添加到模态框
 function SelectPro(pId){

        $.ajax({
            url:'/admin/project/select',
            async:false,
            type:'get',
            data:{pId:pId},
            success:function(date) {
                $("#projectId").val(date.projectId);
                $("#projectId").attr("readonly","readonly"); //让input框变为不可编辑状态
                $("#projectName").val(date.projectName);
                $("#projectName").attr("readonly","readonly");
                $("#projectBrief").val(date.projectBrief);
                $("#projectBrief").attr("readonly","readonly");
                $("#projectBewrite").val(date.projectBewrite);
                $("#projectBewrite").attr("readonly","readonly");
                $("#startTime").val(date.startTime);
                $("#startTime") .attr("readonly","readonly");
                $("#planTime").val(date.planTime);
                $("#planTime").attr("readonly","readonly");
                $("#overTime").val(date.overTime);
                $("#overTime").attr("readonly","readonly");
                $("#projectType").val(date.projectType);
                $("#projectType").attr("disabled","disabled");  //让select框无法编辑

                var names="";
                for (var i = 0;i < date.userList.length;i++){
                    names += date.userList[i].userName + ",";
                }
                names = names.substring(0,names.length - 1);  //subString方法截取字符串subString(start,end)
                $("#user").val(names);
                $("#user").attr("readonly","readonly");

                $("#projecrModal").modal("show");//先给模态框内赋值,再让模态框显示
                $("#overTime").show(); //让表单提交按钮显示出来,隐藏则hide();
                $("#proBtn").hide();

            }
        })

    }
上一篇下一篇

猜你喜欢

热点阅读