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代碼（建議）：

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

作者：

毒逆天

出處：

https://www.cnblogs.com/dotnetcrazy

打賞：

18i4JpL6g54yAPAefdtgqwRrZ43YJwAV5z

本文版權歸作者和部落格園共有。歡迎轉載，但必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接！