前端框架学习随笔

jquey-serializejson.js(可以将from表单数据转换为json数据)

                                 var search = $("#from").serializeJSON();

LayerUI

//layer弹窗小案例

function showOrderInfo(oid){

    $.post(

        "${pageContext.request.contextPath}/AdminOrderServlet",

        {method:"showOrderInfoByOid","oid":oid},

        function(data){

            var state=data.state;

            var oid = data.oid;

            tab="<table align='center' class='table table-bordered table-striped'><tobdy><th>商品名称</th><th>购买数量</th><th>小计</th>";

            $.each(data.orderItemList,function(index,node){

                tab+=("<tr><td>"+node.product.pname+"</td><td>"+node.count+"</td><td>"+node.subtotal+"</td></tr>");

            }) 

            var sta;

            switch(state){

            case 0:

                sta="确认付款";

                break;

            case 1:

                sta="确认发货";

                break;

            case 2:

                sta="确认收货";

                break;

            default:

                break;

            }

            if(sta!=null){

                //弹出框给个单击按钮

                tab+="<tr><td colspan='3' align ='right'><button type='button' class='btn btn-info btn-sm' onclick="+"changeState('"+oid+"')"+">"+sta+"</button></td>";

            }

            tab+="</tbody></table>"

            show(tab);

        },

        "json"

    )

    

}

function show(tab){

    layer.open({

        type: 1, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

        title: '订单详情',//标题

        shadeClose: true,//点击关闭遮罩效果

        shade :0.3,//设置遮罩效果

        maxmin: true, //开启最大化最小化按钮

        area: ['550px', '270px'],//设置宽高

        offset: '100px',//设置距离顶端的间距(坐标)

        closeBtn:2,//取消右上角的关闭功能

        content: tab  //内容

    });

}

 

转载于:https://www.cnblogs.com/zhouzheng910/p/6575480.html