CSS整理

div居中

    .css{
        margin: 0 auto;
    }

ajax请求

    $.ajax({
            url: "/get/network",
            type: "GET", //请求类型
            dataType: "JSON",//返回数据类型
            contentType: "application/json;charset=UTF-8",//请求数据类型
            data: {"clientId": $("#clientId").val()},
            success: function (data, status, xhr) {

            },
            error: function (data) {

            }
        })

ajax发起请求时，contentType默认是 application/x-www-form-urlencode

display中 block和inline

block
1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度
2. block元素可以设置width,height属性。块级元素即使设置了宽度，仍然是独占一行。
3. block元素可以设置margin和padding属性。
常见的有：div p h1-h6 ol ul dl table blockquote form

---

inline 内联（行级）元素
1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2.inline元素设置width,height属性无效。
3.inline元素纵向的margin和padding不能设置值。
常见的有：span a strong em label input select textarea img br

文本居中

让height和line-height 相同

    text-vertical{
        height:30px;
        line-height:30px;
    }

定时器

    setInterval(function, 10000);

modelView前端数据接收

[[{data}]]

jqgrid插件使用

引入

<link rel="stylesheet" type="text/css" href="/jqgrid/css/ui.jqgrid-bootstrap-ui.css"/>
<link rel="stylesheet" type="text/css" href="/jqgrid/css/ui.jqgrid-bootstrap4.css"/>

<script src="/vendors/js/jquery.min.js"></script>
<script src="/vendors/js/bootstrap.min.js"></script>
<script src="/jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>

初始化

    var pager_selector = "#grid-pager";
    $(function () {
        $.jgrid.defaults.styleUI = 'Bootstrap4';
        $("#grid-table").jqGrid({
            url: "/rtupload/[[${clientId}]]" ,
            datatype: "json",
            mtype:"GET",
            autowidth: true,
            rowNum: 20,
            rowList: [10, 20, 30],
            height: 600,
            //multiselect: true,//是否多选
            prmNames: {sort: null, order: null, search:null , nd: null, page: "pageNum", rows: "pageSize"},
            colNames: ['设备ID', '接收时间', '', "操作"],
            colModel: [{
                name: 'clientId',
                index: 'clientId',
                editable: false,
                sortable: false,
                width: 150,
            }, {
                name: 'createTime',
                index: 'createTime',
                editable: false,
                sortable: false,
                width: 100,
                // formatter: function(cellvalue, options, rowObject){
                //     return new Date(cellvalue);
                // }
            }, {
                name: 'uploadType',
                index: 'uploadType',
                width: 100,
                editable: false,
                sortable: false,
                hidden: true
            }, {
                name: '',
                index: '',
                width: 100,
                editable: false,
                sortable: false,
                formatter: function(cellvalue, options, rowObject){
                    return "<button type=\"button\" class=\"btn btn-primary\" onclick='showLog(" + rowObject.uploadLog + ")'>查看</button>";
                }
            }],
            jsonReader: {
                root: "data.logList",
                page: "data.page.pageNum",
                total: "data.page.pages",
                totalCount: "data.page.total"
            },
            viewrecords: true,//是否在浏览导航栏显示记录总数
            pager: pager_selector,
            caption: "实时上传日志",
            gridComplete: function () {//修改行颜色
                var ids = $("#grid-table").getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    var rowData = $("#grid-table").getRowData(ids[i]);
                    if (rowData.uploadType != "1") {
                        $('#' + ids[i]).find("td").addClass("danger");
                    }
                }

            }
        });

设置/获取单选框的值

    $().prop();
    $().prop("checked", false)