表格赋予id
var table = layui.table;
table.render({
elem: ‘#test‘
,url:‘http://localhost:7300/mock/5e06d6ef83b40c266813ee7f/example/user/list‘
,toolbar: ‘#toolbarDemo‘ //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: [‘filter‘, ‘exports‘, ‘print‘, { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: ‘提示‘
,layEvent: ‘LAYTABLE_TIPS‘
,icon: ‘layui-icon-tips‘
}]
,title: ‘商品列表‘
,cols: [[
{type: ‘checkbox‘, fixed: ‘left‘}
,{field:‘id‘, title:‘平台货号‘, width:120, fixed: ‘left‘, unresize: true, sort: true}
,{field:‘username‘, title:‘商品名称‘, width:120, edit: ‘text‘}
,{field:‘email‘, title:‘品牌和分类‘, width:150, edit: ‘text‘, templet: function(res){
return ‘<em>‘+ res.email +‘</em>‘
}}
,{field:‘sex‘, title:‘价格(元)‘, width:100, edit: ‘text‘, sort: true}
,{field:‘city‘, title:‘库存‘, width:100}
,{field:‘sign‘, title:‘商品状态‘}
,{field:‘experience‘, title:‘平台推荐‘, width:120, sort: true}
,{field:‘logins‘, title:‘排序‘, width:120, sort: true}
,{field:‘joinTime‘, title:‘加入时间‘, width:120}
,{fixed: ‘right‘, title:‘操作‘, toolbar: ‘#barDemo‘, width:150}
]]
,page: true
,id:‘goodTable‘
});
页面刷新
$(".layui-laypage-btn").click();//执行分页刷新当前页
表格刷新
table.reload(‘goodTable‘, {
page: {
curr: 1
// 重新从第 1 页开始
},
where: {
key: ‘tname‘,
tname: ‘张三‘,
}
});
弹出层代码
layer.open({//弹出框
type: 1,
title: ‘添加书本类别‘,
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area: [‘80%‘, ‘80%‘],
content: $(‘#box1‘),
btn: [‘确定‘, ‘取消‘],
yes: function (index, layero) {//确定执行函数
console.log(layero);
//执行添加方法
$.getJSON(data+"/booktypeAction.action?methodName=addBookType", {
tname: $("#booktypename1").val(), ///角色名
/* booktypename: $("input[ name=‘booktypename1‘]").val(), *///角色名
}, function (data) {
/*根据后台返回的参数来进行判断 */
if (data==1) {
layer.alert(‘添加成功‘, {icon: 1, title: ‘提示‘}, function (i) {
layer.close(i);
layer.close(index);//关闭弹出层
$("#booktype")[0].reset()//重置form
})
table.reload(‘testReload‘, {//重载表格
page: {
curr: 1
// 重新从第 1 页开始
}
})
} else if(data==2){
layer.msg(‘添加失败,请勿重复添加书本类别名称‘)
}
})
赋值和取值
layui.use([‘form‘, ‘layedit‘, ‘laydate‘], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//日期
laydate.render({
elem: ‘#date‘
});
laydate.render({
elem: ‘#date1‘
});
//创建一个编辑器
var editIndex = layedit.build(‘LAY_demo_editor‘);
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return ‘标题至少得5个字符啊‘;
}
}
,pass: [
/^[\S]{6,12}$/
,‘密码必须6到12位，且不能出现空格‘
]
,content: function(value){
layedit.sync(editIndex);
}
});
//监听指定开关
form.on(‘switch(switchTest)‘, function(data){
layer.msg(‘开关checked：‘+ (this.checked ? ‘true‘ : ‘false‘), {
offset: ‘6px‘
});
layer.tips(‘温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF‘, data.othis)
});
//监听提交
form.on(‘submit(demo1)‘, function(data){
layer.alert(JSON.stringify(data.field), {
title: ‘最终的提交信息‘
})
return false;
});
//表单赋值
layui.$(‘#LAY-component-form-setval‘).on(‘click‘, function(){
form.val(‘example‘, {
"username": "贤心" // "name": "value"
,"password": "123456"
,"interest": 1
,"like[write]": true //复选框选中状态
,"close": true //开关状态
,"sex": "女"
,"desc": "我爱 layui"
});
});
//表单取值
layui.$(‘#LAY-component-form-getval‘).on(‘click‘, function(){
var data = form.val(‘example‘);
alert(JSON.stringify(data));
});
});
选项卡
layui.tree({
elem: ‘#demo‘,// 传入元素选择器
nodes: data,
// spread:true,
click: function (node) {// 点击tree菜单项的时候
var element = layui.element;
var exist = $("li[lay-id=‘" + node.id + "‘]").length;//判断是不是用重复的选项卡
if (exist > 0) {
element.tabChange(‘tabs‘, node.id);// 切换到已有的选项卡
} else {
if (node.attributes.menuURL != null && node.attributes.menuURL != "") {// 判断是否需要新增选项卡
element.tabAdd(
‘tabs‘,
{
title: node.name,
content: ‘<iframe scrolling="yes" frameborder="0" src=" ‘
+ node.attributes.menuURL
+ ‘ " width="100%" height="100%"></iframe>‘// 支持传入html
,
// width="99%" height="99%"
id: node.id
});
element.tabChange(‘tabs‘, node.id);
}
}
}
});
原文地址：https://www.cnblogs.com/zhaochengf/p/12142880.html
时间： 2024-07-31 00:23:19