edit类型 layui_layui知识梳理

layui数据表格增删改查demo

1.列表页

界面

代码

搜索昵称：

搜索

 添加文章

删除选中

批量删除

添加

查看

删除

• 全部
• 待审核
• 已审核
• 回收站

{ { d.total_favorite }}

{ {# if(d.gender == 1){ }}

男

{ {# } else if(d.gender == 2) { }}

女

{ {# } else { }}

未知

{ {# } }}

layui.use([‘table‘,‘element‘], function(){

var table = layui.table

,element = layui.element;

//第一个实例

var tableIns = table.render({

elem: ‘#demo‘

,url: ‘/admin/article/getArticleList‘ //数据接口

,method : ‘post‘

,toolbar: ‘#zq_toolbar‘ //开启头工具栏，此处default：显示默认图标，可以自定义模板，详见文档

,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增

,page: true //开启分页

,parseData: function(res){ //res 即为原始返回的数据

return {

"code": res.code, //解析接口状态

"msg": res.msg, //解析提示文本

"count": res.data.total, //解析数据长度

"data": res.data.data //解析数据列表

};

}

,cols: [[ //表头

{type:‘checkbox‘, fixed: ‘left‘}

,{field: ‘id‘, title: ‘ID‘, sort: true, fixed: ‘left‘}

,{field: ‘title‘, title: ‘标题‘}

,{field: ‘user_id‘, title: ‘作者‘}

,{field: ‘catalog_id‘, title: ‘目录‘}

,{field: ‘wechat_id‘, title: ‘公众号‘}

,{field: ‘list_order‘, title: ‘排序‘,align:‘center‘}

,{field: ‘picture‘, title: ‘封面‘,templet:‘#avatarTpl‘}

,{field: ‘view‘, title: ‘浏览量‘}

,{field: ‘is_hot‘, title: ‘推荐‘}

,{field: ‘status‘, title: ‘状态‘}

,{field: ‘abstract‘, title: ‘摘要‘}

,{field: ‘source_url‘, title: ‘来源IP‘}

,{field: ‘create_time‘, title: ‘时间‘}

,{fixed: ‘right‘,title:‘操作‘, align:‘center‘, toolbar: ‘#barDemo‘} //这里的toolbar值是模板元素的选择器

]]

});

var $ = layui.$, active = {

reload: function(){

table.reload(‘demo‘, {

page