前端常见问题整理（十一）

1、页面数据不允许修改实现

页面中修改数据，若数据不允许被修改，有两种实现方式：

1、将type改为type="hidden";(隐藏)
2、加上属性：readonly="readonly"

 2、bootstrap隐藏不占空间

<table id="syndatamonitortable"
       class="table table-bordered table-hover table-striped"
       style="word-break: break-all;word-wrap: break-word;white-space: nowrap;">
    <thead style="white-space: nowrap;">
    <tr>
        <th style="text-align: center;display:none ">唯一性标识</th>
        <th style="text-align: center">同步日期</th>
        <th style="text-align: center">传输状态</th>
        <th style="text-align: center">临分未到期表</th>
        <th style="text-align: center">临分已未决</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

 3、bootstrap隐藏占空间

<table id="syndatamonitortable"
       class="table table-bordered table-hover table-striped"
       style="word-break: break-all;word-wrap: break-word;white-space: nowrap;">
    <thead style="white-space: nowrap;">
    <tr>
        <th style="text-align: center;visibility:hidden; ">唯一性标识</th>
        <th style="text-align: center">同步日期</th>
        <th style="text-align: center">传输状态</th>
        <th style="text-align: center">临分未到期表</th>
        <th style="text-align: center">临分已未决</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

4、bootstraptable表格columns 隐藏方法

隐藏：  visible: false,

显示：visible: true,
visible属性没有true或者false，是visible,invisible和gone。
visible：可见的；
invisible：不可见，但占空间；
gone：不可见，也不占空间，控件从布局上消失了。

//监控表列
    var syndatamonitorcolum = [
        {
            "data": "uuid",
            "class": "center",
            "orderable": false,
             visible:false
        },
        {
            "data": "syndate",
            "class": "center",
            "orderable": false,
            "render": function (data, type, row) {
                return new Date(data).Format("yyyy-MM-dd");
            }
        },
        {
            "data": "status",
            "orderable": false,
            "class": "center",
            "render": function (data, type, row) {

                if ("1" === data) {
                    return '同步成功';
                } else {
                    return '异常';
                }
            }
        },
        {
            "data": "zrjunearnedfacNum",
            "orderable": false,
            "class": "center"
        },

        {
            "data": "zrjoutstandingfacNum",
            "orderable": false,
            "class": "center"
        },

        {
            "data": "status",
            "class": "center",
            "render": function (data, type, row) {
                    return '<button type="button" class="btn btn-default  btn-sm" style="margin-right:15px;"  onclick="getReportLogData(this);">查看日志</button>';
            }
        }
    ];

由于设置了隐藏属性：

visible:false

由于因为该uuiid列设置为隐藏后,在页面就没有dom节点，所以使用jquery获取不到该uuidid的值

使用下面的方法就可以获取到uuiid

想要获得隐藏列的值可以通过下述方式：

//查询最新报文日志数据
    function getReportLogData(obj){
        //获取同步日期
        var rowIndex = $(obj).parents("tr").index();
        var uuid = $('#syndatamonitortable').DataTable().row(rowIndex).data().uuid;
        //alert(uuid);
        //var uuid = $(obj).parents("tr").find("td:first").text();//这里获取到的是没隐藏的第一列的值。
        var data = { "uuid": uuid };
        //alert(uuid);
        //查询前清空报文数据
        emptyData();
        $.ajax({
            type : "POST",
            url : '/getYylfInterfaceLog',
            data : data,
            datatype : 'json',
            success : function(result) {
                if(result != null){
                    $("#interfaceLog").css("display","block");
                    for(var i = 0; i<result.length;i++){
                        if(result[i].sendsystemcode == "YYLF"){
                            $("#reinsSendText").text(result[i].request);
                            $("#reinsReturnText").text(result[i].response);
                        }
                    }
                }else{
                    $("#interfaceLog").css("display","block");
                    emptyData();
                }

            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                alert("数据加载失败!");
                $("#interfaceLog").css("display","none");
            }
        });
    }