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);