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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

浣熊干面包 2017-11-17 11:25:00 浏览748
展开阅读全文

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,如需转载请自行联系原作者


网友评论

登录后评论
0/500
评论
浣熊干面包
+ 关注