03.LoT.UI 前后台通用框架分解系列之——多样的表格

简介:

LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui

LoT.UI开源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI

先看在LoT.UI里面的应用效果图:

关键代码解析:

  引用部分:

  

  

  HTML代码:  

<div id="lotToolbar" class="btn-group">
<button type="button" class="btn btn-default" id="lotadd"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn btn-default" id="lotrerecover"><i class="glyphicon glyphicon-share-alt"></i></button>
<button type="button" class="btn btn-default" id="lotremove"><i class="glyphicon glyphicon-trash"></i></button>
</div>
<table id="lotTable"></table>

  初始化Js代码(建议):

  

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
var lotTab = $('#lotTable');
         $(document).ready(function () {
             lotTab.bootstrapTable({
                 toolbar: '#lotToolbar',                     //自定工具
                 method: 'get',                              //请求方式
                 url: '/Demo/data.json',                     //请求地址
                 queryParams: { searchText: '' },            //传递参数
                 height: 500,                                //表格高度
                 pagination: true,                           //启用分页
                 pageSize: 10,                               //每页条数
                 pageList: [20, 50, 100, 200, 500],          //显示条数
                 search: true,                               //启用搜索
                 searchOnEnterKey: true,                     //回车搜索
                 //strictSearch: true,                       //精确搜索(默认模糊)
                 showColumns: true,                          //内容选框
                 showRefresh: true,                          //启用刷新
                 clickToSelect: true,                        //单行选中
                 showPaginationSwitch: true,                 //条数显示
                 maintainSelected: true,                     //记住选中(分页或搜索时保留选中状态)
                 striped: true,                              //隔行变色
                 //escape: true,                               //转义HTML(不需要自己转义了)
                 columns: [
                     {
                         field: 'State',
                         checkbox: true
                     },
                     {
                         field: 'Id',
                         title: '序列号',
                         align: 'center',
                         sortable: true
                     },
                     {
                         field: 'SName',
                         title: '超市名',
                         align: 'center',
                         sortable: true,
                     },
                     {
                         field: 'MName',
                         title: '菜单名',
                         align: 'center',
                         sortable: true
                     },
                    {
                        field: 'MPrice',                           //字段名字
                        title: '价格点',                           //标题名字
                        align: 'center',                           //对齐方式
                        sortable: true,                            //支持排序
                        formatter: function (value, row, index) {  //格式方法
                            //保留小数点两位
                            var s = value.toString();
                            var rs = s.indexOf('.');
                            if (rs <  0 ) {
                                rs = s.length;
                                s += '.';
                            }
                            while (s.length <= rs + 2) {
                                s += '0';
                            }
                            return s;
                        }
                    },
                    {
                        field: 'MType',
                        title: '所属类',
                        align: 'center',
                        sortable: true
                    },
                    {
                        title: '单操作',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return '<a href="#' + row.Id + '" class="edit glyphicon glyphicon-pencil"></ a >  < a  href="#" class="remove glyphicon glyphicon-trash"></ a >';
                        },
                        events: {
                            'click .edit': function (e, value, row, index) {
                                location.href = 'Edit.html?id=' + row.Id;
                            },
                            'click .remove': function (e, value, row, index) {
                                updateData(row.Id, 99);
                            }
                        }
                    }
                 ],
                 select: true
             });
         });

组件地址:https://github.com/wenzhixin/bootstrap-table


本文转自毒逆天博客园博客,原文链接:http://www.cnblogs.com/dunitian/p/5520659.html,如需转载请自行联系原作者


相关文章
|
1月前
|
人工智能 前端开发 搜索推荐
前端UI框架的发展:从混沌到秩序的演变
前端UI框架的发展:从混沌到秩序的演变
|
1月前
|
Web App开发 开发框架 前端开发
Open UI5 前端开发框架配套的 Mock Server 工作原理解析
Open UI5 前端开发框架配套的 Mock Server 工作原理解析
|
1月前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
49 2
|
1月前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
83 1
|
1月前
|
XML JSON 开发框架
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
|
1月前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
|
1月前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
1月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍