layui开发实例之-mitric_dict.html

最新推荐文章于 2022-12-13 10:28:27 发布
最新推荐文章于 2022-12-13 10:28:27 发布
阅读量173 收藏
点赞数
分类专栏： 学习专用仅供参考 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39238520/article/details/94744748
版权

mitric_dict.html

<!DOCTYPE html>
<html lang="en" class="width-height-100">

<head>
	<meta charset="UTF-8">
	<title>mitric_dict</title>
	<link rel="stylesheet" type="text/css" href="../../../thx/layui/css/layui.css" />
	<style>
		* {
			box-sizing: border-box;
		}

		.width-height-100 {
			width: 100%;
			height: 100%;
		}

		.container {
			padding: 24px;
		}

		.padding-12 {
			padding: 12px;
		}

		.btn-btn {
			padding-bottom: 10px;
			border-bottom: 1px solid #ddd;
		}

		.layui-btn-none {
			background-color: transparent;
			border-color: transparent;
		}
		.layui-btn-none:hover{
			color:#333;
		}

		.color-black {
			color: black;
		}

		.btn-active {
			background: #337ab7;
			color: white;
		}

		.btn-check {
			background: #269abc;
		}

		.context {
			background: white;
			border-radius: 10px;
			padding: 12px;
		}

		.padding10 {
			border: 1px solid #ccc;
			margin-top: 10px;
			padding: 10px;
		}

		.height-45 {
			height: calc(100% - 45px);
		}
		
	</style>
</head>

<body class="width-height-100">
	<div class="container width-height-100">
		<div class="layui-row btn-btn" style="height:45px;">
			<button class="layui-btn color-black layui-btn-none btn-active">设备</button>
			<button class="layui-btn color-black layui-btn-none">业务</button>
		</div>
		<div class="context layui-form height-45" style="overflow: auto;">
			<div class="layui-row padding10">
				<div class="layui-col-xs5">
					<button class="layui-btn btn-active" onclick="to_add()">新增指标</button>
					<button class="layui-btn btn-active" onclick="to_manage()">分组管理</button>
				</div>
				<div class="layui-col-xs7">
					<div class="layui-col-xs5">
						<label class="layui-form-label">名称</label>
						<div class="layui-input-block">
							<input type="text" name="title" required lay-verify="required" placeholder=""
								autocomplete="off" class="layui-input" id="name">
						</div>
					</div>
					<div class="layui-col-xs5">
						<label class="layui-form-label">编码</label>
						<div class="layui-input-block">
							<input type="text" name="title" required lay-verify="required" placeholder=""
								autocomplete="off" class="layui-input" id="code">
						</div>
					</div>
					<div class="layui-col-xs2">
						<button class="layui-btn btn-check" style="margin-left:4px;"
							onclick="to_searchData()">查询</button>
					</div>
				</div>
			</div>
			<div class="layui-row padding10 width-height-100" style="
			height: calc(100% - 5rem);overflow: auto;
		">
				<table id="tablelist" class="layui-table" lay-filter="test"></table>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript" src="../../../thx/jquery-2.0.0.js"></script>
<script type="text/javascript" src="../../../thx/layui/layui.all.js"></script>

<script type="text/javascript" src="../../../js/app_conf.js"></script>
<script type="text/javascript" src="../../../js/app_common_fn.js"></script>
<script>
	var template_url = "template";//模板接口

	var layui_layer_index = "";//当前弹出层
	var copy_req = {
		code: "",
		count: ""
	};//copy的请求参数
	var table = null;//table
	var form = null;//表单渲染layui的样式的全局参数
	var physicsList_data = null;//机房下拉列表的数据
	var businessList_data = null;//业务下拉列表的数据
	var sysuserList_data = null;//运维人员下拉列表的数据
	var show = false;//是否有展开的情况
	var options = {
		code: "",
		go: "mitricDictPage",
		name: "",
		temptype: "phyobj"
	};//请求table的参数

	var add_params = {
		go: "saveMitricDict",
		objType: "phyobj",
		id: ""
	}//新增分组按钮

	//页面加载完成时调用
	$(window).load(function () {
		// 初始化页面
		init_view();
		// 加载数据
		load_data();
		// 页面渲染
		init_page();

	});

	function init_view() {
		console.error();
		//表格初始化
		layui.use('table', function () {
			table = layui.table;
			table.render({
				id: "dict_table",
				elem: '#tablelist',
				height: $("#tablelist").parent().height()-30,
				method: 'post',
				where: options,
				url: app_url + template_url,
				limit: 10,
				limits: [10, 20, 30, 40],
				page: true,
				page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					layout: ['count', 'limit', 'skip', 'prev', 'page', 'next'] //自定义分页布局，以及顺序
				},
				contentType: 'application/json',
				request: {
					pageName: "page" //页码的参数名称，默认：page
					, limitName: "rows" //每页数据量的参数名，默认：limit
				},
				response: {
					statusName: 'ret_code' //数据状态的字段名称，默认：code
					, statusCode: 0 //成功的状态码，默认：0
					, msgName: 'ret_msg' //状态信息的字段名称，默认：msg
					, countName: 'total' //数据总数的字段名称，默认：count
					, dataName: 'data' //数据列表的字段名称，默认：data
				},
				cols: [
					[ //表头
						{ field: 'cname', title: '分组名称', align: "center" },
						{ field: 'name', title: '指标名称', align: "center" },
						{ field: 'code', title: '指标编码', align: "center" },
						{ field: 'desc', title: '指标描述', align: "center", },
						{
							field: 'do', title: '操作', align: "center",
							templet: function (d) {
								var button = addMyButton(d);
								return button;
							}
						}
					]
				],
				done: function (res, curr, count) { //成功走的方法
					var count = res.row_count;
				}
			});

		});
		//监听设备和业务按钮
		$(".btn-btn").on("click", "button", function () {
			$(".btn-btn").children().removeClass("btn-active");
			$(this).addClass("btn-active");
			if ($(this).html() == "设备") {
				re_table_list("phyobj");
				add_params.objType = "phyobj";
			} else if ($(this).html() == "业务") {
				re_table_list("serviceobj");
				add_params.objType = "serviceobj"
			}
		});

	}

	//加载数据
	function load_data() {

	}

	//重新配置页面
	function init_page() {

	}

	//详情
	function to_check(name, code, summ_tx, desc) {

		var jsonData = {
			name: name,
			code: code,
			summ_tx: summ_tx,
			desc: desc,
			objType:add_params.objType//该变量保持和新增的传参一直
		}
		var strData = JSON.stringify(jsonData);
		console.log(strData);

		var href = 'mitric_dict_detail.html?jsonstr=' + encodeURI(strData);

		layui_layer_index = layer.open({
			title: ['详情'],//, 'font-size:18px;'
			type: 2,
			area: ['60%', '55%'],
			fixed: false, //不固定
			maxmin: false,
			content: href
			, btnAlign: 'r'//按钮左对齐
			, btn: ['取消']
			, btn1: function (index, layero) {
				layer.close(index); //关闭弹窗
			}
		});

	}
	//新增
	function to_add() {
		var jsonData = {
			objType: add_params.objType,
		};
		var strData = JSON.stringify(jsonData);
		console.log(strData);

		var href = 'mitric_dict_add.html?jsonstr=' + encodeURI(strData);

		layer.open({
			title: ['新增指标'],//, 'font-size:18px;'
			type: 2,
			area: ['55%', '50%'],
			fixed: false, //不固定
			maxmin: false,
			content: href
			, btnAlign: 'r'//按钮左对齐
			, btn: ['确定', '取消']
			, yes: function (index, layero) {
				var layui_layer_ = "layui-layer-iframe" + layero[0].id.replace("layui-layer", "");
				add_params.name = window.frames[layui_layer_].$("#name").val();
				add_params.code = window.frames[layui_layer_].$("#code").val();
				add_params.type = window.frames[layui_layer_].$("#type").val();
				add_params.active_type = window.frames[layui_layer_].$("#active_type").val();
				add_params.script_id = window.frames[layui_layer_].$("#script_id").val();
				add_params.category = window.frames[layui_layer_].$("#category").val();
				add_params.summ_tx = window.frames[layui_layer_].$("#summ_tx").val();
				add_params.desc = window.frames[layui_layer_].$("#desc").val();

				console.log(add_params)
				if (!check_null_param(add_params['name'])) {
					layer.msg("请输入名称", { time: '1000' });
				} else if (!check_null_param(add_params['code'])) {
					layer.msg("请输入编号", { time: '1000' });
				} else {
					ajax_post(function (data) {
						layer.close(index);
						reloadTable();
					}, template_url, add_params);
				}
			}, btn2: function (index, layero) { //按钮【按钮二】的回调
				layer.close(index);//return false 开启该代码可禁止点击该按钮关闭
			}
		});
	}

	//刷新表格
	function reloadTable() {
		var current = 1;
		if ($(".layui-laypage-skip").find("input").val()) {
			current = $(".layui-laypage-skip").find("input").val();
		};
		table.reload('dict_table', {
			height: "full",
			page: {
				'curr': current,//获取当前页
			}
		});
	}

	//切换业务和设备
	function re_table_list(temptype) {
		options.temptype = temptype;
		options.code = fmt_param($("#code").val());
		options.name = fmt_param($("#name").val());
		table.reload('dict_table', {
			where: options,
			page: {
				curr: 1 //重新从第 1 页开始
			}
		})

	}

	//表格添加按钮方法
	function addMyButton(data) {
		var { id, name, code, summ_tx, desc } = data;
		var button = "";
		button = `<button class='layui-btn layui-btn-sm btn-check' onclick="to_check('${name}','${code}','${summ_tx}','${desc}')">详情</button>`;
		button += `<button class="layui-btn layui-btn-sm layui-btn-danger" onClick="toDeleteData('${id}','${name}')">删除</button>`
		return button;
	}

	//表格数据-操作按钮 = 删除
	function toDeleteData(id, name) {
		var checkStatus = table.checkStatus('dict_table');

		layer.confirm('<span style="text-align: center;display:block">' + '确定要删除"' + name + '"吗？ </span>', {
			title: '删除',
			btn: ['确定', '取消'] //可以无限个按钮
		}, function (index, layero) {//按钮【按钮一】的回调
			ajax_post(function (data) {
				layer.close(index); //关闭弹窗
				reloadTable();
			}, template_url, {
					"id": id,
					"go": "delMitricDict"
				});
		}, function (index) {//按钮【按钮二】的回调
			layer.close(index); //关闭弹窗
		});
	}

	//表格数据-查询
	function to_searchData() {
		options.name = fmt_param($("#name").val());
		options.code = fmt_param($("#code").val());
		//重载table
		table.reload('dict_table', {
			where: options,
			page: {
				curr: 1 //重新从第 1 页开始
			}
		});
	}

	//表格数据-分组管理
	function to_manage() {
		var jsonData = {
			objType: add_params.objType,
		};
		var strData = JSON.stringify(jsonData);
		console.log(strData);

		var href = 'mitric_dict_manage.html?jsonstr=' + encodeURI(strData);

		layer.open({
			title: ['分组名称管理'],//, 'font-size:18px;'
			type: 2,
			area: ['55%', '50%'],
			fixed: false, //不固定
			maxmin: false,
			content: href
			, btnAlign: 'r'//按钮左对齐
			, btn: ['关闭']
			, yes: function (index, layero) {
				layer.close(index);
			}
		});
	}


</script>

</html>
weixin_39238520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ImportError: cannot import name ‘create_prompt_application‘ from ‘prompt_toolkit.shortcuts‘解决方案
weixin_43178406的博客
05-09 1万+
本文主要介绍了ImportError: cannot import name ‘create_prompt_application’ from 'prompt_toolkit.shortcuts’解决方案，希望能对学习python的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案
pytorch之torch.utils.model_zoo.load_url()在给定URL上加载Torch序列化对象
夏普通
07-10 8933
torch.utils.model_zoo.load_url(url, model_dir=None) 在给定URL上加载Torch序列化对象。 通俗点说，就是通过提供的.pth文件的url地址来下载指定的.pth文件【在pytorch中.pth文件就是模型的参数文件】 参数： url (string) - 要下载对象的URL model_dir (string, optional) - 保存对象的目录 如果对象已经存在于model_dir中，则将被反序列化并返回。【也就是后面所说的——已经下载好模型的
LayUI框架示例整合
06-21
自己写的前端LayUI框架示例整合，适合小白学习（大神勿喷。谢谢）
layui开发实例之-mitric_dict_add.html
weixin_39238520的博客
07-05 160
mitric_dict_add.html <!DOCTYPE html> <html lang="en" class="width-height-100"> <head> <meta charset="UTF-8"> <title>mitric_dict</title> <link rel="stylesheet...
html自定义字典,关于layui:00033layui-自定义-字典模块-及-工具方法
weixin_33384949的博客
06-17 243
layui.define(['jquery','form'], function(exports){var $ = layui.jquery;var form = layui.form;var element = layui.element;/*var dictJson = {"status":[[1,"失常"],[2,"禁用"]],"yesNot":[[1,"是"],[2,"否"]],"bool...
layui自定义模块实现下拉框，读取数据字典数据
nature_fly088的专栏
04-29 4136
项目中页面很多下拉框，都是调用数据字典表数据，例如性别：男，女，；删除状态：已删除，正常。 如果每个地方都用ajax调用，过于麻烦，代码越多，维护工作就越麻烦。故使用layui自定义模块实现统一操作。 先看下效果： 项目情况 因为我项目使用的springboot+tymeleaf+layui，layui扩展用了layuimini. 直接上代码 项目结构如下： 1.新建dict...
fslayui和layui_fsLayui数据字典使用
weixin_36201981的博客
01-14 527
概述数据字典主要解决下拉框数据填充和数据表格转义处理，一个数据字典可以多处使用。1.多个页面下拉框使用同样的数据，改一个地方需要把所有页面都要修改2.数据表格转义代替自己手动写templet解析模板数据字典提供一个通用的处理方式，支持配置静态数据字典和动态数据字典，，数据字典文件地址plugins/frame/js/fsDict.js。如果使用数据字典，必须在layui.js 后面引入数据字典文件...
解决OSError: Error no file named pytorch_model.bin, tf_model.h5 found in directory
weixin_44231433的博客
12-13 1万+
加载预训练好的Bert模型时发生OSError错误
layui.table单元格控件
Kim_SL的博客
02-07 1272
一、layui.table单元格控件(时间控件laydate、单元格下拉控件xm-select等) 1、利用templet为其单元格加上id,方便其后以此id来指定控件。 2、善用每列的event，可通过检测所点击的单元格所在的行和列来触发相应事件。 ...
Pysot demo.py载入模型报错 “Missing key(s) in state_dict”的解决方案
qq_40313336的博客
04-20 2163
如何在Pysot的demo.py中加载自己训练后的模型
fsLayuiPlugin数据字典使用
weixin_34060299的博客
12-27 308
概述 数据字典主要解决下拉框数据填充和数据表格转义处理，一个数据字典可以多处使用。 1.多个页面下拉框使用同样的数据，改一个地方需要把所有页面都要修改 2.数据表格转义代替自己手动写templet解析模板数据字典提供一个通用的处理方式，支持配置静态数据字典和动态数据字典，，数据字典文件地址plugins/frame/js/fsDi...
Layui简介、layui例子
weixin_49756484的博客
06-19 3838
Layui简介 什么是Layui？ Layui（谐音：类UI）是一套开源的WebUI解决方案，采用自身经典的模块化规范，并遵循原生HTML/CSS/JS的开发方式，说明不会像我们之前的Bootstrap里面的js依赖jQuery。Layui则是原生的不会依赖于jQuery，也不会依赖于其他的插件 注意：它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，（它是WebUI的前端框架，但是它更多的是面向后端的开发者） Bootstrap面向的是前端的一个开发，Layui更多的是面向后端
00033-layui 自定义 字典模块 及 工具方法
09-17 786
layui.define(['jquery','form'], function(exports){ var $ = layui.jquery; var form = layui.form; var element = layui.element; /*var dictJson = { "status":[[1,"正常"],[2,"禁用"]], "yesNot":[[1,"是"],[2,"否"]], "bool":[[true,
如何通过Layui定义模块实现下拉框读取字典表数据
诺浅的专栏
03-15 3412
缘起 日前，项目中有个页面是需要下拉框能够选出来一些数据库的字典选项，如下图 其中的选项111和222是从数据库加载的，如果每个地方都需要去用ajax请求一下数据字典未免太过于麻烦，所以就实现了一个通用的功能，而因为项目中使用的是layui，layui是支持自定义模块已使用模块功能可以看到layui的文档上有写。 下面就实现此功能的方式做一个记录。需要注意的是：虽然此处使用的是layui的模块...
LayUI后台管理与综合示例
不二的博客
09-25 8405
来源：http://www.cnblogs.com/best/p/9150271.html#_label0 强烈推荐
layui 新手实例教程
qq_42977016的博客
04-27 3035
首先： 官网地址：https://www.layui.com/ 食用建议：1，官方文档和官方实例 2，开源的项目 文档： https://www.layui.com/doc/ 实例：https://www.layui.com/demo/ 项目demo：https://github.com/FairyLii/layuiTest (非常厚脸皮的放上了自己写的小demo，这个非常简单，代码简单，适合刚开...
Layui(4) 增删改查 完整案例
热门推荐
郑清
12-24 3万+
分享一下最近花了2天时间来做的一个layui前端的CURD，先来看看效果是不是自己想要的吧... 【代码放最后了】 因为每天还要上课，所以虽然花了2天时间来弄，但实际上写的时间比较少，有些功能做的不是很好，还请大佬见谅 可参考layui官方开发文档：https://www.layui.com/doc/ 以及在线示例：https://www.layui.com/demo/ lay...
layui url参数 获取_00038-layui 打开新页面，并通过url带参数，在新页面获取url的参数...
weixin_35407400的博客
01-27 1146
打开的页面为一个页签top.layui.index.openTabsPage('business/businessUserShow.jsp#/self=1','个人信息')businessUserShow.jsp:layui.config({base: '${ctxLayui}/layuiadmin/'}).extend({index: 'lib/index'}).use(['index', 'f...
class UserCache(UserMixin): """用户表缓存""" userid: str username: str alternative_id: str homepage: str permissions: list def get_id(self): """使用替代用户ID，当账号信息发生变化时，替代ID更改为新的随机生成的值，确保他们的旧身份验证会话不再有效。""" return self.alternative_id @staticmethod def add_user_cache(alternative_id: str, **kwargs): """添加user缓存""" user_key = f"{PROJECT_NAME}-{alternative_id}" values = {"alternative_id": alternative_id} values.update(kwargs) redis_client.hmset(user_key, values) redis_client.expire(user_key, SIGNIN_LIFETIME) return True @staticmethod def del_user_cache(alternative_id: str): """删除user缓存""" redis_client.delete(f"{PROJECT_NAME}-{alternative_id}") return True @staticmethod def get_user_cache(alternative_id) -> object: """获取user缓存""" user_cache_dict = redis_client.hgetall(f"{PROJECT_NAME}-{alternative_id}") if user_cache_dict: user_cache = UserCache() user_cache.userid = user_cache_dict.get('userid') user_cache.username = user_cache_dict.get('username') user_cache.alternative_id = user_cache_dict.get('alternative_id') user_cache.homepage = user_cache_dict.get('homepage') user_cache.permissions = user_cache_dict.get('permissions').split(",") # redis里存的是字符串，转为列表 return user_cache 请帮我优化这段代码，并提出建议，python3.8
最新发布
05-30
user_cache.permissions = user_cache_dict.get('permissions', '').split(",") if user_cache_dict.get('permissions') else [] return user_cache ``` 建议： 1. 可以考虑将 `redis_client` 对象封装成一个类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值