sg_audit/src/main/webapp/webpage/modules/cg/statisticalTable/cable/cable.js

<%@ page contentType="text/html;charset=UTF-8" %>
<script >
$(document).ready(function () {
    $('#projectTable').bootstrapTable({
        //请求方法
        method: 'post',
        //类型json
        dataType: "json",
        contentType: "application/x-www-form-urlencoded",
        //显示检索按钮
        showSearch: true,
        //显示刷新按钮
        showRefresh: true,
        //显示切换手机试图按钮
        showToggle: true,
        //显示 内容列下拉框
        showColumns: true,
        //显示到处按钮
        showExport: true,
        //显示切换分页按钮
        showPaginationSwitch: true,
        //最低显示2行
        minimumCountColumns: 2,
        //是否显示行间隔色
        striped: true,
        //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        cache: false,
        //是否显示分页（*）
        pagination: true,
        //排序方式
        sortOrder: "asc",
        //初始化加载第一页，默认第一页
        pageNumber: 1,
        //每页的记录行数（*）
        pageSize: 5,
        //可供选择的每页的行数（*）
        pageList: [5, 10, 25, 50, 100],
        //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
        url: "${ctx}/cg/reservemanagementcenter/cable/list",
        //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
        //queryParamsType:'',
        ////查询参数,每次调用是会带上这个参数，可自定义
        queryParams: function (params) {
            var searchParam = $("#searchForm").serializeJSON();
            searchParam.pageNo = params.limit === undefined ? "1" : params.offset / params.limit + 1;
            searchParam.pageSize = params.limit === undefined ? -1 : params.limit;
            searchParam.orderBy = params.sort === undefined ? "" : params.sort + " " + params.order;
            return searchParam;
        },
        //分页方式：client客户端分页，server服务端分页（*）
        sidePagination: "server",
        contextMenuTrigger: "right",//pc端 按右键弹出菜单
        contextMenuTriggerMobile: "press",//手机端 弹出菜单，click：单击， press：长按。
        contextMenu: '#context-menu',
        onContextMenuItem: function (row, $el) {
            if ($el.data("item") == "edit") {
                edit(row.id);
            } else if ($el.data("item") == "view") {
                view(row.id);
            } else if ($el.data("item") == "delete") {
                jp.confirm('确认要删除该表单记录吗？', function () {
                    jp.loading();
                    jp.get("${ctx}/cg/reservemanagementcenter/project/delete?id=" + row.id, function (data) {
                        if (data.success) {
                            $('#projectTable').bootstrapTable('refresh');
                            jp.success(data.msg);
                        } else {
                            jp.error(data.msg);
                        }
                    })
                });
            }
        },

        onClickRow: function (row, $el) {
        },
        onShowSearch: function () {
            $("#search-collapse").slideToggle();
        },
        columns:
            [
                [
                    {checkbox:true,width: 36},
                    {"title":"储备项目基本信息","colspan":12,"halign":"center","align": "center",width: "2400px"},
                ],
                [
                    {checkbox:true,width: 36},
                    { field: 'projectReserveId', title: "储备编号", valign:"middle", align:"center", colspan: 1 },
                    { field: 'projectName', title: "项目名称", valign:"middle", align:"center", colspan: 1 ,formatter:paramsMatter},
                    { field: 'specifications', title: "电缆规格型号", valign:"middle", align:"center", colspan: 1 },
                    { field: 'civilEngineer', title: "是否含土建", valign:"middle", align:"center", colspan: 1 },
                    { field: 'pipeLayeCable', title: "是否在现有管道施放电缆", valign:"middle", align:"center", colspan: 1 },
                    { field: 'completePipe', title: "是否完成通管", valign:"middle", align:"center", colspan: 1 },
                    { field: 'completeMeasurement', title: "是否完成实测", valign:"middle", align:"center", colspan: 1 },
                    { field: 'measureLength', title: "实测长度", valign:"middle", align:"center", colspan: 1 },
                    { field: 'designCableLength', title: "设计电缆段长", valign:"middle", align:"center", colspan: 1 },
                    { field: 'segmentLengthClassinication', title: "段长分类", valign:"middle", align:"center", colspan: 1 },
                    { field: 'projectManager', title: "项目经理", valign:"middle", align:"center", colspan: 1 },
                    { field: 'remarks', title: "备注", valign:"middle", align:"center", colspan: 1 ,formatter:paramsMatter},

                ],

            ]
    });


    if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {//如果是移动端
        $('#projectTable').bootstrapTable("toggleView");
    }

    $('#projectTable').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () {
        $('#remove').prop('disabled', !$('#projectTable').bootstrapTable('getSelections').length);
        $('#view,#edit,#jlEdit').prop('disabled', $('#projectTable').bootstrapTable('getSelections').length != 1);
    });

    $("#btnImport").click(function () {
        jp.open({
            type: 2,
            area: [500, 200],
            auto: true,
            title: "导入数据",
            content: "${ctx}/tag/importExcel",
            btn: ['确定', '关闭'],
            btn1: function (index, layero) {
                var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                iframeWin.contentWindow.importExcel('${ctx}/cg/reservemanagementcenter/cable/import', function (data) {
                    if (data.success) {
                        jp.success(data.msg);
                        refresh();
                    } else {
                        jp.error(data.msg);
                    }
                    jp.close(index);
                });//调用保存事件
                return false;
            },
            btn2: function (index) {
                //  jp.close(index);
            }
        });
    });

    $("#jlImport").click(function () {
        jp.open({
            type: 2,
            area: [500, 200],
            auto: true,
            title: "导入数据",
            content: "${ctx}/tag/importExcel",
            btn: ['确定', '关闭'],
            btn1: function (index, layero) {
                var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                iframeWin.contentWindow.importExcel('${ctx}/cg/reservemanagementcenter/reserveManage/jlImport', function (data) {
                    if (data.success) {
                        jp.success(data.msg);
                        refresh();
                    } else {
                        jp.error(data.msg);
                    }
                    jp.close(index);
                });//调用保存事件
                return false;
            },

            btn2: function (index) {
                //  jp.close(index);
            }
        });
    });

    $("#btnExport").click(function () {
        var projectReserveId = $("#projectReserveId").val();
        var projectName = $("#projectName").val();
        console.log(projectReserveId)
        jp.downloadFile('${ctx}/cg/reservemanagementcenter/cable/export?projectReserveId=' + projectReserveId + '&projectName=' + projectName);
    });

    $("#search").click("click", function () {// 绑定查询按扭
        $('#projectTable').bootstrapTable('refresh');
    });

    $("#reset").click("click", function () {// 绑定查询按扭
        $("#searchForm  input").val("");
        $("#searchForm  select").val("");
        $("#searchForm  .select-item").html("");
        $('#projectTable').bootstrapTable('refresh');
    });

    $('#beginBeginDate').datetimepicker({
        format: "YYYY-MM-DD HH:mm:ss"
    });
    $('#endBeginDate').datetimepicker({
        format: "YYYY-MM-DD HH:mm:ss"
    });
    $('#endDate').datetimepicker({
        format: "YYYY-MM-DD HH:mm:ss"
    });
});

//表格超出宽度鼠标悬停显示td内容
function paramsMatter(value,row,index,field) {
    var span = document.createElement('span');
    span.setAttribute('title',value);
    span.innerHTML = value;
    return span.outerHTML;
}

function getIdSelections() {
    return $.map($("#projectTable").bootstrapTable('getSelections'), function (row) {
        return row.id
    });
}


//刷新列表
function refresh() {
    $('#projectTable').bootstrapTable('refresh');
}

function add() {
    jp.openSaveDialog('新增储备项目基本信息', "${ctx}/cg/reservemanagementcenter/reserveManage/form", '800px', '500px');
}


function edit(id) {//没有权限时，不显示确定按钮
    if (id == undefined) {
        id = getIdSelections();
    }
    jp.openSaveDialog('编辑储备项目基本信息', "${ctx}/cg/reservemanagementcenter/reserveManage/form?id=" + id, '800px', '500px');
}

function jlEdit(id) {//没有权限时，不显示确定按钮
    if (id == undefined) {
        id = getIdSelections();
    }
    jp.openSaveDialog('编辑储备项目基本信息', "${ctx}/cg/reservemanagementcenter/reserveManage/jlEdit?id=" + id, '800px', '500px');
}

function view(id) {//没有权限时，不显示确定按钮
    if (id == undefined) {
        id = getIdSelections();
    }
    jp.openViewDialog('查看储备项目基本信息', "${ctx}/cg/reservemanagementcenter/reserveManage/view?id=" + id, '800px', '500px');
}

function deleteAll(){

    jp.confirm('确认要删除该储备项目基本信息吗？', function(){
        jp.loading();
        jp.get("${ctx}/cg/reservemanagementcenter/cable/deleteAll?ids=" + getIdSelections(), function(data){
            if(data.success){
                $('#projectTable').bootstrapTable('refresh');
                jp.success(data.msg);
            }else{
                jp.error(data.msg);
            }
        })

    })
}
//转换日期格式(时间戳转换为datetime格式)
function changeDateFormat(cellval) {
    var dateVal = cellval + "";
    if (cellval != null) {
        var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

        /*var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();*/

        return date.getFullYear() + "-" + month + "-" + currentDate /*+ " " + hours + ":" + minutes + ":" + seconds*/;
    }
}

</script>