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

最新推荐文章于 2024-07-10 19:56:48 发布
最新推荐文章于 2024-07-10 19:56:48 发布
阅读量1.9k 收藏 4
点赞数
分类专栏： js 文章标签： 查询页面的加载 bootstrap layer弹出窗 table加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40680190/article/details/80319830
版权

加载查询页面

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 ;
                        }
                    } ]
            });
}//列表面的复选框
                    },
                    {
                        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" οnmοuseοver="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="接单记录" οnclick="getOrder(\''
                                + row.userId
                                + '\')">接单记录</a> ';
                            var b = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="签到记录" οnclick="signIn(\''
                                + row.userId
                                + '\')">签到记录</a> ';
                            var c = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="评价记录" οnclick="evaluateInfo(\''
                                + row.userId
                                + '\')">评价记录</a> ';
                            var d = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="分值记录" οnclick="getScore(\''
                                + row.userId
                                + '\')">分值记录</a> ';
                            var e = '<a class="btn btn-warning btn-sm " href="#" title="编辑资料"  mce_href="#" οnclick="editData(\''
                                + row.userId
                                + '\')">编辑资料</a> ';
                            var state=row.stopOrderStatet;
                            var f;
                            if(state=="正常"){
                                f = '<a class="btn btn-success btn-sm" href="#" title="停单"  mce_href="#" οnclick="resetstateEnd(\''
                                    + row.userId
                                    + '\')">停       单</a> ';
                            }else{
                                f = '<a class="btn btn-success btn-sm" href="#" title="恢复接单"  mce_href="#" οnclick="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);
                }
            }
        });
    })
}//弹出确认框
        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');
<span style="color:#cc33cc">//#exampleTable  为table的id</span>
<span style="color:#cc33cc">//.bootstrapTable('refresh')    bootstrapTable的刷新方法</span>

}

弹出选项卡

 

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);
}
//此方法会请求后台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框架制作查询页面的界面实例代码
09-02
主要介绍了使用Bootstrap框架制作查询页面界面的效果，本文以职业技能考证分数查询界面为例，通过实例代码给大家详细介绍,需要的朋友可以参考下
弹出层（点击按钮，弹出页面）
热门推荐
菜鸟猿小天
05-07 3万+
点击一个按钮，然后在当页弹出一个table表格。&lt;!DOCTYPE html&gt; &lt;html &gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script src="js/jquery-3.2.1.min.js
Bootstrap 弹框：属性控制显示与隐藏
最新发布
听海边涛声
07-10 415
Bootstrap 弹框：属性控制显示与隐藏
Bootstrap编写弹出窗
Garnett_zk的博客
10-14 565
弹出窗环境HTML代码的实现JS代码效果注意事项 环境 需要引入的环境： 1.引入jquery-3.2.1.min.js 2.引入bootstrap.js HTML代码的实现 <!-- 添加参会人员弹窗 --> <div class="modal fade " id="toSensor" tabindex="-1" role="dialog" style="margin-lef...
bootstrap的弹出窗体操作
lxyforever5的博客
04-11 2390
2.点击事件后打开窗口，通过show进行打开，dlgAddOpenWindow是需要进行弹窗的标签Id。4.弹框显现隐藏时会触发的操作（是在父页面进行的操作）1.以a标签为例，设置为弹窗操作。3.需要弹窗的内容结构。
Bootstrap弹出框
07-18
Bootstrap弹出框
bootstrap实现点击删除按钮弹出确认框的实例代码
10-18
以上是实现Bootstrap模态对话框弹出确认框的基本知识点。接下来，让我们关注实例代码中的具体实现： ```html 删除 ``` 按钮设置为`data-toggle="modal"`和`data-target="#myModal"`，意味着点击这个按钮将会触发ID...
Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的示例代码
10-14
需要强调的是，虽然示例代码仅适用于使用Bootstrap框架的网页，但实现告警框弹出和消失的原理可以应用于任何前端框架或原生JavaScript开发的网页中，只需适当地调整代码和使用对应的DOM操作技术即可。此外，实现这一...
Bootstrap按钮功能之查询按钮和重置按钮
09-01
在本篇文章中，我们将探讨如何在Bootstrap中实现查询按钮和重置按钮的功能，这对于创建具有交互性的查询列表至关重要。 1. **问题背景** 在很多Web应用中，用户需要根据特定条件查询数据，通常会看到包含查询条件...
关于Bootstrap弹出框无法调用问题的解决办法
11-23
首先，Bootstrap的弹出框功能是基于jQuery构建的，因此在使用Bootstrap弹出框之前，必须确保jQuery已经被正确地引入到页面中。Bootstrap的JavaScript组件依赖于jQuery，如果jQuery没有先于Bootstrap的JS文件加载，...
简介BootStrap model弹出框的使用
09-02
Bootstrap Model弹出框是Bootstrap框架中的一个重要组件，用于创建模态对话框，即在当前页面上弹出一个浮动窗口，用户可以在不离开当前页面的情况下查看或操作内容。它提供了丰富的功能，包括自定义内容、控制行为...
Bootstrap点击弹出层用户登录窗口模板.zip
05-23
Bootstrap点击弹出层用户登录窗口模板基于Bootstrap3.3.5制作，简单实用。
Bootstrap使用alert弹出窗（含js）
TinpeaV的博客
07-21 6026
在系统开发的时候想搞一个登录成功或失败的弹出窗，原生js的alert又显得太俗了。刚好使用的前端框架是Bootstrap，可是Bootstrap里面的alert模块只提供了css样式，并没有js。所有终于让我找到了完整可以使用的bootstrap的alert。......
bootstrap 解决弹出窗口(modal) 常见问题
qq_38472451的博客
06-05 211
bootstrap 解决弹出窗口(modal) 常见问题
Bootstrap系列之弹出框（Popovers）
老__L的博客
06-19 1万+
使用弹窗插件时要知道的事情弹出框依赖于第三方库Popper进行定位。你必须在之前包含或使用/，其中包含Popper以便弹出框工作；弹出框需要tooltip插件作为依赖项；如果您从源代码构建我们的JavaScript，它需要util.js；由于性能原因，弹窗是可选择的，所以您必须自己初始化它们；零长度的标题和内容值将永远不会显示弹出框；指定以避免在更复杂的组件(如输入组、按钮组等)中呈现问题；在隐藏元素上触发弹窗将不起作用；.disabled或disabled。
使用bootstrap-table点击不同的按钮切换接口并渲染新的页面
weixin_43801572的博客
09-26 2218
需求是这样的：点击这个button按钮组，实现不同数据的页面展示。 （其实真的很简单，奈何自己经验太少了QAQ ） Html代码如下，我直接拷贝过来的，可能有一些自己的样式，不影响功能。 <div class="search-area"> <div> <div data-togg...
bootstrap Model 点击确定按钮后 转到新页面
Ichimaru_Gin_的博客
03-16 5170
我们在中文文档或是一些教程上看到的Model案例的footer部分大都是这样写的： 确定 这样子点击确定按钮后，网站就会跳转到一个新的空白页，原因就是 a标签的href="#"属性。 解决方法很简单： 保存
Bootstrap 5 保姆级教程（十二）：弹出框 & 消息弹窗
Flag少侠的博客
04-21 2023
通过向元素添加 data-bs-toggle="popover" 来来创建弹出框。弹出框要写在 JavaScript 的初始化代码里。
JS组件Bootstrap实现弹出框和提示框效果代码
lgxzzz的博客
09-09 8218
前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两种处理方式：行内编辑和弹出框编辑。在增加用户体验方面，弹出框和提示框起着重要的作用，如果你的系统有一个友好的弹出提示框，自然能给用户很好的页面体验。前面几章介绍了bootstrap的几个常用组件，这章来看看bootstrap里面弹出框和提示框的处理。总的来说，弹出提示主要分为三种：弹出框、确定取消提示框、信息提示框。本篇就结合这三种类型分别来介绍下它们的使用。 一、Bootstrap弹出框 使用过
Bootstrap实现弹出框效果：JS组件教程
接下来，Bootstrap的工具提示和弹出框的data属性API不是默认激活的，这意味着开发者需要手动通过JavaScript初始化它们，以避免对页面性能造成不必要的影响。可以使用`$(function () { $('[data-toggle="popover"]')....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值