ListPage分页列表对象

# ListPage分页列表对象

前端采用了Layui，并对常用功能进行了封装

# 渲染列表页面关键代码

    $(function () {
        var listPage = new ListPage({
            title : '商品管理',
            pluginNames:['table' , 'jquery','dropdown'],//不填默认为：['table' , 'jquery']
            columns : columns,
            pageUrl : ctx + '/admin/mall/goods/list.html',
            events:{
                "edit":{"title":"修改商品", formInit : formInit , formYes: goodsYesFunction , "ui":ctx + '/admin/mall/goods/updateUI.html', "operate":ctx + '/admin/mall/goods/update.html',paraKeys:{'goodsNo':'goodsNo'}, "type":"edit",btn:[],area:['100%','100%']},
                "add":{"title":"新增商品", formInit : formInit , formYes: goodsYesFunction , "ui":ctx + '/admin/mall/goods/saveUI1.html', "operate":ctx + '/admin/mall/goods/save.html', "type":"edit",btn:[],area:['100%','100%']},
                "view":{"title":"查看商品信息", formInit : formInit , "ui":ctx + '/admin/mall/goods/viewUI.html', "operate":ctx + '/admin/mall/goods/viewUI.html',paraKeys:{'goodsNo':'goodsNo'},"type":"view", "filterFields":"",btn:['取消'],area:['90%','90%']},
                "updown":{"title":"上下架商品", "ui":ctx + '/admin/mall/goods/updown.html', "operate":ctx + '/admin/mall/goods/updown.html',paraKeys:{'id':'id','goodsNo':'goodsNo'}, "type":"ajax","tips":"确认上架或下架商品？"},
                "coupon":{"title":"优惠券设置","ui":ctx + '/admin/mall/goods/couponListUI.html', "operate":ctx + '/admin/mall/goods/couponList.html',"paraKeys":{'goodsNo':'goodsNo'}, "type":"view",btn:['取消'],area:['100%','100%']},
                "various":{"title":"规格库存","ui":ctx + '/admin/mall/goodsSpecs/listUI.html', "operate":ctx + '/admin/mall/goodsSpecs/list.html',"paraKeys":{'goodsNo':'goodsNo'}, "type":"view",btn:['取消'],area:['100%','100%']},
                "comment":{"title":"评论","ui":ctx + '/admin/mall/goodsComment/listUI.html', "operate":ctx + '/admin/mall/goodsComment/list.html',"paraKeys":{'goodsNo':'goodsNo'}, "type":"view",btn:['取消'],area:['100%','100%']},
                "batchUpdateCategory":{"title":"更新类目",formYes: categoryUpdateYesFunction ,"ui":ctx + '/admin/mall/goods/batchUpdateCategory.html', "operate":ctx + '/admin/mall/goods/batchUpdateCategory.html',paraKeys:{'id':'ids'},checked:100, "type":"ajax","tips":"确定要批量更新吗？"},
                "batchUpdateBrand":{"title":"更新品牌",formYes: brandUpdateYesFunction ,"ui":ctx + '/admin/mall/goods/batchUpdateBrand.html', "operate":ctx + '/admin/mall/goods/batchUpdateBrand.html',paraKeys:{'id':'ids'},checked:100, "type":"ajax","tips":"确定要批量更新吗？"},
                "more":{"type":"other"}
            }
        });
		//调用页面初始化
		listPage.initTable();
	});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# ListPage参数配置

参数名	说明	举例
columns	table列表配置，和Layui保持一致即可	Layui文档 (opens new window)
pageUrl	列表数据请求地址
pluginNames	需要加载的Layui插件	不填默认为：['table', 'jquery']
enablePage	是否启用分页	不填默认为：true
tableId	分页列表ID	<table class="layui-hide" id="tableData" lay-filter="tableData"> </table> 默认为：tableData
limit	每页查询条数	不填默认为：10条
limits	可选查询条数	不填默认为：[10, 20, 30, 50]
events	事件触发配置	配置方式见：Event具体参数配置

# Event参数配置

下面演示代码：add 为事件名
触发该事件页面元素需要：添加 lay-event="add" 属性

events:{
	"add":{"title":"新增商品", formInit : formInit , formYes: goodsYesFunction , "ui":ctx + '/admin/mall/goods/saveUI1.html', "operate":ctx + '/admin/mall/goods/save.html', "type":"edit",btn:[],area:['100%','100%']}
}

1
2
3

参数名	说明	举例
├ title	event事件名称	如：商品管理
├ ui	请求页面地址
├ operate	数据请求地址
├ formInit	弹出子页面数据初始化	默认提供formInit方法
├ formYes	弹出子页面点击确认按钮提交数据到后台的执行方法	默认提供formYes方法
├ type	event类型	ajax、view、edit、other
│ └`ajax`	直接执行请求	可搭配 `tips` 参数使用，如：'tips':'确认要删除吗？'
│ └`edit`	弹出页面可编辑
│ └`view`	弹出页面可查看	基本元素默认都是 `禁用状态`
│ └`other`	触发自定义事件	other使用方式
│ │ └obj	行元素对象	`obj.othis` 可获得触发事件的 DOM 对象
├ btn	弹出子页面按钮
├ area	弹出子页面大小	和Layui保持一致
├ tips	提示框	可空
├ paraKeys	请求参数	传递到后台的参数：如{'id':'goodsId'} 将行数据id转化成goodsId传到后台
├ checked	最大选中数据个数	配合checkbox使用，如：checked:1 表示最多可选择一条数据添加此参数则获得批量操作能力：如批量删除/修改拼接数据默认使用 `,` 拼接 paraKeys:{'id':'ids'} 将把选择的所有id拼接成ids发送到后台

# other方法的使用

listPage.other=function(obj){
    if(obj.event==='more'){
        var dropdown=layui.dropdown;//下拉菜单组件 需要在listPage参数中配置：pluginNames:['table' , 'jquery','dropdown']
        var rowData=obj.data
        var datas=[];
        #hasPermission("mall:coupon:list")
        datas.push({'title':'优惠券','id':'coupon','rowData':rowData,'templet':'<i class="layui-icon layui-icon-note"></i> {{d.title}}'});
        #end
        #hasPermission("mall:goods_comment:list")
            datas.push({'title':'评价','id':'comment','rowData':rowData,'templet':'<i class="layui-icon layui-icon-heart"></i> {{d.title}}'});
        #end
        #hasPermission("mall:goods:save")
            datas.push({'title':'同步到微信','id':'liveGoods','rowData':rowData,'templet':'{{d.title}}'});
        #en
        //下拉菜单
        dropdown.render({
            elem: obj.othis //触发事件的 DOM 对象
            ,trigger:'click'
            ,show: true //外部事件触发即显示
            ,align:'center'
            ,data: datas
            ,click: function(menudata){
                if(menudata.id === 'coupon'){
                    var rowData=menudata.rowData;
                    var executePara={"title":"优惠券设置", "event":"coupon","ui":ctx + '/admin/mall/goods/couponListUI.html', "operate":ctx + '/admin/mall/goods/couponList.html',"paraKeys":{'goodsNo':'goodsNo'}, "type":"view",btn:['取消'],area:['100%','100%']}
                    ......
                    listPage.llnop({
                        rowData : rowData,
                        executePara:executePara
                    });
                } else if(menudata.id === 'comment'){
                    var rowData=menudata.rowData;
                    var executePara={"title":"评论", "event":"comment","ui":ctx + '/admin/mall/goodsComment/listUI.html', "operate":ctx + '/admin/mall/goodsComment/list.html',"paraKeys":{'goodsNo':'goodsNo'}, "type":"view",btn:['取消'],area:['100%','100%']
                    ......
                    listPage.llnop({
                        rowData : rowData,
                        executePara:executePara
                    });
                } else if(menudata.id === 'liveGoods'){
                    var rowData=menudata.rowData;
                    var executePara={"title":"添加微信直播商品", "event":"edit", formInit : formInit , formYes: goodsYesFunction , "ui":ctx + '/admin/mall/goods/liveGoodsSaveUI.html', "operate":ctx + '/admin/mall/goods/liveGoodsSave.html',paraKeys:{'goodsNo':'goodsNo'}, "type":"edit",btn:[],area:['100%','100%']}
                    ......
                    listPage.llnop({
                        rowData : rowData,
                        executePara:executePara
                    });
                }
            }
            ,align: 'right' //右对齐弹出（v2.6.8 新增）
            ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 39%);border-radius:3px;' //设置额外样式
        })
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

# 列表初始化成功回调

listPage.listInitCallback=function doneCallback(res , curr , count,layui){
}

1
2

权限控制通道报文处理器

邻邻商城 官方文档