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

先看在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

<code>var lotTab = $('#lotTable');</code>

<code>        </code><code>$(document).ready(function () {</code>

<code>            </code><code>lotTab.bootstrapTable({</code>

<code>                </code><code>toolbar: '#lotToolbar',                     //自定工具</code>

<code>                </code><code>method: 'get',                              //请求方式</code>

<code>                </code><code>url: '/Demo/data.json',                     //请求地址</code>

<code>                </code><code>queryParams: { searchText: '' },            //传递参数</code>

<code>                </code><code>height: 500,                                //表格高度</code>

<code>                </code><code>pagination: true,                           //启用分页</code>

<code>                </code><code>pageSize: 10,                               //每页条数</code>

<code>                </code><code>pageList: [20, 50, 100, 200, 500],          //显示条数</code>

<code>                </code><code>search: true,                               //启用搜索</code>

<code>                </code><code>searchOnEnterKey: true,                     //回车搜索</code>

<code>                </code><code>//strictSearch: true,                       //精确搜索（默认模糊）</code>

<code>                </code><code>showColumns: true,                          //内容选框</code>

<code>                </code><code>showRefresh: true,                          //启用刷新</code>

<code>                </code><code>clickToSelect: true,                        //单行选中</code>

<code>                </code><code>showPaginationSwitch: true,                 //条数显示</code>

<code>                </code><code>maintainSelected: true,                     //记住选中（分页或搜索时保留选中状态）</code>

<code>                </code><code>striped: true,                              //隔行变色</code>

<code>                </code><code>//escape: true,                               //转义HTML（不需要自己转义了）</code>

<code>                </code><code>columns: [</code>

<code>                    </code><code>{</code>

<code>                        </code><code>field: 'State',</code>

<code>                        </code><code>checkbox: true</code>

<code>                    </code><code>},</code>

<code>                        </code><code>field: 'Id',</code>

<code>                        </code><code>title: '序列号',</code>

<code>                        </code><code>align: 'center',</code>

<code>                        </code><code>sortable: true</code>

<code>                        </code><code>field: 'SName',</code>

<code>                        </code><code>title: '超市名',</code>

<code>                        </code><code>sortable: true,</code>

<code>                        </code><code>field: 'MName',</code>

<code>                        </code><code>title: '菜单名',</code>

<code>                   </code><code>{</code>

<code>                       </code><code>field: 'MPrice',                           //字段名字</code>

<code>                       </code><code>title: '价格点',                           //标题名字</code>

<code>                       </code><code>align: 'center',                           //对齐方式</code>

<code>                       </code><code>sortable: true,                            //支持排序</code>

<code>                       </code><code>formatter: function (value, row, index) {  //格式方法</code>

<code>                           </code><code>//保留小数点两位</code>

<code>                           </code><code>var s = value.toString();</code>

<code>                           </code><code>var rs = s.indexOf('.');</code>

<code>                           </code><code>if (rs &lt; </code><code>0</code><code>) {</code>

<code>                               </code><code>rs = s.length;</code>

<code>                               </code><code>s += '.';</code>

<code>                           </code><code>}</code>

<code>                           </code><code>while (s.length &lt;= rs + 2) {</code>

<code>                               </code><code>s += '0';</code>

<code>                           </code><code>return s;</code>

<code>                       </code><code>}</code>

<code>                   </code><code>},</code>

<code>                       </code><code>field: 'MType',</code>

<code>                       </code><code>title: '所属类',</code>

<code>                       </code><code>align: 'center',</code>

<code>                       </code><code>sortable: true</code>

<code>                       </code><code>title: '单操作',</code>

<code>                       </code><code>formatter: function (value, row, index) {</code>

<code>                           </code><code>return '&lt;a href="#' + row.Id + '" class="edit glyphicon glyphicon-pencil"&gt;&lt;/</code><code>a</code><code>&gt;  &lt;</code><code>a</code> <code>href="#" class="remove glyphicon glyphicon-trash"&gt;&lt;/</code><code>a</code><code>&gt;';</code>

<code>                       </code><code>},</code>

<code>                       </code><code>events: {</code>

<code>                           </code><code>'click .edit': function (e, value, row, index) {</code>

<code>                               </code><code>location.href = 'Edit.html?id=' + row.Id;</code>

<code>                           </code><code>},</code>

<code>                           </code><code>'click .remove': function (e, value, row, index) {</code>

<code>                               </code><code>updateData(row.Id, 99);</code>

<code>                   </code><code>}</code>

<code>                </code><code>],</code>

<code>                </code><code>select: true</code>

<code>            </code><code>});</code>

<code>        </code><code>});</code>

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