列表组合

基本用法：

1.创建实例: let list = McrbHttpClient.listPage(containerId);其中参数containerId为容器id。

2.渲染: list.render(options, options2, data, callback);

参数说明：

3.分页切换触发callback回调函数，其返回值有curPage, start, end（curPage 当前页码，start 开始，end 结束）

4.赋值更新方法: list.tableupdata(data);

5.设置初始化第N页，及当前页数据：list.initList(curPage, data);

实例如下：

                <div id="tabledom"></div>
                // 测试数据
                const data = [
                    { name: "张三张三张三张三张三张三张三张三张三", age: "20", job: "经理" },
                    { name: "李四张三张三张三张三张三张三张三张三", age: "21", job: "总监" },
                    { name: "周五张三张三张三张三张三张三张三张三", age: "22", job: "实习生" },
                ];
                // table配置列表参数（参考3.4.9）
                const table_op = [
                    { key: "name", title: "姓名", align: "center", 'width':'110px', className:'width_100', isAll:true,},
                    { key: "age", title: "年龄", align: "center" },
                    { key: "job", title: "工作", align: "center",},
                    { key: "action", title: "操作", align: "center", 
                        render: function (text, data) {
                            return McrbHttpClient.tableDom.createTool(
                                [
                                    {type: "del", text: "删除", classname: "delBtn",},
                                    {type: "edit",text: "修改", classname: "editBtn",},
                                    {type: "look",text: "查看",classname: "lookBtn", },
                                ], data, function (e, type) {
                                    // e:点击行数据
                                    // type:点击事件执行类型--删除、修改、查看
                                    if (type == "del") {
                                      console.log("删除数据：");
                                      console.log(e);
                                    } else if (type == "edit") {
                                      console.log("修改数据：");
                                      console.log(e);
                                    } else if (type == "look") {
                                      console.log("查看数据：");
                                      console.log(e);
                                    }
                                }
                            );
                        },
                    },
                ];
                // pages 配置分页参数（参考3.4.10）
                var pages_op = {
                    pageSize: 3, //每页显示条数
                    totalCount: 66, //总记录数
                    curPage: 1, //当前页数，不设置则默认1
                    nav_count: 5, //显示多少个导航
                }
                
                var list = McrbHttpClient.listPage('tabledom');
                list.render(table_op, pages_op, data, function(curPage, start, end){
                    <!-- 分页切换回调函数 -->
                    console.log('测试数据动态修改数据');
                    var data= [
                        { name: (start+1)+"张三张三张三张三张三张三张三张三张三", age: "20", job: "经理" },
                        { name: (start+2)+"李四张三张三张三张三张三张三张三张三", age: "21", job: "总监" },
                        { name: (start+3)+"周五张三张三张三张三张三张三张三张三", age: "22", job: "实习生" },
                    ];
                    // 重新赋值 + 渲染
                    list.tableupdata(data)
                });
                
                // 设置初始显示第2页
                var ddccvv = [
                    { name: "4张三张三张三张三张三张三张三张三张三", age: "20", job: "经理" },
                    { name: "5李四张三张三张三张三张三张三张三张三", age: "21", job: "总监" },
                    { name: "6周五张三张三张三张三张三张三张三张三", age: "22", job: "实习生" },
                ]
                list.initList(2,ddccvv)

实例