# api

Eadmin.table

参数 说明 类型 默认值
dom 需要应用表格的dom,例如:'#p1', '.p1'等等 string -
param 参数列表 object -

# 数据结构

表格的数据接口返回的数据结构必须为以下格式

let data = {
    // 总条数,如果配置中的 page 设置为 false,则此项可以不用返回
    count : 100,
    // 数据列
    list : [
        {

        }
    ]
};
1
2
3
4
5
6
7
8
9
10

# 配置

表格的配置参数在 config 字段中

参数 说明 类型 默认值
checkbox 指定复选框绑定的字段名,如果不指定该项则无复选框 string/boolean false
fixed 固定首尾列 object -
button 按钮工具 array -
page 分页 object -
data 数据源接口地址 string -

TIP

由于参数较多,具体用法请看下面的代码以及详细注释

<div id="p1"></div>
<script>
(function(){
    Eadmin.table('#p1', {
        // 表格配置
        config : {
            // 指定复选框绑定的字段名,选中后将应用绑定的字段的值,一般为ID或者主键
            // 如果不需要则可以不指定改项,或者设置为false,则列表中将不会出现复选框
            checkbox : 'id',
            // 固定首尾列,一般使用在列表字段较多,有横向滚动条的情况下
            // 默认不会固定首尾列
            fixed : {
                // 首列,设置为true则固定首列
                first : false,
                // 尾列,设置为true则固定尾列
                last  : false
            },
            // 按钮工具
            button : [
                {
                    // 名称
                    name : '新建数据',
                    // 图标,如不需要图标,此项可不设置
                    icon : 'fa-plus-circle',
                    // 打开窗口动作,具体弹窗参数可以参考弹窗章节
                    open : {
                        title  : '新建数据',
                        width  : '30%',
                        height : '80%',
                        url    : './html/1.html',
                        btn : [
                            {
                                // 按钮名称
                                name : '确定',
                                // 执行的动作
                                action  : 'submit',
                                // 按钮是否高亮
                                highlight : true
                            }
                        ]
                    }
                },
                {
                    // 名称
                    name : '删除',
                    // 图标,如不需要图标,此项可不设置
                    icon : 'fa-trash-o',
                    // 点击时是否需要确认框
                    confirm : true,
                    // 点击时是否需要检测复选框未选中
                    check_checked : true,
                    // 执行完毕是否需要刷新,此设置在callback中不起作用
                    refresh : true,
                    // 调用的API地址,如果开启了复选框,会将复选框选中的值以 "," 分割的字符串形式
                    // 添加在api参数的后面
                    // 例如,最终调用接口的地址可能是:del.php?id=1,2,3,4,5
                    api : 'del.php'
                }
            ],
            // 分页配置,设置为 false 则表示不需要分页
            page : {
                // 每页条数
                size : 10,
                // 数字分页显示的数目
                num  : 5,
                // 传递给后端代表页数的字段名,用来后端取值
                page_field : 'page',
                // 传递给后端代表条数的字段名,用来后端取值
                size_field : 'size'
            },
            // 数据源接口地址
            data : 'table.php'
        }
    });
})();
</script>
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

# 字段

<div id="p1"></div>
<script>
(function(){
    Eadmin.table('#p1', {
        // 表格字段(列)配置
        column : [
            {
                // 字段显示名称,显示在表格里的
                name  : 'ID',
                // 字段名称,会从数据返回值里获取该字段的值
                field : 'id',
                // 该字段是否需要排序,默认 false
                order : true
            },
            {
                name   : '接口地址',
                field  : 'api',
                // 该字段是否支持搜索,默认 false
                search : true,
                // 是否是链接,注入当前行数据为参数,用来拼接链接地址
                link   : (row) => {
                    return {
                        // 链接
                        href : 'http://www.baidu.com',
                        // 是否使用原生跳转,如果不设置该项则框架内跳转
                        native : true,
                        // 如果是原生跳转则设置打开页面的方式,默认为当前页
                        target : '_blank'
                    }
                }
            },
            {
                name   : '头像',
                field  : 'icon',
                // 是否是图片元素
                img    : true,
                // 是否是头像类的图片,如果设置该值将应用头像图片样式
                head   : true
            },
            {
                name   : '封面图',
                field  : 'pic',
                // 是否是图片元素
                img    : true,
            },
            {
                name   : '状态',
                field  : 'state',
                // 该字段是否支持开启关闭状态
                switch : true,
                // 提交的接口地址,注入当前行的数据作为参数,用来拼接具体地址
                // 框架会自动把开关状态用参数 state=[开启或者关闭]拼接到指定的
                // API地址后面,例如下例最终请求接口的URL地址是:假设ID为1
                // 开启时:state.php?id=1&state=1
                // 关闭时:state.php?id=1&state=0
                api : (row) => {
                    return 'state.php?id=' + row.id
                }
            },
            {
                name : '操作',
                // 如果有button,则表示是按钮列,注入当前行的数据作为参数
                // 可用来做具体业务处理
                button : (row) => {
                    let btns = [];
                    btns[0] = {
                        name : '编辑',
                        icon : 'fa-pencil',
                        open : {
                            title : '编辑数据',
                            width : '30%',
                            height  : '80%',
                            refresh : true,
                            url : './html/1.html?id=' + row.id,
                            btn : [
                                {
                                    // 按钮名称
                                    name : '确定',
                                    // 执行的动作
                                    action  : 'submit',
                                    // 按钮是否高亮
                                    highlight : true
                                }
                            ]
                        }
                    };
                    btns[1] = {
                        name : '删除',
                        icon : 'fa-times',
                        confirm : true,
                        refresh : true,
                        api  : 'del.php?id=' + row.id
                    };
                    // 根据当前行的某个字段来改变按钮
                    if (row.status == 0)
                    {
                        btns[0] = {
                            name : '查看',
                            open : {
                                title  : '查看详情',
                                width  : '30%',
                                height : '80%',
                                url : './html/1.html?id=' + row.id
                            }
                        };
                    }
                    return btns;
                }
            }
        ]
    });
})();
</script>
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

# 搜索

如果在 column 配置了字段的 searchtrue,则表示该字段支持搜索,默认是 input 框,还支持 selectdatepickercitypicker几种模式

<div id="p1"></div>
<script>
(function(){
    Eadmin.table('#p1', {
        // 搜索配置
        search : {
            // 字段名为 column 中的字段名
            addtime : {
                // 搜索模式为日期选择器
                type : 'datepicker',
                // 详细的日历配置请查看日期选择器章节
                param : {
                    type : 'date-range'
                }
            },
            // 字段名为 column 中的字段名
            type : {
                // 下拉菜单
                type : 'select',
                // 下拉菜单的值
                option : [
                    {
                        key : 'GET',
                        val : 'get'
                    },
                    {
                        key : 'POST',
                        val : 'post'
                    }
                ]
            },
            // 字段名为 column 中的字段名
            city : {
                // 搜索模式为城市选择器
                type : 'citypicker',
                // 详细的城市配置请查看城市选择器章节
                param : {
                    format : '/'
                }
            }
        }
    });
})();
</script>
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

# 示例

下面演示一个包含全部功能的表格的配置

<div id="p1"></div>
<script>
(function(){
    Eadmin.table('#p1', {
        // 表格配置
        config : {
            // 指定复选框绑定的字段名,选中后将应用绑定的字段的值,一般为ID或者主键
            // 如果不需要则可以不指定改项,或者设置为false,则列表中将不会出现复选框
            checkbox : 'id',
            // 固定首尾列,一般使用在列表字段较多,有横向滚动条的情况下
            // 默认不会固定首尾列
            fixed : {
                // 首列,设置为true则固定首列
                first : false,
                // 尾列,设置为true则固定尾列
                last  : false
            },
            // 按钮工具
            button : [
                {
                    // 名称
                    name : '新建数据',
                    // 图标,如不需要图标,此项可不设置
                    icon : 'fa-plus-circle',
                    // 打开窗口动作,具体弹窗参数可以参考弹窗章节
                    open : {
                        title  : '新建数据',
                        width  : '30%',
                        height : '80%',
                        url    : './html/1.html',
                        btn : [
                            {
                                // 按钮名称
                                name : '确定',
                                // 执行的动作
                                action  : 'submit',
                                // 按钮是否高亮
                                highlight : true
                            }
                        ]
                    }
                },
                {
                    // 名称
                    name : '删除',
                    // 图标,如不需要图标,此项可不设置
                    icon : 'fa-trash-o',
                    // 点击时是否需要确认框
                    confirm : true,
                    // 点击时是否需要检测复选框未选中
                    check_checked : true,
                    // 执行完毕是否需要刷新,此设置在callback中不起作用
                    refresh : true,
                    // 调用的API地址,如果开启了复选框,会将复选框选中的值以 "," 分割的字符串形式
                    // 添加在api参数的后面
                    // 例如,最终调用接口的地址可能是:del.php?id=1,2,3,4,5
                    api : 'del.php'
                }
            ],
            // 分页配置
            page : {
                // 每页条数
                size : 10,
                // 数字分页显示的数目
                num  : 5,
                // 传递给后端代表页数的字段名,用来后端取值
                page_field : 'page',
                // 传递给后端代表条数的字段名,用来后端取值
                size_field : 'size'
            },
            // 数据源接口地址
            data : 'table.php'
        },
        // 表格字段(列)配置
        column : [
            {
                // 字段显示名称,显示在表格里的
                name  : 'ID',
                // 字段名称,会从数据返回值里获取该字段的值
                field : 'id',
                // 该字段是否需要排序,默认 false
                order : true
            },
            {
                name   : '接口地址',
                field  : 'api',
                // 该字段是否支持搜索,默认 false
                search : true
            },
            {
                name   : '状态',
                field  : 'state',
                // 该字段是否支持开启关闭状态
                switch : true,
                // 提交的接口地址,注入当前行的数据作为参数,用来拼接具体地址
                // 框架会自动把开关状态用参数 state=[开启或者关闭]拼接到指定的
                // API地址后面,例如下例最终请求接口的URL地址是:假设ID为1
                // 开启时:state.php?id=1&state=1
                // 关闭时:state.php?id=1&state=0
                api : (row) => {
                    return 'state.php?id=' + row.id
                }
            },
            {
                name : '操作',
                // 如果有button,则表示是按钮列,注入当前行的数据作为参数
                // 可用来做具体业务处理
                button : (row) => {
                    let btns = [];
                    btns[0] = {
                        name : '编辑',
                        icon : 'fa-pencil',
                        open : {
                            title : '编辑数据',
                            width : '30%',
                            height  : '80%',
                            refresh : true,
                            url : './html/1.html?id=' + row.id,
                            btn : [
                                {
                                    // 按钮名称
                                    name : '确定',
                                    // 执行的动作
                                    action  : 'submit',
                                    // 按钮是否高亮
                                    highlight : true
                                }
                            ]
                        }
                    };
                    btns[1] = {
                        name : '删除',
                        icon : 'fa-times',
                        confirm : true,
                        refresh : true,
                        api  : 'del.php?id=' + row.id
                    };
                    // 根据当前行的某个字段来改变按钮
                    if (row.status == 0)
                    {
                        btns[0] = {
                            name : '查看',
                            open : {
                                title  : '查看详情',
                                width  : '30%',
                                height : '80%',
                                url : './html/1.html?id=' + row.id
                            }
                        };
                    }
                    return btns;
                }
            }
        ],
        // 搜索配置
        search : {
            // 字段名为 column 中的字段名
            addtime : {
                // 搜索模式为日期选择器
                type : 'datepicker',
                // 详细的日历配置请查看日期选择器章节
                param : {
                    type : 'date-range'
                }
            },
            // 字段名为 column 中的字段名
            type : {
                // 下拉菜单
                type : 'select',
                // 下拉菜单的值
                option : [
                    {
                        key : 'GET',
                        val : 'get'
                    },
                    {
                        key : 'POST',
                        val : 'post'
                    }
                ]
            },
            // 字段名为 column 中的字段名
            city : {
                // 搜索模式为城市选择器
                type : 'citypicker',
                // 详细的城市配置请查看城市选择器章节
                param : {
                    format : '/'
                }
            }
        }
    });
})();
</script>
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194