最近在用闲心大佬的layuiadmin框架开发项目,作为一个前端小白,秉承着学习并总结的习惯写下这个博客,话不多说,上代码。
<!-- 表格 -->
<div class="layui-card-body">
<table id="goodsTypeGrid" lay-filter="goodsTypeGrid" class="layui-table"></table>
</div>
<!-- 操作栏 -->
<script type="text/html" id="goodsGrid-edit">
<a class="layui-btn layui-btn-xs show" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs del" lay-event="del">删除</a>
</script>
//监听工具条
table.on('tool(goodsTypeGrid)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
userId = data.id;//获取选中行的对象的id值
if(layEvent === 'detail'){ //查看
//点击查看按钮后,打开弹出层
layer.open({
type: 2//这就是定义窗口类型的属性
,title:"详情"
,shade: 0.3
,offset: "20%"
,area: ['60%', '60%']
,btn: '确定'
,content:"showObj.html?robot="+userId //实际开发中传入真实iframe地址
,yes: function(index, layero){
layer.close(index); //关闭弹层
}
});
} else if(layEvent === 'del'){ //删除
//doSomething
} else if(layEvent === 'edit'){ //编辑
//do something
}
});
<div style="padding: 20px; background-color: #F2F2F2;">
<form class="layui-form" action="" lay-filter="showExample" >
<div class="layui-card-body">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
<div class="layui-form-item">
<label class="layui-form-label">编号:</label>
<div class="layui-input-block">
<input type="text" name="id" id="id" required lay-verify="required" placeholder="请输入编号" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
<div class="layui-form-item">
<label class="layui-form-label">姓名:</label>
<div class="layui-input-block">
<input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
<div class="layui-form-item">
<label class="layui-form-label">详情:</label>
<div class="layui-input-block">
<input type="text" name="des" id="des" required lay-verify="required" placeholder="请输入详情" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</form>
</div>
</div>
注意:要有form标签
<script>
layui.config({
base: '../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(["index","form"],function(){
var $ = layui.$
,admin = layui.admin
,form = layui.form;
//请求ajax获取机器人信息
admin.req({
url:"xxxx", //开发时传入真实接口
success:function(data){
form.val("showExample", data);
}
})
});
</script>
{
"code": "0",
"msg": "正常",
"id": 1,
"name": "123",
"des": "werw"
}
这里面的id,name,des对应的是input标签中的name属性
6. 查看一下返回的数据
返回的数据如果跟json数据一样,那就是正确的。
参考网址:https://www.layui.com/demo/form.html
结束语:刚开始接触这个框架,很多不明白的地方,踩了不少坑,也写了很多冗余代码,还在不断学习中。
目前只写到这里,后期会继续更新 编辑 和 删除 功能,有不足之处,欢迎各位大佬指教,欢迎各位留言讨论,一起学习~~嘻嘻