最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

layui常用方法

来源:动视网 责编:小采 时间:2020-11-03 23:10:18
文档

layui常用方法

layui常用方法:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。layui常用的方法:layui中的input radio单选框监听选择触发事件:根据给input绑定的 lay-filter 进行查找input,
推荐度:
导读layui常用方法:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。layui常用的方法:layui中的input radio单选框监听选择触发事件:根据给input绑定的 lay-filter 进行查找input,
 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

layui常用的方法:

layui中的input radio单选框监听选择触发事件:

根据给input绑定的 lay-filter 进行查找input,然后进入函数判断

<div class="layui-form-item">
 <label class="layui-form-label">长期短期</label>
 <div class="layui-input-block">
 <input type="radio" name="term" value="长期" title="长期有效"
 lay-filter="term"> <input type="radio" name="term"
 value="短期" title="短期有效" lay-filter="term">
 </div>
 </div>

 <div id="termtime" class="layui-hide">
 <div id="classdate" class="layui-form-item" style="">
 <label class="layui-form-label">开始时间:</label>
 <div class="layui-input-block">
 <input type="text" name="startdate" id="startdate"
 lay-verify="startdate" autocomplete="off" class="layui-input">
 </div>
 <label class="layui-form-label">结束时间:</label>
 <div class="layui-input-block">
 <input type="text" name="enddate" id="enddate"
 lay-verify="enddate" autocomplete="off" class="layui-input">
 </div>
 </div>
 </div>
form.on('radio(term)', function(data) {

 if (data.value == "短期") {
 $("#termtime").removeClass("layui-hide");
 } else if (data.value == "长期") {
 $("#termtime").addClass("layui-hide");
 }
 });

设置按钮根据状态条件显示不同的按钮:

<script type="text/html" id="toolbtn">

{{# if(d.state == true){}}
 <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="down">下线</a>
 {{# } else { }}
 <a class="layui-btn layui-btn-mini " lay-event="up">发布</a>
 {{# } }}
</script>

各种弹窗:

注:因为有的模块中已经声明layer有的则没有,所以这里都用layui.layer的方式来调用layer弹出层:

半透明黑色背景提示框,666毫秒自动关闭:

layui.layer.msg(returndata.msg,{time: 666});

蓝色模块,左边跳出动画,有确定按钮

layui.use('layer', function() {
 layer.alert(returndata.msg, {
 skin: 'layui-layer-lan'
 ,closeBtn: 0
 ,anim: 4 //动画类型
 });
 });

input只能输入数字,不能输入其他和小数点

<input type="text" id="num" name="num" placeholder="请输入" 
autocomplete="off" class="layui-input" onkeyup="this.value=this.value.replace(/D/g,'')" 
onafterpaste="this.value=this.value.replace(/D/g,'')">

layui遮罩层,上传开始,成功后关闭遮罩层

<script type="text/javascript">

function tanchu(){
 layui.use('layer', function(){
 var layer = layui.layer;
 
 var index = layer.load(1, {
 shade: [0.1,'#fff'] //0.1透明度的白色背景
 });
 }); 
}
function tanchuclose(){
 layui.use('layer', function(){
 var layer = layui.layer;
 
 layer.close(layer.index);
 }); 
}
</script>
<script type="text/javascript">
 function upload(){
 tanchu();
 var formData = new FormData($( "#uploadForm" )[0]); 
 $.ajax({ 
 url: '<%=basePath%>/knowledge/upload' , 
 type: 'POST', 
 data: formData, 
 async: false, 
 cache: false, 
 contentType: false, 
 processData: false, 
 success: function (returndata) { 
 
 
 tanchuclose();
 alert(returndata);
 }, 
 error: function (returndata) { 
 alert(returndata); 
 } 
 }); 
 }
 
 
 </script>

点击修改:

if(obj.event === 'setSign'){
 layer.prompt({
 formType: 2
 ,title: '修改 ID 为 ['+ data.id +'] 的角色页面'
 ,value: data.homePage
 }, function(value, index){
 layer.close(index);
 
 $.ajax({
 type:"post",
 url:"<%=basePath%>/sys/role/update",
 data:{role:JSON.stringify(data)},
 dataType:"text",//返回的
 success:function(data1) {
 layer.alert(data1.result);
 table.reload('idTest', {
 //url: '../user/selectmsguser.do'
 url: '<%=basePath%>/sys/role/list1?q=1'
 ,where: {} 
 //,height: 300
 });
 },
 error:function(msg) {
 cosole.log(msg);
 }
 }); 
 obj.update({
 sign: value
 });
 });
 }

格式化日期到时分秒:

<script type="text/html" id="timeTpl">
{{# var fn = function(){
var date=new Date(d.uptime);
var d1=date.getDate();
var y=date.getFullYear();
var m=date.getMonth() + 1;
var HH=date.getHours();
var mm=date.getMinutes(); 
var ss=date.getSeconds(); 
 return y+'/'+m+'/'+d1+' '+HH+':'+mm+':'+ss;
}; if(true){ }}
 {{ fn() }}
{{# } }}
</script>

格式化时间日期:

<script type="text/html" id="timeTpl">
{{# var fn = function(){
var date=new Date(d.createtime);
var d1=date.getDate();
var y=date.getFullYear();
var m=date.getMonth() + 1;
 return y+'/'+m+'/'+d1;
}; if(true){ }}
 {{ fn() }}
{{# } }}
</script>

密码显示 ***** :

<script type="text/html" id="pwd">
 {{# var fn = function(){
 return '***';
}; if(true){ }}
 {{ fn() }}
{{# } }} 
</script>

状态栏:

<script type="text/html" id="barDemo1">
<a class="layui-btn layui-btn-mini" id="edit" lay-event="edit">保存</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">冻结</a>
</script>
<script type="text/html" id="usernameTpl">
 <a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
</script>

远程获取数据:

<script type="text/javascript">

 layui.use('form', function() {
 var form = layui.form;
 $("#tname").children().remove();
 $.ajax({
 type : "post",
 url : "../user/selectallusersrole.do?role=3",
 dataType : "json",
 sync : "false",
 success : function(data) {
 for (var a = 0; a < data.data.length; a++) {
 $("#tname").append(
 "<option class='tname' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
 }
 form.render('select'); //用ajax追加的需要这样渲染一下
 
 },
 error : function() {
 }
 })
 
 $("#urealname").children().remove();
 $.ajax({
 type : "post",
 url : "../user/selectallusersrole.do?role=4",
 dataType : "json",
 sync : "false",
 success : function(data) {
 for (var a = 0; a < data.data.length; a++) {
 $("#urealname").append(
 "<option class='name' value="+data.data[a].id+" >"+ data.data[a].urealname + "</option>")
 }
 form.render('select'); //用ajax追加的需要这样渲染一下
 
 },
 error : function() {
 }
 })
 $("#cname").children().remove();
 $.ajax({
 type : "post",
 url : "../class/selectclass.do",
 dataType : "json",
 sync : "false",
 success : function(data) {
 for (var a = 0; a < data.data.length; a++) {
 $("#cname").append(
 "<option class='tname' value="+data.data[a].cid+" >"+ data.data[a].cname + "</option>")
 }
 form.render('select'); //用ajax追加的需要这样渲染一下
 
 },
 error : function() {
 }
 })
 
 //form.on('select(username)', function(data) {//给隐藏的input赋值(机构id)
 //$("#yincang").val(data.value);
 //});
 
 });
 </script>

表单获取Value数据:

function formLoad(element,data){
 var input = document.getElementById(element).getElementsByTagName('input');
 for(var i =0;i < input.length;i++){ 
 var inputname = input[i].name;
 for(var j in data){
 if(inputname == j){
 input[i].value = data[j];
 } 
 } 
 }
 }

这是搜索按钮,点击触发重载:

<div class="demoTable">
 搜索角色:
 <div class="layui-inline">
 <input class="layui-input" name="name" id="demoReload"
 autocomplete="off">
 </div>
 <button class="layui-btn" style="transform: translateY(-10px);"
 data-type="reload">搜索</button>
 </div>

这是重载事件:

不需要指定重载的url,只需要根据表格的ID就可以重载,这里的ID是在layui声明的的ID,不是普通的标签中id="idno"这样的id,然后再where里面传参数

<script>
layui.use('table', function(){
 var table = layui.table;
 var $ = layui.$, active = {
 reload: function(){
 var demoReload = $('#demoReload');
 
 //执行重载
 table.reload('idTest', {
 page: {
 curr: 1 //重新从第 1 页开始
 },
 where: {
 name: demoReload.val() 
 }
 });
 }
 };
 
 $('.demoTable .layui-btn').on('click', function(){
 var type = $(this).data('type');
 active[type] ? active[type].call(this) : '';
 });
});
</script>

添加或修改打开一个页面后,关闭页面重载原来页面数据表格

$("#addBookbtn").click(function(){
 layer.open({
 type: 2,
 title:['添加新书信息','font-size:22px'],
 area: ['400px', '420px'],
 content: '../jsp/addbook.jsp',
 cancel: function(index, layero){ 
 layer.confirm('是否关闭?', {icon: 3, title:'提示'}, function(index){
 layer.close(index);
 table.reload("booktable");
 });
 } 
 });
 });

更多layui相关知识请关注layui框架。

文档

layui常用方法

layui常用方法:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。layui常用的方法:layui中的input radio单选框监听选择触发事件:根据给input绑定的 lay-filter 进行查找input,
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top