layui监听当前页_Layui监听事件实现新增功能

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

要使用layui.layer弹出新增模态框，首先准备好模态框要显示的内容：

编号

autocomplete="off" class="layui-input"readonly="readonly">

姓名

autocomplete="off" class="layui-input">

id="btn" οnclick="formSubmit();">保存

然后加载Layui监听头部工具栏事件，当点击加号事件时，弹出新增模态框并自动生成编号：

table.on('toolbar(test)', function(obj){

var checkStatus =table.checkStatus(obj.config.id),

data = checkStatus.data; //获取选中的数据

switch(obj.event){

case 'add':

$("#formStaff").resetForm();//重置表单

var rowIndex =table.cache.test.length;//获取表格数据条数

rowIndex = Number(rowIndex - 1);//获取最后一条数据索引

if (rowIndex > -1) {

var num =table.cache.test[rowIndex].staffNum;//根据索引获取最后一条数据编号

var len = 4;

num = Number(num) +Number(1);

num = num.toString();

while(num.length

num = "0" + num;

}

$("#formStaff[name='staffNum']").val(num); layer.open({

type:1,//类型

title:' 新增员工信息',

offset:['5%','30%'],

area:['660px','560px'],//定义宽和高

shadeClose:false,//点击遮罩层关闭

content:$("#modStaff")//打开的内容

});

}

break;

}

});

代码运行效果如图：

填入员工姓名，点击保存按钮调用下面方法，提交form表单保存数据到数据库，完成新增功能。

function formSubmit(){

$("#formStaff").ajaxSubmit(function(jsonObject){

data = JSON.parse(jsonObject);

if (data.state) {

modHide();

layer.alert(data.msg, { icon :1, title: '提示' },function(layerIndex){

layer.close(layerIndex);

table.reload();

});

} else {

layer.msg(data.msg);

}

}

}