美文网首页
前端表格操作注意事项

前端表格操作注意事项

作者: BrightHeart | 来源:发表于2018-08-29 11:57 被阅读0次

    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();
    
                }
            })
    
        }
    

    相关文章

      网友评论

          本文标题:前端表格操作注意事项

          本文链接:https://www.haomeiwen.com/subject/enmhwftx.html