版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41619796/article/details/88887770
老规矩先看效果:
这里用的主要是layui 的弹框和table数据表格
第一:引入的文件
百度网盘地址:https://pan.baidu.com/s/1neZbcX8IieMgiBdcVPhO1g 提取码:rqdc
<link rel="stylesheet" href="../../../lib/layui/css/layui.css">
<link rel="stylesheet" href="../../../lib/layui/css/layer.css">
改成本地路径
<script src="../../../lib/layui/layui.all.js"></script>
***这里也可以用layui.js,用了all以后不用每次都得定义table,from那些类型,layui.use(table,function){}
第二:html部分,主要是弹框的内容:
<!-- 详情弹框 -->
<div id="demoX" style="width:100%;height:100%;padding:30px;box-sizing: border-box;display: none;">
<form class="layui-form">
<div class="layui-input-inline">
<input id="userTxt" type="tel" name="searContent" autocomplete="off" placeholder="请输入编号" class="layui-input">
</div>
<div class="layui-input-inline" style="width: 270px">
<button class="layui-btn" id="searchEmailCompany" data-type="reload" type='button'>
<i class="layui-icon" style="font-size: 20px; "></i> 搜索
</button>
</div>
</form>
<table id="demo" lay-filter="test"></table>
</div>
第三:js中弹框的部分:
layer.open({
type: 1,
title: '详情弹框', //不显示标题栏
closeBtn: false,
area: '900px;',
shade: 0.8,
shadeClose :false,//点击遮挡关闭
id: 'LAY_layuipro', //设定一个id,防止重复弹出
btn: false,
limits:[20,30,50],
cancel : function(){
$("#"+targetId).hide(); // 你点击右上角 X 取消后要做什么
},
btnAlign: 'c',
moveType: 1, //拖拽模式,0或者1
closeBtn:1,//右上角的x关闭叉叉
content: $("#"+targetId),
success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
});
}
});
第四:js部分table表格部分:
tabledata={
data:[
{"ID": 1, "ZXMC" :"张三", "PRODUCTNAME": "1haosassdd1233311333","ISUSING":"启用"},
{"ID": 2, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 3, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 4, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 5, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 6, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 7, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 8, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 9, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 10, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 11, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 12, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 13, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 14, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 15, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 16, "ZXMC" :"张三", "PRODUCTNAME": "1hao"},
{"ID": 17, "ZXMC" :"张三", "PRODUCTNAME": "1hao"},
{"ID": 18, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 19, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 20, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 21, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID":22, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 23, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 24, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 25, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 26, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
]
}
var table = layui.table;
table.render({
elem: '#demo',
height: 1682,
width:$("#demoX").width(),
// url: '/demo/table/user/', //数据接口
data:tabledata.data,
page: true, //开启分页
cols: [[ //表头
{
field: 'ID',
title: '编号',
width:"12%",
visible: true
}, {
field: 'ZXMC',
title: '产品编号',
width:"18%",
}, {
field: 'PRODUCTNAME',
title: '产品名称',
width:"12%",
}
, {
field: 'PRODUCTUSER',
title: '货主名称',
width:"15%",
}, {
field: 'PRICE',
width:"12%",
title: '单价(元)'
},{
field: 'BARCODERULE',
width:"12%",
title: '条码规则'
},
]]
});
第五:搜索的功能,我这里是自己写的点击调动后台,没有用layuitable里面的,