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)