layui table的实现以及详细解释

版权声明：本文为博主原创文章，未经博主允许不得转载。 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里面的，