1 layui 经典模块化前端框架
由职业前端倾情打造，面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案
2 比较符合 ui设计 美感不好的 同学
3 上手快 扁平化
4正片
首先在GitHub 上 star 然后 下载到本地
记录下自己的 debug 经历
1 加载table
// 表格渲染
var tableIns= table.render({
elem: '#dateTable' //指定原始表格元素选择器（推荐id选择器）
, height: vipTable.getFullHeight() //容器高度
, cols: [[ //标题栏
{checkbox: true, sort: true, fixed: true, space: true}
, {field: 'tid', title: 'ID', width: 80}
,{field: 'teid', title: 'teID', width: 80}
, {field: 'tname', title: '用户名', width: 120}
, {field: 'email', title: 'email', width: 180}
, {field: 'tel', title: 'tel', width: 120}
, {field: 'classid', title: '班级', width: 120}
, {field: 'subjectid', title: '学科', width: 120}
, {field: 'status', title: '状态', width: 70}
, {fixed: 'right', title: '操作', width: 240, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
]]
, id: 'dataCheck'
, url: './../teachers/datetable'
, method: 'get'
, page: true
, limits: [3, 6, 9, 30, 40]
, limit: 3 //默认采用3
, loading: false
, done: function (res, curr, count) {
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}
});
2 刷新 // 刷新 $('#btn-refresh').on('click', function () { tableIns.reload({ url:'./../teachers/datetable', done: function(res,curr,count){ this.where={}; } }); });
3 // 获取选中行
table.on('checkbox(test)', function (obj) {
layer.msg('checkboxtest');
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
4 //监听工具条 查询单个 修改 删除 table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性"对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
console.log(data);
$.ajax({
url: "./../teachers/deleteajax",
type: "POST",
data:{"tid":data.tid},
dataType: "json",
success: function(data){
if(data.state==1){
obj.del();
layer.close(index);
layer.msg("删除成功", {icon: 6});
}else{
layer.msg("删除失败", {icon: 5});
}
}
});
});
}
5 //查询按钮点击事件 $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); var teid = $('#teid'); var tname = $('#tname'); var status = $('#status'); var createdate = $('#createdate'); //按条件查询刷新table tableIns.reload({ url:'./../teachers/datetable', where: { teid: teid.val(), tname: tname.val(), status: status.val(), createdate: createdate.val() },done: function(res,curr,count){ this.where={}; } });
});
遇到的问题有 where 参数的重载
因为我 var tableIns= table.render({ 获取table实例 所有 table 查询重载 是 tableIns.reload({ url:'./../teachers/datetable', where: { teid: teid.val(), tname: tname.val(), status: status.val(), createdate: createdate.val() },done: function(res,curr,count){ this.where={}; } }); 开始一直在加 reload “tableid” 后面才发现不用加 table的id
最后 layui 很不错的后台模板 然后 今年有很大的进步
学习的入门可以参考 https://www.layui.com/demo/
然后也官网下载 layui的资料
