[JavaScript知识库]layui 中使用thymeleaf if判断

layui 中使用thymeleaf if判断

	<!-- 数据表格开始 -->
	<table class="layui-hide" id="repairTable" lay-filter="repairTable"></table>
	<script type="text/html" id="repairBar" style="display: none;">
		{{#  if(d.status == 0){ }}
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="confirm">确认维修</a>
		{{# }if(d.status == 1) { }}
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="over">完成维修</a>
		{{# }if(d.status == 2){ }}
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">删除</a>
		{{# } }}
	</script>


	<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
	<script type="text/javascript" th:inline="none">
		var tableIns;
		layui.use([ 'jquery', 'layer', 'form', 'upload','table'], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			//渲染数据表格
			tableIns=table.render({
				elem: '#repairTable'   //渲染的目标对象
				,url:'repair/queryRepairAllList' //数据接口
				,title: '数据表'//数据导出来的标题
				,toolbar:"#repairToolBar"   //表格的工具条
				,height:'full-100'
				,cellMinWidth:80 //设置列的最小默认宽度
				,page: true  //是否启用分页, limits: [10, 20, 30]
				,limits: [10, 20, 30]
				,limit: 10//默认采用3
				,cols: [[   //列表数据
					{field:'id', title:'维修管理ID',align:'center'}
					,{field:'roomName', title:'维修教室',align:'center'}
					,{field:'category', title:'维修种类',align:'center'}
					,{field:'damage', title:'维修内容',width:"20%",align:'center'}
					,{field:'createTime', title:'报修时间',align:'center'}
					,{field:'status', title:'订单',align:'center',templet: function (d) {
						if(d.status == 0){
							return '<a color=blue>未处理</a>';
						}else if (d.status == 1){
							return '<a color=blue>维修中</a>';
						}else if (d.status == 2){
							return '<a color=blue>已维修</a>';
						}}}
					,{fixed: 'right', title:'操作', width:'16%',  toolbar: '#repairBar',align:'center'}
				]]
			})

			//模糊查询
			$("#doSearch").click(function () {
				var params = $("#searchFrm").serialize();
				tableIns.reload({
					url: "repair/queryRepairAllList?" + params
				})
			});

			//监听行工具事件
			table.on('tool(repairTable)', function(obj){
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				if(layEvent === 'confirm'){ //确认维修订单
					layer.confirm('确认该维修单吗？', function(index){
						//向服务端发送修改指令
						$.post("repair/updateRepair",{
							id:data.id,
							status:1
						},function(res){
							layer.msg(res);
							//刷新数据 表格
							tableIns.reload();
						})
					});
				}
				if(layEvent === 'over'){ //完成维修
					layer.confirm('确认完成该维修单吗?', function(index){
						//向服务端发送修改指令
						$.post("repair/updateRepair",{
							id:data.id,
							status:2
						},function(res){
							layer.msg(res);
							//刷新数据 表格
							tableIns.reload();
						})
					});
				}
				if(layEvent === 'cancel'){ //删除维修订单
					layer.confirm('确认删除该维修单吗?', function(index){
						//向服务端发送修改指令
						$.post("repair/deleteRepair",{
							id:data.id
						},function(res){
							layer.msg(res);
							//刷新数据 表格
							tableIns.reload();
						})
					});
				}
			});

		});
	</script>