若依框架前端问题总结
2024-06-07 01:29:57
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()"><iclass="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>
若依框架前端问题总结相关推荐
- 实战商城app之uView框架前端极速开发课程简介
**uniapp商城实战之uView UI框架前端极速开发课程**已发布上线 https://edu.csdn.net/course/detail/35573 共108多节,包含了uview官网中90 ...
- 原生js-js类库-js框架-前端框架-区别
原生js-js类库-js框架-前端框架-区别 1.原生js就是javascript ,也是网站前端核心内容,主要操作流程是,先获得DOM或切换DOM,然后修改DOM对象的属性或调用DOM对象的方法,存 ...
- 记录一次若依框架 前端跨域访问 ruoyi -vue
Ruoyi -vue 若依框架 前端跨域访问 总的思路 创建一个用于第三方平台使用的request拦截器,并定义一个新的path ,最后配置 deserver,其实网上也有很多 对于我这样JAVA开发 ...
- 若依框架前端菜单生成，权限标识，路由地址
若依菜单分类三种类型M(目录).C(菜单).F(按钮) 系统模板,模仿框架写法 根据后端生成代码来创建前端页面 在菜单管理页面生成目录和菜单 路由地址填写模块名 路由地址:控制器中的地址 组件路径:前 ...
- 基于Java后台(Springboot框架)+前端小程序(MINA框架)+Mysql数据库的教室图书馆座位预约小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序预约订座小程序,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台添加座位类型 ...
- 2018几大主流的UI/JS框架——前端框架
2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web 前端技术发展速度让人感觉几乎不是继承式的迭代,而是一次次的变革和创造.这一年中有很多热门的前端开发框架,下面源码 ...
- 基于Java后台(Springboot框架)+前端小程序(MINA框架)+Mysql数据库的影视评论交流小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序影视评论交流系统,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台设置影视属 ...
- 前端框架匹配php框架,前端框架ThinkJS框架详解
安装 安装命令行工具:$ npm install -g thinkjs 然后使用thinkjs new demo创建一个新项目.为了确保用户错误操作导致现有文件被覆盖,thinkjs new 命令仅适 ...
- 【一、bootstrap框架前端注册登录页面】
一.使用bootstrap框架写一个简易的前端登录页面. 先上截图 下面开始记录本人使用bootstrap框架写这个登录页面的过程 1.bootstrap需要的配置文件 <!-- 新 Boots ...
- 基于Java后台(Springboot框架)+前端小程序(MINA框架)+Mysql数据库的菜谱美食小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序美食菜谱点评系统,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台添加资讯和 ...
最新文章
- 绝对巨星－罗伯特·巴乔
- 更改Mysql数据库存储位置的具体步骤
- ASP.NET Core依赖注入最佳实践,提示技巧
- python导包路径问题_python的导包问题
- 不止代码：ybtoj-棋盘分割（二维区间dp）
- 如何设置tomcat的默认应用。
- 通才还是专才——由摩托裁员引发的讨论
- 让MDK5开发51单片机
- ERP能力计划与排产
- Ubuntu系统下MRIcroN、FSL6.0.5、Freesurfer7.1.1、ANTs、MRtrix3、AFNI的安装详解——核磁共振数据处理必备
- 解决win10下PPT打不开，显示内容有问题，提示修复但修复不成功问题
- VTK可交互三维坐标轴
- Sphinx武林秘籍(下)
- dc005电源插座三脚封装尺寸_DC-005电源插座有三个引脚分别要怎么接？
- 方舟怎么查看服务器信息,方舟怎么查看登录过的服务器 | 手游网游页游攻略大全...
- 【测控电路】ADDA转换电路
- 想转行前端，前端工程师每天都在做什么？
- 如何去掉视频上的水印文字？视频去水印方法大分享
- 使用CANVAS实现交互性圆形马赛克效果
- 怎么用计算机打分数,电脑分数怎么打（在PPT里）？
热门文章
- curl post https_Fiddler抓包13fiddler 抓包导出 curl 命令行
- 如何减小电压跟随器输出电阻_气动操作器FBD5061SF-1蓝宇品牌安徽
- C++ 杂七杂八的东西
- C++数据结构01--顺序线性表实现
- Windows下根据进程id获得进程名
- 用PostgreSQL运行文件中的SQL程序
- 7收不到邮件 contact form_Contact Form 7基本使用教程
- 云服务器布置_如何选择云服务器 云服务器配置怎么搭配【详解】
- 一段顺序颠倒能读通的文字_钓鱼也有逻辑顺序，总是钓不到鱼的原因就在这里...
- Shell else if mysql_linux shell中 if else以及大于、小于、等于逻辑表达式介绍