python增删改查的框架layui_layui 学习增删改查分页（1）

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 很不错的后台模板 然后 今年有很大的进步

然后也官网下载 layui的资料