【插件分享】【list】给大家分享下自己写的List,感觉挺好用的,也欢迎吐槽

未结贴
6 440
nins
nins 2017-07-13
悬赏:5飞吻
效果预览


list插件源码:
/**
* 扩展的公共LIST模块,基于layui扩展模块
*/

layui.define(['form','jquery', 'laypage'], function(exports){
var $ = layui.jquery, form = layui.form(), laypage = layui.laypage;

var obj = {
datas:{},//设置一个空对象数据
init:function(opt){
this.options = {
elem: opt.elem||"list",
key: opt.key||"id",
url: opt.url||"",
select: opt.select||false,
page: opt.page||false,
curr: 1,
columns: opt.columns||[],
params: opt.params||function(){return {}},
success: opt.success||function(){},
before: opt.before||function(){}
}

//是否选择框
if(this.options.select) {
this.options.columns.unshift("check");
}
//是否分页
if(this.options.page){
this.$page=$("<div class='page-bar admin-page-bar'></div>").insertAfter($("#"+this.options.elem));
}
this.options.before();
},
//列表
list:function () {
var load = layer.load(2);
var t=this,opt=t.options,p=opt.params(),pa=$.extend({},p);
if(opt.page) pa=$.extend(pa,{page:opt.curr});
postRequest(opt.url,pa,function (res) {
layer.close(load);
if(res.code===0) {
t.datas = res.datas;
}else {
layerErr(res.msg);
}
t.draw();//绘制
if(opt.select) form.render('checkbox');
if(opt.page) t.page();//分页
t.doms();
})
},
//绘制
draw:function () {
var t=this,opt=t.options,d=t.datas,list='',tb=$("#"+opt.elem).find("tbody"),col=opt.columns;
if(d.list==[]||d.list==null||d.list=='') {
list += '<tr><td colspan="99" style="text-align: center;">无数据</td></tr>';
}else {
var dt=d.list;
for(var i=0;i<dt.length;i++) {
var dr=dt[i];
list += dr[opt.key]?'<tr id="'+dr[opt.key]+'">': '<tr>';
for(var j=0;j<col.length;j++){
var c=col[j],vd='';
if(typeof c == "string") {
if(c=="check") {
vd += '<td><input type="checkbox" value="'+i+'" lay-skin="primary"></td>';
}else {
vd +='<td>'+dr[c]+'</td>';
}
}
if(typeof c == "function") {
vd = '<td>'+c(dr,i)+'</td>';
}
list += vd;
}
list += '</tr>'
}
}
$(tb).html("").append(list);
},
//分页
page:function () {
var t=this,opt=t.options,d=t.datas;
laypage({
cont:t.$page,
pages: d.total,
curr:d.page,
skip: true,
jump:function (objec,first) {
opt.curr = objec.curr;
if(!first) {
t.list();
}
}
});
},
//公共渲染
doms:function () {
//全选
form.on('checkbox(allChoose)', function(data){
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
child.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});
//执行事件
this.options.success();
},
func:{
getSelect:function () { //获取选中的值
var t=obj,opt=t.options,ids=[];
var child = $("#"+opt.elem).find('tbody .layui-form-checked');
child.each(function (index,item) {
ids.push($(item).parents('tr').attr('id'));
});
if(ids.length<=0) {
layerErr(checkError(992001));
}
return ids.join(',');
}
},
}
exports('clist',obj);
});
使用方法:
layui.use(['jquery', 'clist'], function(){
var $ = layui.jquery, clist = layui.clist;

var config = {
elem:"ctable",
params:function () {
return {
key:$("#input-search").val()
}
},
page:true,
select:true,
key:"account_id",
columns:["account_name","group_name","real_name","qq","telephone","last_login_time","last_login_ip",function (row,index) {
var list = '<div class="layui-btn-group"><a href="edit?id='+row.account_id+'" class="layui-btn layui-btn-mini">编辑</a><button class="btn-reset-pwd layui-btn layui-btn-mini">重置密码</button>';
if(row.ban==1) {
list += '<button class="btn-ban layui-btn layui-btn-danger layui-btn-mini">禁用</button>'
}else {
list += '<button class="btn-ban layui-btn layui-btn-warm layui-btn-mini">启用</button>'
}
return list + '<button class="btn-delete layui-btn layui-btn-danger layui-btn-mini">删除</button></div>';
}],
before:function (res) {
//删除所有
$(".btn-delete-all").on("click",function () {
var ids = clist.func.getSelect();
if(ids!='') {
layerConfirm("删除提示","确定要删除选中的账户吗?",function () {
easyRequest('del',{id:ids},function () {
clist.list();
})
})
}
});
//搜索
$(".btn-search").on("click",function () {
clist.list();
})
},
success:function (res) {
//单个删除
$(".btn-delete").on("click",function () {
var arr = getInfo(this);
layerConfirm("删除提示","确定要删除账户"+arr.name+"吗?</br>删除后账户将禁止登陆",function () {
easyRequest('del',{id:arr.id},function () {
clist.list();
})
})
})
//禁用
$(".btn-ban").on("click",function () {
var arr = getInfo(this);
var ban = $(this).hasClass("layui-btn-danger")?-1:1;
easyRequest('ban',{id:arr.id,ban:ban},function () {
clist.list();
})
})
//重置密码
$(".btn-reset-pwd").on("click",function () {
var arr = getInfo(this);
layerConfirm("重置密码","确定要重置账户"+arr.name+"的密码吗?</br>重置后密码为<font color='red'>111111</font>",function () {
easyRequest('reset',{id:arr.id},function () {
})
})
})
}
};
clist.init(config);
clist.list();
回帖
近期热议
layui 2.1.5 发布,局部细节优化 59
预告一下,下一个版本 table 模块会大幅增强 44
table 里面的删除按钮怎么操作 24
开放 layui 官方交流二群 23
数据表格 自定义响应体 无反应 22
form事件提交以后,后台返回的json怎么获取? 22
layui图标显示问题 21
数据表格的使用问题!!急求大佬帮忙解决 21
经多人举报,某 layui 千人群存在管理员恶意误导行为 20
java后台快速开发框架automain发布,前端部分支持且仅支持layui 19
layui

微信扫码关注 layui 公众号