技術標籤：前端相關html

在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>

效果：