若依框架前端问题总结
table 表格中改变columns{field : 'id',title : '序号',formatter: function (value, row, index) {return $.table.serialNumber(index);}},{field :
·
table 表格中改变columns
{
field : 'id',
title : '序号',
formatter: function (value, row, index) {
return $.table.serialNumber(index);
}
},{
field : 'repairRecord',
title : '修换记录'
},
{
field : 'warning',
title : '预警',
rowStyle: function (row, index) {
if (row.warning == '必须更换') {
return { css: { 'color': 'red' } };
} else if (row.warning == '需要马上更换') {
return { css: { 'color': 'yellow' } };
}
return { css: { 'color': 'green' } };
},
},
{
field : 'wearPart',
title : '易损件',
formatter:function(value,row,index){
var value="";
if(row.wearPart=="Y"){
value = "是";
}else{
value = "否";
}
return value;
}
},
createMenuItem('url','跳转地址');
手写分页
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('课表')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 search-collapse">
<input type="hidden" id="id">
<div class="select-list">
<ul>
<li>
年度：
<input type="text" name="years" id="years">
</li>
<li>
班次：
<select name="classes" id="classes">
<option value="">请选择 </option>
<option th:each="dict : ${classList}" th:text="${dict.className}" th:value="${dict.id}">
</option>
</select>
</li>
<li>
<a class="btn btn-primary btn-rounded " onclick="Search()"><i
class="fa fa-search"></i> 搜索</a>
</li>
<li>
<a class="btn btn-success " onclick="implementAdd()">
<i class="fa fa-plus"></i> 新增
</a>
</li>
<li>
<a class="btn btn-primary" onclick="goBack('/course/manage','课程管理')">
<i class="fa fa-backward"></i> 返回
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 select-table table-striped">
<div class="row" style="margin-top: 0px" id="tableShow">
<div class="col-sm-3" id="tableOne">
</div>
<div class="col-sm-3" id="tableTwo">
</div>
<div class="col-sm-3" id="tableThr">
</div>
<div class="col-sm-3" id="tableFou">
</div>
</div>
</div>
</div>
<div style="display: block;" id="moocPage">
<div class="fixed-table-pagination" style="display: block;position: relative;top: -36px;left: 0;">
<div class="pull-left pagination-detail">
<span class="pagination-info">
显示第 1 到第 <span></span> 条记录，总共 <span id="pageTotal"></span> 条记录
</span>
<div class="page-list" style="display: inline;">每页显示 <div class="btn-group dropdown dropup">
<button class="btn btn-default btn-outline dropdown-toggle" type="button"
data-toggle="dropdown" aria-expanded="false">
<span class="page-size">
8
</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="menuitem" class="active"><a href="#" onclick="returnPage(8)">8</a></li>
<li role="menuitem" class=""><a href="#" onclick="returnPage(16)">16</a></li>
<li role="menuitem" class=""><a href="#" onclick="returnPage(32)">32</a></li>
</ul>
</div> 条记录</div>
</div>
<div class="pull-right pagination">
<ul class="pagination pagination-outline">
<li class="page-item page-pre disabled"><a class="page-link" aria-label="上一页"
href="javascript:void(0)">上一页</a></li>
<li class="pageGo">
<input type="text" class="form-control">
<button class="btn btn-btn btn-default" title="跳转" type="button" id="tzPage">跳转</button>
</li>
<li class="page-item page-next"><a class="page-link" aria-label="下一页"
href="javascript:void(0)">下一页</a></li>
</ul>
</div>
</div>
</div>
</div>
<style>
.container-div img {
border: 1px dashed #e2e2e2;
width: 150px;
height: 180px;
}
.container-div input[type='checkbox'] {
width: 18px;
height: 18px;
margin-top: 0px;
}
.col-sm-3 {
width: 25%;
margin-top: 15px;
}
.table-striped {
min-height: 375px;
}
html,
body {
height: 0;
}
.pagination {
margin: 0px 0;
}
</style>
<div th:include="include :: footer"></div>
<th:block th:include="include :: bootstrap-table-custom-view-js" />
<script th:inline="javascript">
let prefix = ctx + "course/schedule";
// 返回课程管理首页
function goBack(url, title) {
createMenuItem(url, title)
}
// 添加
function implementAdd() {
$.modal.open("添加课程表", prefix + "/add");
}
//分页
$(".pageGo").find("input").attr("value", 1);
/**
* 初始化
*/
let pageNum = 1,
pageSize = 8,
pageTotal = 0;
Init();
function Init() {
let classes = $("#classes option:selected").val();
let years = $("#years").val();
$.ajax({
type: "post",
url: prefix + "/list",
data: {
"classes": classes,
"years": years,
"pageSize": pageSize,
"pageNum": pageNum,
},
success: function (content) {
pageTotal = parseInt(content.total / pageSize) + 1;
if (pageNum > 1) {
$(".page-pre").removeClass("disabled")
} else {
$(".page-pre").addClass("disabled")
}
if (pageNum < pageTotal) {
$(".page-next").removeClass("disabled")
} else {
$(".page-next").addClass("disabled")
}
$("#tableOne").empty();
$("#tableTwo").empty();
$("#tableThr").empty();
$("#tableFou").empty();
if (content.total > 0) {
//分页设置
if (content.total > 8) {
$(".pagination-info span:eq(0)").html(8)
} else {
$(".pagination-info span:eq(0)").html(content.total)
}
$("#pageTotal").html(content.total);
$("#moocPage").show();
let tHtml = '';
for (let i = 0; i < content.rows.length; i++) {
let Content = content.rows[i];
tHtml = `<div class="ibox" value="${Content.id}">
<div class="ibox-title">
<div class="col-sm-10">
<h5>课表</h5>
</div>
</div>
<div class="ibox-content">
<div class="row m-t-sm">
<div class="col-sm-5">
<img src="/img/kcb2.png" class="heart_class">
</div>
<div class="col-sm-7">
<div>年 度：<span>${Content.years}</span></div>
<div style="margin: 20px 0">
班 次：<span>${Content.classes}</spantext=></div>
</div>
</div>
<div class="text-right">
<a class="btn btn-success btn-xs previewAccessory" value="${Content.id}">
<input type="hidden" value="${Content.attachment}" class="previewAccessoryOne">
<i class="fa fa-search"></i> 附件预览
</a>
<a class="btn btn-info btn-xs implementEdit" value="${Content.id}">
<i class="fa fa-edit"></i> 修改
</a>
<a class="btn btn-danger implementRemove btn-xs" value="${Content.id}">
<i class="fa fa-remove"></i> 删除
</a>
</div>
</div>
</div> `;
if (i % 4 == 0) {
$("#tableOne").append(tHtml);
}
if (i % 4 == 1) {
$("#tableTwo").append(tHtml);
}
if (i % 4 == 2) {
$("#tableThr").append(tHtml);
}
if (i % 4 == 3) {
$("#tableFou").append(tHtml);
}
}
$(".previewAccessory").on("click", function (event) {
event.stopPropagation();
let attachment = $(this).find('input').val();
if (attachment == null || attachment == ""){
$.modal.msgWarning("暂无附件！")
return
}
if (attachment.indexOf("doc") != -1 ||attachment.indexOf("docx") != -1){
let url = prefix + "/wordPreview/" + $(this).attr("value");
$.get(url, function(result) {
});
}else {
createMenuItem(prefix + "/pdfPreview/" + $(this).attr("value"), "附件详情", true);
}
})
//修改
$(".implementEdit").on("click",function (event) {
var id = $(this).attr("value")
event.stopPropagation();
$.modal.open("修改班次", prefix + "/edit/" + id);
})
$(".ibox").on("click",function (event) {
var id = $(this).attr("value")
event.stopPropagation();
$.modal.openModel("查看详情", prefix + "/view/"+id);
})
//删除
$(".implementRemove").on("click",function (event) {
var id = $(this).attr("value")
event.stopPropagation();
$.modal.confirm("确认要删除选中的数据吗?", function () {
let url = prefix + "/remove";
let data = {
"ids": id
};
$.operate.submit(url, "post", "json", data);
setTimeout(function () {
location.reload();
}, 1000)
});
})
} else {
$("#moocPage").hide();
}
}
});
}
function returnPage(size) {
$(".page-size").html(size)
$(".dropdown-menu li").removeClass("active");
if (8 == size) {
$(".dropdown-menu li:eq(0)").addClass("active");
} else if (16 == size) {
$(".dropdown-menu li:eq(1)").addClass("active");
} else {
$(".dropdown-menu li:eq(2)").addClass("active");
}
pageSize = size;
Init();
}
/**
* 跳转
*/
$("#tzPage").on("click", function () {
pageNum = $(".pageGo").find("input").val();
Init();
})
/**
* 上一页
*/
$(".page-pre ").on("click", function () {
if (pageNum > 1) {
pageNum = pageNum - 1;
$(".pageGo").find("input").attr("value", pageNum);
Init();
}
})
/**
* 下一页
*/
$(".page-next").on("click", function () {
if (pageNum < pageTotal) {
pageNum = pageNum + 1;
$(".pageGo").find("input").attr("value", pageNum);
Init();
}
})
function Search(){
Init();
}
</script>
</body>
</html>
快速构建 Web 应用程序
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)