1. Html页面
2. 对应的js
layui.use(['form','layer','table'],function(){
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer,
table = layui.table;
// 加载提示
var loadingMsg = layer.msg('数据请求中', {icon: 16,scrollbar: false,time: 0});
// 初始化表格及数据
var tableIns = table.render({
elem: '#tableList',
url : 'sysUser/list',
where :{
phone : $("#phone").val()
},
cellMinWidth : 95,
toolbar: "#toolbarDemo", //让工具栏左侧显示默认的内置模板
defaultToolbar: ['filter'], // 工具栏右侧的图标按钮['filter', 'print', 'exports']
even: true, // 开启斑马线效果
page : true,
// height : "full-125",//放置在页面底部
limits : myLimits,
limit : myLimit,
id : "tableListTable",
cols : [[
{field: 'userId', title: 'ID', width:100, align:"center"},
{field: 'userName', title: '用户名', minWidth:150, align:"center"},
{field: 'state', title: '状态', width:80, align:"center", templet: stateFormat},
{field: 'sex', title: '性别', width:80, align:"center", templet: sexFormat},
{field: 'remark', title: '备注', align:"center"}
]],
done: function(res, curr, count){
// 关闭提示层
layer.close(loadingMsg);
// 绑定表格工具栏按钮的触发事件
bindTableToolbarFunction();
}
});
// ==================== 定义常规函数 ====================
// 刷新表格数据
function reloadTable(){
// 加载提示
loadingMsg = layer.msg('数据请求中', {icon: 16,scrollbar: false,time: 0});
// 重新加载数据
table.reload("tableListTable",{
page: {
curr: 1 //重新从第 1 页开始
},
where: {
phone : $("#phone").val()
},
done: function(res, curr, count){
layer.close(loadingMsg);
bindTableToolbarFunction()
}
});
}
// 搜索【此功能需要后台配合,所以暂时没有动态效果演示】
$(".search_btn").on("click",function(){
// 刷新表格
reloadTable();
});
// 格式化显示用户状态信息
function stateFormat(d){
var str;
if (d.state == 0) {
str = '禁用';
} else if(d.state == 1) {
str = '正常';
} else {
str = '锁定';
}
return str;
}
// 格式化显示sex信息
function sexFormat(d){
var str;
if (d.sex == 0) {
str = '女';
} else if(d.sex == 1) {
str = '男';
} else {
str = '未知';
}
return str;
}
// ==================== 定义事件处理 ====================
// 绑定事件集合处理(表格加载完毕和表格刷新的时候调用)
function bindTableToolbarFunction() {
// 绑定新增用户事件
$("#add").on("click", function() {
layer.alert("新增用户被调用了", {icon: 6});
});
// 绑定删除用户事件
$("#del").on("click", function() {
layer.alert("删除用户被调用了", {icon: 6});
});
}
})
新闻标题:layui的table工具栏按钮失效怎么解决?
文章转载:
http://cxhlcq.com/article/jdhpsg.html