layui 数据表格绑定demo

layui版本：v2.2.6

html展示

<table class="layui-hide" id="test" lay-filter="useruv"></table>

js展示

layui.use('table', function(){   //这个代表引用layui文件modules里面的table.js,所以检查modules是否有table.js
        var table = layui.table;
        table.render({
            elem: '#test'    //对应table里面的id
            ,url:"{:U('Home/Order/get_xml')}" //请求数据的地址
            ,cols: [[
                {field:'lock', title:'操作', width:110, templet: '#barDemo', unresize: true}
                , {field:'id', width:80, title: '编号', sort: true}   //后台对应数据的参数名
                ,{field:'sn', width:150, title: '订单编号', sort: true}
                ,{field:'distributor_name', width:100, title: '渠道名'}
                ,{field:'distributor_store_name', width:80, title: '店铺名'}
                ,{field:'distributor_order_sn', width:150, title: '分销订单编号'}
                ,{field:'status', title: '订单状态', minWidth: 80}
                ,{field:'pay_status', width:80, title: '支付状态', sort: true}
                ,{field:'create_time', width:150, title: '创建时间', sort: true}
                ,{field:'import_time', width:150, title: '导入时间', sort: true}
                ,{field:'pay_time', width:150, title: '支付时间', sort: true}
                ,{field:'ship_time', title: '发货时间', minWidth: 150, sort: true}
                ,{field:'finish_time', width:150, title: '收货时间', sort: true}
                ,{field:'sku_total', width:100, title: '商品原价', sort: true}
                ,{field:'sku_discount', width:80, title: '商品优惠', sort: true}
                ,{field:'sku_amount', width:80, title: '商品金额', sort: true}
                ,{field:'distributor_order_amount', title: '分销渠道订单金额（不含运费）', minWidth: 80}
                ,{field:'order_amount', width:80, title: '订单金额（不含运费）', sort: true}
                ,{field:'freight', width:80, title: '运费', sort: true}
                ,{field:'payable_amount', width:80, title: '应付金额（含运费）', sort: true}
                ,{field:'paid_amount', width:80, title: '已支付金额', sort: true}
            ]]
            ,id: 'testReload'
            ,page: true
        });
    });

效果展示

(1)添加操作里面“查看”事件

注意：下面的id="barDemo" 来自上面cols里面"操作"的templet的值

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>

代码如下

       layui.use('table', function(){
        var table = layui.table;
        //监听工具条
        table.on('tool(useruv)', function(obj){   //useruv只的是table的lay-filter的值
            var data = obj.data;
            if(obj.event === 'detail'){
                var id = data.id;//当前行的id
			layer.msg(id);
            }
        });
    });

(2)查询获取数据，重新加载表格

html

<div class="layui-form demoTable">
    <div class="layui-row layui-col-space10 layui-form-item" style="margin: 20px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">搜索</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <select name="select_data" id="select_data">
                        <option value="">请选择</option>
                        <option value="id">编号</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 180px;">
                    <input type="text" name="keyword" id="keyword" placeholder="输入商品关键字" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>
</div>

js

  layui.use('table', function(){
        var table = layui.table;
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#select_data');
                var keyword = $('#keyword');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: demoReload.val(),
                            keyword:keyword.val()
                        }
                    }
                });
            }
        };


        $('.demoTable .layui-btn').on('click', function(){
            var demoReload = $('#select_data').val();
            var keyword = $('#keyword').val();
            if(demoReload==''){
                layer.msg('请选择你要查询的数据');
                return false;
            }
            if(keyword==''){
                layer.msg('请填写数据');
                return false;
            }
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

展示如下

后台php代码格式

/*$_GET['key']:条件查询获取参数*/
$where=array();
$page=$_GET['page'] ? $_GET['page']:1;
$limit=$_GET['limit']? $_GET['limit']:10;
$order_data=$orderModel->getOrderList($where,$page,$limit);
$rel['code']=0;
$rel['msg']="";
$rel['count']=$orderModel->getOrderNum($where);
$rel['data']=$order_data;
echo json_encode($rel);