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

未结贴
6 230
nins nins 发布于14天前
悬赏: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();
近期热议
layer.open中content属性值应该怎么写??? 15
即日起,【案例】必须符合以下要求 14
表情问题。。。 12
《悬赏飞吻:20》!请教各位,我想给我自定义的按钮添加同样的效果,怎么弄呢? 11
请勿将 layui 2.0 的新增组件提前挖出来公开分享 9
LayUI的下拉列表显示 8
layui之select赋值,渲染问题。求高手指点,帮忙看看! 7
求layer.js未加密版 7
这个jeui是什么鬼 6
layim聊天记录调取不出来 6