关于bootstrap的查询页面和页面的按钮弹出

加载查询页面

function load() {
    selectdept();
    selectjob();
    $('#exampleTable')
        .bootstrapTable(
            {
                method : 'get', // 服务器数据的请求方式 get or post
                url : prefix + "/list", // 服务器数据的加载地址
                //	showRefresh : true,
                //	showToggle : true,
                //	showColumns : true,
                iconSize : 'outline',
                toolbar : '#exampleToolbar',
                striped : true, // 设置为true会有隔行变色效果
                dataType : "json", // 服务器返回的数据类型
                pagination : true, // 设置为true会在底部显示分页条
                // queryParamsType : "limit",
                // //设置为limit则会发送符合RESTFull格式的参数
                singleSelect : false, // 设置为true将禁止多选
                // contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageSize : 10, // 如果设置了分页,每页数据条数
                pageNumber : 1, // 如果设置了分布,首页页码
                //search : true, // 是否显示搜索框
                showColumns : false, // 是否显示内容下拉框(选择显示的列)
                sidePagination : "server", // 设置在哪里进行分页,可选值为"client" 或者 "server"
                queryParams : function(params) {
                    return {
                        //说明:传入后台的参数包括offset开始索引,limit步长,sort排序列,order:desc或者,以及所有列的键值对
                        limit: params.limit,
                        offset:params.offset,
                        mobile:"%"+$('#mobile').val()+"%",         //模糊查询
                        username:"%"+$('#username').val()+"%",
                        deptId:$('#deptId').val(),
                        areaId:$('#areaId').val(),
                        stopOrderState:$('#stopOrderState').val(),
                        star:$('#star').val(),
                        workerPropertie:$('#workerPropertie').val(),
                        sourcesOfEmployees:$('#sourcesOfEmployees').val(),
                        orderStatus:$('#orderStatus').val(),
                        identity:$('#identity').val(),
                        registStatus:$('#registStatus').val(),
                        workPackage:$('#workPackage').val(),
                        isidcard:$('#isidcard').val(),
                        job:$('#job').val(),
                        isbankcard:$('#isbankcard').val(),
                        idcardNo:$('#idcardNo').val(),
                    };
                },
                // //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果
                // queryParamsType = 'limit' ,返回参数必须包含
                // limit, offset, search, sort, order 否则, 需要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false将会终止请求
                columns : [
                    {
                        checkbox : true         //列表面的复选框
                    },
                    {
                        field : 'userId',       //字段名称必须和实体类属性一致
                        title : '账号ID',
                        width: 60              //td的宽度,要想起作用,需要在html中style标签中添加下面的.table
                    },
                    {
                        field : 'userNo',
                        title : '员工编号',
                        width: 75
                    },
                    {
                        field : 'username',
                        title : '姓名',
                        width: 75
                    },
                    {
                        field : 'mobile',
                        title : '手机号',
                        width: 100
                    },
                    {
                        field : 'workerPropertie',
                        title : '工人属性',
                        width: 80
                    },
                    {
                        field : 'job',
                        title : '工种',
                        width: 60
                    },
                    {
                        field : 'star',
                        title : '星级',
                        width: 45
                    },
                    {
                        field : 'score',
                        title : '分值',
                        width: 45
                    },
                    {
                        field : 'workPackage',
                        title : '可接任务包' ,
                        align : 'center',          //字段在td中居中
                        width: 300
                    },
                    {
                        field : 'jobgroup',
                        title : '施工组',
                        width: 75
                    },
                    {
                        field : 'identity',
                        title : '身份',
                        width: 45
                    },
                    {
                        field : 'areaName',
                        title : '接单区域',
                        align : 'center',
                        width: 150
                    },
                    {
                        field : 'orderStatust',
                        title : '接单状态',
                        width: 75
                    },
                    {
                        field : 'registStatust',
                        title : '认证状态',
                        width: 75
                    },
                    {
                        field : 'stopOrderStatet',
                        title : '停单状态' ,
			width: 75,
                        formatter : function(value, row, index) {     //回调函数,可以在函数中队对返回的数据进行处理
                            var state=row.stopOrderStatet;
                            var f;
                            var b;
                            if(state=="停单"){
                                b='<span style="color:red;">'+state+'</span>'
                                f = '<a  href="#" title="停单"  mce_href="#" ></a>   ' +
                                    '<span class="glyphicon glyphicon-info-sign" onmouseover="stopOrderState(\''
                                    + row.userId
                                    + '\')"></span> ';
                            }else{
                                b='<span style="color:#00EC00;">'+state+'</span>'
                                f = '<a  href="#" title="正常"  mce_href="#" ></a>';
                            }
                            return b+f ;
                        }
                    },
                    {
                        field : 'isidcard',
                        title : '绑身份证',
                        width: 75
                    },
                    {
                        field : 'isbankcard',
                        title : '绑银行卡',
                        width: 75
                    },
                    {
                        field : 'idcardNo',
                        title : '关联身份证',
                        width: 85
                    },
                    {
                        field : 'sourcesOfEmployees',
                        title : '工人来源',
                        width: 75
                    },
                    {
                        field : 'recommendedNumber',
                        title : '推荐员工数',
                        width: 85
                    },
                    {
                        title : '操作',
                        field : 'userId',
                        align : 'center',
			width:500,
                        formatter : function(value, row, index) {
                            var a = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="接单记录" onclick="getOrder(\''
                                + row.userId
                                + '\')">接单记录</a> ';
                            var b = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="签到记录" onclick="signIn(\''
                                + row.userId
                                + '\')">签到记录</a> ';
                            var c = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="评价记录" onclick="evaluateInfo(\''
                                + row.userId
                                + '\')">评价记录</a> ';
                            var d = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="分值记录" onclick="getScore(\''
                                + row.userId
                                + '\')">分值记录</a> ';
                            var e = '<a class="btn btn-warning btn-sm " href="#" title="编辑资料"  mce_href="#" onclick="editData(\''
                                + row.userId
                                + '\')">编辑资料</a> ';
                            var state=row.stopOrderStatet;
                            var f;
                            if(state=="正常"){
                                f = '<a class="btn btn-success btn-sm" href="#" title="停单"  mce_href="#" onclick="resetstateEnd(\''
                                    + row.userId
                                    + '\')">停       单</a> ';
                            }else{
                                f = '<a class="btn btn-success btn-sm" href="#" title="恢复接单"  mce_href="#" onclick="resetstate(\''
                                    + row.userId
                                    + '\')">恢复接单</a> ';
                            }


                            return a+b+c+d+e+f ;
                        }
                    } ]
            });
}
.table {
 table-layout: fixed;
}

查询页面的添加按钮函数

function add() {
    layer.open({                 //layui的函数 需要引入layui的js和css
        type : 2,                //类型为2  是弹窗
        title : '用户详情',       //弹窗标题
        maxmin : true,
        shadeClose : true, // 点击遮罩关闭层
        area : [ '1000px', '520px' ],         //弹窗的大小面积,可以调
        content : '/shop/baseBankcard/emadd'  // iframe的url       
    });
}

弹出消息对话框选择修改数据

function resetstate(id) {
    layer.confirm('确定要恢复接单?', {               //弹出确认框
        btn : [ '确定', '取消' ]
    }, function() {                                 //确定走下面的ajax请求
        $.ajax({
            url : prefix+"/resetOrderStatus/"+id,
            type : "get",
            data : {
                'id' : id
            },
            success : function(r) {
                if (r.code==0) {
                    layer.msg(r.msg);              //在页面中间弹出返回消息
                    reLoad();
                }else{
                    layer.msg(r.msg);
                }
            }
        });
    })
}

刷新当前页面的table表中的数据

function reLoad() {
    $('#exampleTable').bootstrapTable('refresh');
//#exampleTable  为table的id
//.bootstrapTable('refresh')    bootstrapTable的刷新方法

}

弹出选项卡

function getScoreList(id) {       //此方法会请求后台2次
    var dataUrl = "/cms/baseInfo2/workerScoreAlter";     //后台的请求URL
    $.ajax({          //如果不需要传参数,这里可以去掉,就会请求一次后台
        url: dataUrl,
        data: {
            userId: id
        }
    });
    var elements = $('.J_iframe', parent.document);   //获取所有选项卡元素
    for (var i = 0; i < elements.length; i++) {       //遍历所有选项卡
        if (elements[i].src.indexOf(dataUrl) > 0) {   //选项卡的索引大于0
            // 选项卡菜单已存在删除
            var closeTabId = $(this).parents('.J_menuTab', parent.document).data('id');
            $('.J_menuTab', parent.document).each(function () {
                if ($(this).data('id') == dataUrl) {
                    //  移除当前选项卡
                    $(this).remove();
                    // 移除tab对应的内容区
                    $('.J_mainContent .J_iframe').each(function () {
                        if ($(this).data('id') == closeTabId) {
                            $(this).remove();
                            return false;
                        }
                    });
                }
            });
        }
    }
    var str = '<a href="javascript:;" class="active J_menuTab" data-id=' + dataUrl + '>' + "工人分值变更记录" + ' <i class="fa fa-times-circle"></i></a>';
    $('.J_menuTab', parent.document).removeClass('active');
    // 添加选项卡对应的iframe
    var str1 = '<iframe class="J_iframe" name="iframeundefined" width="100%" height="100%" src=\"' + dataUrl + '\" frameborder="0" data-id=\"' + dataUrl + '\" seamless></iframe>';
    $('.J_mainContent', parent.document).find('iframe.J_iframe', parent.document).hide().parents('.J_mainContent', parent.document).append(str1);
    // 添加选项卡
    $('.J_menuTabs .page-tabs-content', parent.document).append(str);
}

阅读更多
文章标签: 查询页面的加载
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

关于bootstrap的查询页面和页面的按钮弹出

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭