Layui表格头部工具栏取消默认的三个功能

简介: Layui表格头部工具栏取消默认的三个功能

在toolbar开启的状态下,通过配置defaultToolbar: [] 可以取消默认的所有功能,默认开启的是所有的defaultToolbar: [ ‘filter’, ‘print’, ‘exports’]

layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/zjjgx/getData'
            ,toolbar: '#toolbarDemo' //开启头部工具栏
            ,defaultToolbar: []
            ,title: '资金监管箱'
            ,cols: [
                [
                    {type: 'radio', fixed: 'left'}
                    ,{field:'', title:'序号', width:50,type:'numbers', fixed: 'left'}
                    ,{field:'djbh', title:'登记编号', width:100,sort:true}
                    ,{field:'xybh', title:'协议编号',event:'xybh', width:100}
                    ,{field:'ywxx', title:'业务细项', width:100}
                    ,{field:'zrf', title:'转让方', width:100}
                    ,{field:'srf', title:'受让方', width:100}
                    ,{field:'zqr', title:'支取人', width:100}
                    ,{field:'fwzl', title:'房屋坐落', width:100}
                    ,{field:'qzhm', title:'权证号码', width:100}
                    ,{field:'htbh', title:'合同编号', width:100,sort:true}
                    ,{field:'dqblr', title:'当前办理人', width:100}
                    ,{field:'bldw', title:'办理单位', width:100}
                    ,{field:'qdrq', title:'签订日期', width:100}
                    ,{field:'sfcx', title:'是否撤销', width:100}
                ]
            ]
            ,page: true
        });
        //监听行单击事件(双击事件为:rowDouble)
        table.on('tool(test)', function(obj){
            var xybh = obj.data.xybh;
            if (obj.event === 'xybh') {
                layer.open({
                    title: "资金监管",
                    //调整弹框的大小
                    area: ['1100px', '550px'],
                    shadeClose: false,//点击旁边地方自动关闭
                    //动画
                    anim: 2,
                    //弹出层的基本类型
                    type: 2,
                    //刚才定义的弹窗页面
                    content: '../zjjgx/findZjjgxyByXybh?xybh=' + xybh,
                    //关闭子页面后,刷新原页面
                    end: function () {
                        location.reload();
                    }
                });
            }
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            //查阅功能
            if (obj.event === 'searchData'){
                var searchDjbh = $("#searchDjbh").val(); //登记编号
                var searchXybh = $("#searchXybh").val(); //协议编号
                var searchHtbh = $("#searchHtbh").val(); //合同编号
                //将数据提交到后台
                $.ajax({
                    url: '../zjjgx/searchData?searchDjbh='+searchDjbh+'&searchXybh='+searchXybh+'&searchHtbh='+searchHtbh,
                    dataType: 'json',
                    success: function (obj) {
                        if (obj.success){
                            location.reload();
                        }else {
                            location.reload();
                        }
                    },
                    error: function () {
                        location.reload();
                    }
                });
            }
            //清空功能
            if (obj.event === 'emptySearch'){
                $("#searchDjbh").val(""); //登记编号
                $("#searchXybh").val(""); //协议编号
                $("#searchHtbh").val(""); //合同编号
            }
            //撤销功能
            if (obj.event === 'getCheckData'){
                layer.confirm('确认撤销吗?', {icon: 3, title:'提示'}, function(){
                    var data = checkStatus.data;
                    var s = JSON.stringify(data);
                    $.ajax({
                        url:'../zjjgx/cxZjjgx',
                        data: {'zjjgx':s},
                        type: 'post',
                        dataType :'json',
                        success: function (obj) {
                            if (obj.success){
                                layer.alert(obj.msg,'',function () {
                                    location.reload();
                                });
                            }else {
                                layer.alert(obj.msg,'',function () {
                                    location.reload();
                                });
                            }
                        },
                        error: function () {
                            layer.alert("后台出错,请联系管理员",'',function () {
                                location.reload();
                            });
                        }
                    });
                });
            }
            //资金监管协议添加功能
            if (obj.event === 'zjjgxyAdd'){
                layer.open({
                    title : "资金监管",
                    //调整弹框的大小
                    area:['1100px','550px'],
                    shadeClose:false,//点击旁边地方自动关闭
                    //动画
                    anim:2,
                    //弹出层的基本类型
                    type: 2,
                    //刚才定义的弹窗页面
                    content: '../zjjgx/zjjgxyAdd',
                    //关闭子页面后,刷新原页面
                    end: function () {
                        location.reload();
                    }
                });
            }
        });
    });


toolbar: ‘#toolbarDemo’ //开启头部工具栏,是定义在script标签内部的自定义头部栏

<script type="text/html" id="toolbarDemo">
    <div style="padding-top: 10px">
        &nbsp;&nbsp;
        <label>登记编号</label>
        <input type="text" name="searchDjbh" id="searchDjbh" style="width: 100px">
        &nbsp;&nbsp;
        <label>协议编号</label>
        <input type="text" name="searchXybh" id="searchXybh" style="width: 100px">
        &nbsp;&nbsp;
        <label>合同编号</label>
        <input type="text" name="searchHtbh" id="searchHtbh" style="width: 100px">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="layui-btn layui-btn-sm" lay-event="searchData">查阅</button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="emptySearch">清空</button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="getCheckData">撤销</button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="zjjgxyAdd">签订</button>
    </div>
</script>


效果:


20201228154350356.png

相关文章
|
容器
layui组件table定时刷新的解决方案
layui组件table定时刷新的解决方案
558 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
3888 0
|
安全 网络协议 搜索推荐
远控安全金标准,ToDesk、向日葵、网易UU安全功能盘点,是否能攻破防线
本文对ToDesk、向日葵和网易UU三款主流远程控制软件进行了安全性评测。远程控制技术虽带来便利,但也存在安全隐患。文章从设备授权管理、远程连接与数据传输、隐私安全机制及主动防诈保护四个方面展开分析。ToDesk在二次验证、金融窗口保护等方面表现突出;向日葵基础安全功能完善但缺乏创新;网易UU侧重基础功能,安全机制尚待完善。最终通过星级表对比,ToDesk综合表现最佳,向日葵次之,网易UU适合低风险场景。未来远控软件需向体系化、智能化方向发展以应对不断演变的威胁。
|
JSON 前端开发 JavaScript
js中await用法
js中await用法
458 0
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
4517 1
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
689 2
微信登陆报错:redirect_uri域名与后台配置不一致,错误码:10003 微信支付报错 微信登录报错 微信开发
微信登陆报错:redirect_uri域名与后台配置不一致,错误码:10003 微信支付报错 微信登录报错 微信开发
3235 0
|
JSON 前端开发 JavaScript
layui-数据表格的实现
`layui`是一个前端UI框架,本文档介绍了如何使用layui创建数据表格。首先展示了三张截图来预览效果,接着讲解了下载layui资源包并导入到项目中的步骤。然后,在新建的web项目中引入layui的CSS和JS文件。文档提供了模拟的JSON数据来展示表格内容。接下来,详细说明了数据表格的实现,包括注意事项和代码实现,强调了`table`标签的`id`与`script`中`elem`的匹配。此外,文档还涵盖了监听头部工具栏和工具条事件的方法,并展示了弹出层的实现,用于添加和编辑表格数据。最后,给出了完整的HTML源码示例。
778 0
|
前端开发 JavaScript 开发工具
前端|layui后台管理—table 数据表格
前端|layui后台管理—table 数据表格
1005 0

热门文章

最新文章