Thinkphp+layui数据表格利⽤layui数据表格实现异步获取数据
⾸先看⼀下效果：
下⾯代码中已经包含数据分页、数据操作等。必须将后台数据转化为json数据才能被layui表格接受。以下是我的代码
html：
<table  id="test" lay-filter="test" lay-data="{id: 'test'}" ></table>
//头部⼯具栏
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-sm"  lay-event="addData">新增  <span class="glyphicon glyphicon-plus"></span></button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">提交选中⾏</button>
<button class="layui-btn layui-btn-sm" lay-event="refresh">刷新表格</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="dels">删除选中⾏</button>
</div>
</script>
//⾃增序号
<script type="text/html" id="zizeng">
{{d.LAY_TABLE_INDEX+1}}
</script>
//操作栏
<script type="text/html" id="barDemo">
<a class="download" ><i class="layui-icon layui-icon-download-circle toolbars"  lay-event="find" title="下载附件" ></i></a>        <a ><i class="layui-icon layui-icon-edit toolbars"  lay-event="edit" title="编辑" ></i> </a>
<a ><i class="layui-icon layui-icon-ok toolbars"  lay-event="confirm" title="确认" ></i> </a>
<a ><i class="layui-icon layui-icon-delete" lay-event="del" title="删除" ></i> </a>
</script>
//⾃定义模板
<script type="text/html" id="status">
{{# if(d.status ==0){ }}
待提交
{{#
}else{    }}
<div style = "color:red;">(经修改)，待提交</div>
{{#  }  }}
</script>
<script type="text/html" id="enclosure">
{{# losure ==null){ }}
<button class="layui-btn layui-btn-danger layui-btn-xs">⽆</button>
{{#
}else{    }}
<button class="layui-btn layui-btn-success layui-btn-xs" >有</button>
{{#  }  }}
</script>
js:
<script>
layui.use('table', function(){
var table = layui.table;
even: false //开启隔⾏背景
,size: 'sm' //⼩尺⼨的表格
,
toolbar: '#toolbarDemo' //开启头部⼯具栏，并为其绑定左侧模板
,minheight:"800px"
,elem: '#test'
,page:true
,limit:10
,height:450
,url:"{:url('getDataList')}"
,where: {jx_name: "71",status:"0"}
,where: {jx_name: "71",status:"0"}
,parseData: function(res){ //res 即为原始返回的数据
// console.log(res.data)
return {
"code": 0, //解析接⼝状态
"msg": "刷新页⾯试试", //解析提⽰⽂本
"count": al, //解析数据长度
"data": res.data//解析数据列表
};
},
cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'zizeng', title:'序号', width:50, unresize: true,fixed:'left', type:'numbers'}      ,{field:'pt_id', title:'id', hide:true,type:'space'}
,{field:'jx_name', title:'奖励项⽬', width:120, sort: true }
,{field:'xm_name', title:'项⽬名称', width:120, sort: true }
,{field:'unit', title:'授奖/⽴项单位', width:150, sort: true}
,{field:'level', title:'级别/类别', width:110, sort: true}
,{field:'level2', title:'获奖/⽴项等级', width:140, sort: true}
,{field:'points1', title:'指导业绩点', width:110, sort: true}
表格网站php源码,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:130}
]]
});
//监听头部⼯具栏事件
<('toolbar(test)', function(obj){
var checkStatus = table.fig.id);
switch(obj.event){
case 'addData':
var pro = $(".layui-this").val();
var fun = 1;
var id = 0;
layer.open({
type: 2,
title: '项⽬添加',
shadeClose: true,
shade: false,
maxmin: true, //开启最⼤化最⼩化按钮
area: ['840px', '700px'],
content:['getAddData'+"?pro="+pro +"&&fun="+fun +"&&id="+id],
end: function(){
}
});
break;
case 'getCheckData':
var data = checkStatus.data;
if(data=='')
{
layer.alert("未选择数据");
}else{
layer.close(index);
$.ajax({
type: "post",
url: "{:url('confirmList')}",
dataType: "json",
data:{"ids":data},
async: false,
success: function (data) {
layer.msg("提交成功");
}
});
});
})
}
break;
case 'dels':
var data = checkStatus.data;
if(data=='')
{
layer.alert("未选择数据");
}else{
layer.close(index);
$.ajax({
type: "post",
url: "{:url('delList')}",
dataType: "json",
data:{"ids":data},
async: false,
success: function (data) {
layer.msg("提交成功");
}
});
})
}
break;
case 'refresh':
break;
};
});
//监听⾏⼯具事件
<('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
//  console.log(data.pt_id);
layer.close(index);
$.ajax({
type: "post",
url: "{:url('del')}",
dataType: "json",
data:{"id":data.pt_id},
async: false,
success: function (data) {
layer.msg("删除成功");
}
});
});
}else if(obj.event === 'edit'){
var id=data.pt_id;
var pro = $(".layui-this").val();
var fun = 2;
layui.use('layer',function(){
var layer = layui.layer;
layer.open({
type:2,
title:"项⽬修改",
shade:0.8,
area:['840px','700px'],
content:['getAddData'+"?pro="+pro +"&&fun="+fun +"&&id="+id],              end: function(){
end: function(){
}
});
})
}else if(obj.event === 'find'){
var id=data.pt_id;
var losure;
if(enclosure==null)
{
layer.alert("没有附件");
}else{
$.ajax({
type: "post",
url: "{:url('lookUp')}",
dataType: "json",
data:{"id":id},
async: false,
success: function (data) {
var url = ("../../"+data);
$(".download").attr("href",url);
$(".download").attr("download",enclosure);
}
});
}
}
else if(obj.event==='confirm')
{
//  console.log(data.pt_id);
layer.close(index);
$.ajax({
type: "post",
url: "{:url('confirm')}",
dataType: "json",
data:{"id":data.pt_id},
async: false,
success: function (data) {
layer.msg("提交成功");
}
});
});
}
})
});
</script>
php后台，这⾥放列表⽅法和删除⽅法，其他均可参照：
public function lists()
{
$notice = Db::name('notice')->where('type',7)->select();        $this->assign('notice',$notice);
$project=Db::name('project')->select();
$this->assign('project',$project);
return $this->fetch('lists');