Layui table-bar  根据类型展示按钮

<script type="text/html" id="table_bar">
<div>
{{#  if(d.state == 0){ }}
<a class="layui-btn layui-btn-xs" lay-event="tiaobo">设备调拨</a>
{{#  } }}
</div>
</script>

 是否使用  是否首页 table单选事件

,{field:'useIt', title: '是否使用', width:120,style:'font-size: 12px;' ,templet: '#format_useIt' }
 
 
//是否显示
  form.on('switch(tp_useIt)', function(obj){
    //layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
    if(obj.elem.checked){
     update_useIt(this.value,1);
    }else{
     update_useIt(this.value,0);
    }
  });
 
 
<script type="text/html" id="format_useIt">
  <input type="checkbox" name="content" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="tp_useIt" {{ d.useIt == 1 ? 'checked' : '' }}>
</script>
 
 
 
function update_useIt(id,useIt){
$.post('/admin/shop/update',{id:id,useIt:useIt},function(result){
if(result.success){
layer.msg('修改成功');
}else{
layer.msg('修改失败');
}
},'json');
}

layui  加上日期。   并且初始化这样弄。

	  <div class="layui-form-item">
				<label class="layui-form-label">发车时间</label>
				<div class="layui-input-block">
					 <input type="text" class="layui-input" id="goDateTime" placeholder="yyyy-MM-dd">
				</div>
			</div>

//日期时间选择器
  laydate.render({
    elem: '#createDateTime'
    ,type: 'datetime'
    ,value: "[[${#dates.format(record?.createDateTime, 'yyyy-MM-dd HH:mm:ss')}]]"
    ,isInitValue: true
    ,trigger: 'click'
  });

 
  //年月选择器
	      laydate.render({
	        elem: '#test3'
	        ,type: 'month'
	      });
 
需要 加个  问号

layui，textarea文件

 <textarea placeholder="请输入内容"   v-model="remark"   class="layui-textarea" th:utext="${role?.remark}"></textarea>

layui 初始化  表单 下拉框 的值  select值

<script>
/*<![CDATA[*/
	
$(function(){
	if("[[${client?.sex}]]"!=""){
		$("#sex").val([[${client?.sex}]]);
	}
});

<script>
$(function(){
	if("[[${guide?.sex}]]"!=""){
        $("#sex").val('[[${guide?.sex}]]');
    }
    if("[[${guide?.state}]]"!=""){
        $("#state").val('[[${guide?.state}]]');
    }
});

加不加 th:inline="javascript"的区别

<script  th:inline="javascript">
var save_url =  [[${save_url}]];

如果不加th:inline="javascript"    直接是url 没有引号   需要自己加  ""

====================================
如果加了  th:inline="javascript" 
url会有引号


if("[[${shop?.type?.id}]]"!="null"){  
这里是null   不加则没有。

js代码中文乱码

<script  th:inline="javascript">
这样使用 会有中文 乱码
if("[[${client?.sex}]]"!="null"){
这个sex显示 转义的字符串
 
 
如何解决
<script>
/*<![CDATA[*/
$(function(){
if("[[${client?.sex}]]"!=""){
$("#sex").val('[[${client?.sex}]]');
}
});
 
/*]]>*/

layui日期组件  初始化日期

		//日期时间选择器
		  laydate.render({
		    elem: '#resultDate'
		    ,type: 'date'
		    ,value: "[[${#dates.format(data?.resultDate,'yyyy-MM-dd ')}]]"
		    ,isInitValue: true
		    ,trigger: 'click'
		  });
		   ,type: 'datetime'
		  
	 <input type="text" class="layui-input" id="resultDate" placeholder="yyyy-MM-dd">	  
		  		
  //年月选择器
	      laydate.render({
	        elem: '#test3'
	        ,type: 'month'
	      });	

删除一条记录 加询问窗口

function delete_(id){
	//询问框
	layer.confirm('您是否要删除？', {
	  btn: ['是','返回'] //按钮
	}, function(){
		$.post('/admin/message/delete',{id:id},function(result){
			if(result.success){
				layer.closeAll();
				layer.msg('删除成功');
				reload_data();
			}else{
				layer.closeAll();
				layer.msg(result.msg);
			}
		},'json');
	}, function(){
	});
}

动态table 格式化 状态

<script type="text/html" id="format_useIt">
{{#  if(d.useIt==1){ }}
默认地址
{{#  } else{   }}

{{#   }  }}
</script>


 ,{field:'useIt', title: '状态', width:120,style:'font-size: 12px;' ,templet: '#format_useIt'  }

动态table 格式化 用户名

<script type="text/html" id="format_member">
{{#  if(d.member){ }}
{{ d.member.trueName}}
{{#  } else{   }}
 {{#  } }}
</script>


 ,{field:'member', title: '用户', width:250,style:'font-size: 12px;' ,templet: '#format_member' }

动态table 格式化 图片

 <script type="text/html" id="format_imageUrl">
  {{#  if(d.imageUrl != null){ }}
<img style="width: 30px; height: 30px;" alt="" src="{{d.imageUrl}}" onclick="seeImg('{{d.imageUrl}}') " />
  {{#  } else { }}
  {{#  } }}
</script>
 
 
 
 ,{field:'imageUrl', title: '封面', width:80, templet: '#format_imageUrl',style:'font-size: 12px;'}
 
 
 
function seeImg(url){
	w = 600;
	h = 600;
	checkWindow();
	//iframe层
	if(!url){
		url = "   ";
	}
	layer.open({
	  type: 2,
	  title: '图片',
	  shadeClose: true,
	  shade: 0.8,
	  area: [w+'px', h+'px'],
	  content: url //iframe的url
	});
}

动态table  数字 格式化  保留2位 小数点  浮点数字

<script type="text/html" id="format_youpiao">
	{{#  if(d.youpiao != null){ }}
	 {{ (d.youpiao).toFixed(2) }}
  {{#  } else { }}
  {{#  } }}
</script>

动态table   数字  相加  相减  相乘  相除 

<script type="text/html" id="format_xianjin">
	{{#  if(d.yinlian_heji != null){ }}
	 {{ (d.xianjin_xiaoshou+d.xianjin_cunyou+d.xianjin_chuzhi+d.shishou).toFixed(2) }}
  {{#  } else { }}
  {{#  } }}
</script>

layui data 变动触发的事件

//常规用法
		  laydate.render({
		    elem: '#keDate'
		    ,done: function(value, date){
		    	change();
				 //layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
			}
		  });

layui select 下拉 变动触发的事件

			,form = layui.form 
			
			 form.on('select(state)', function(data){
					  reload_data();
					});					
					
					

轮播图片的设置

<div style="margin-top: 5px;">
				<div class="layui-carousel" id="lunbo" lay-filter="lunbo">
					<div carousel-item="">
						<div th:each="lunbo: ${lunboList}">
							<a style="display: block;" th:href="|${lunbo.url}|"><img
								th:src="${lunbo.imageUrl}" /></a>
						</div>
					</div>
				</div>
			</div>
			
			
			
		//常规轮播
		carousel.render({
			elem : '#lunbo',
			width : '100%',
			height : '250px',
			arrow : 'always'
		});

搜索代码

<div class="layui-form layui-form-pane" style="margin-bottom: 3px; "  >
  <div class="layui-form-item" style="margin-bottom: 1px; min-width:1051px;">
    <label class="layui-form-label" style="width: 55px;">分类</label>
    <div class="layui-input-inline" style="width: 88px; margin-right: 0px;">
    	 <select name="blogTypeId" id="blogTypeId"   lay-filter="blogTypeId"  >
	    	 <option value="">全部</option>
	    	 <option th:value="${type.id}"  th:text="${type.name}"  th:each="type: ${typeList}"></option>
          </select>
    </div>
    
    <label class="layui-form-label" style="width: 55px;">审核</label>
    <div class="layui-input-inline" style="width: 88px; margin-right: 0px;">
    	 <select name="state" id="state"   lay-filter="state"  >
	    	 <option value="">全部</option>
	    	 <option value="0">待审核</option>
	    	 <option value="1">已审核</option>
          </select>
    </div>
    
    <label class="layui-form-label" style="width: 55px;">置顶</label>
    <div class="layui-input-inline" style="width: 88px; margin-right: 0px;">
    	 <select name="useIt" id="useIt"   lay-filter="useIt"  >
	    	 <option value="">全部</option>
	    	 <option value="1">是</option>
	    	  <option value="0">否</option>
          </select>
    </div>
    
    <label class="layui-form-label" style="width: 55px;">搜索</label>
    <div class="layui-input-inline" style="width: 128px; margin-right: 0px;">
    	 <input type="text" id="q"  placeholder="输入搜索内容" class="layui-input"  onkeydown="if(event.keyCode==13) reload_data()" />
    </div>
    
    <div class="layui-input-inline" style="  width: 113px;">
	    	<a class="layui-btn" onclick="reload_data()">查询</a>
	</div>
  </div>
</div>

layui  格式化，数据时 调用外部的js方法

,{field:'date', title: '日期', width:90,style:'font-size: 12px;' , templet: '#format_date'}


<script type="text/html" id="format_date">
   {{ getDate(d) }}
</script>


function getDate(data){
   console.log(data);
   var date = new Date();
   console.log(date);
   var year = date.getFullYear();
   var month = date.getMonth()+1;
   return "<ber>month</ber>";
}

layui 高级别的用法，调用 外部方法

,{field:'huoqiS', title: '剩余x天', width:90,style:'font-size: 12px;', templet: '#format_huoqiS'  }

<script type="text/html" id="format_huoqiS">
{{# var num =  formartDate(d) }}
{{# if(num>=5){  }}
{{ num }}
{{# } else if(num==4){  }}
<beb>剩余四天</beb>
{{#  } else if(num==3){ }}
<beb>剩余三天</beb>
{{#  } else if(num==2){ }}
<ber>最后二天</ber>
{{#  } else if(num==1){ }}
<ber>最后一天</ber>
{{#  } else if(num==0){ }}
<ber>货期今天</ber>
{{#  } else if(num==-99999){ }}
{{#  } else { }}
<ber>逾期{{ num }}天</ber>
{{#  }   }}
</script>



//接受这一行的数据，计算货期日期与当前时间 差几天。
function formartDate(data){
    //日期1 到日期2 相差几天
    if(data.huoqiDate){
        var num = dateDiff(getCurrDate(),data.huoqiDate) ;
        return num;
    }else{
        return -99999;
    }
}

合计行数据。统计行数据

<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'/v2/static/json/table/demo3.json'
    ,toolbar: true
    ,title: '用户数据表'
    ,totalRow: true
    ,cols: [[
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计行'}
      ,{field:'username', title:'用户名', width:120, edit: 'text'}
      ,{field:'email', title:'邮箱', width:150, edit: 'text'}
      ,{field:'experience', title:'积分', width:100, sort: true, totalRow: true}
      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
      ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
      ,{field:'sign', title:'签名'}
      ,{field:'city', title:'城市', width:100}
      ,{field:'ip', title:'IP', width:120}
      ,{field:'joinTime', title:'加入时间', width:120}
    ]]
    ,page: true
    ,response: {
      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
    }
    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
      return {
        "code": res.status, //解析接口状态
        "msg": res.message, //解析提示文本
        "count": res.total, //解析数据长度
        "data": res.rows.item //解析数据列表
      };
    }
  });
});
</script>