bootstrap table

1. bootstrap table 

1) ：jsp 部分

<div class="panel-body">

    <table id="brid">

    </table>

</div>

2) js部分

self.doQuery = function () {
    beginLoad();
    $("#brid").bootstrapTable('destroy');
    var queryUrl = ctx + '/xxx/list';
    $table = $('#brid').bootstrapTable({
        url: queryUrl,                      //請求背景的URL（*）
        method: 'POST',                      //請求方式（*）
        //toolbar: '#toolbar',              //工具按鈕用哪個容器
        striped: true,                      //是否顯示行間隔色
        cache: false,                       //是否使用緩存，預設為true，是以一般情況下需要設定一下這個屬性（*）
        pagination: true,                   //是否顯示分頁（*）
        sortable: true,                     //是否啟用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "server",           //分頁方式：client用戶端分頁，server服務端分頁（*）
        pageNumber: 1,                      //初始化加載第一頁，預設第一頁,并記錄
        pageSize: 10,                     //每頁的記錄行數（*）
        pageList: [10, 20, 50],        //可供選擇的每頁的行數（*）
        search: false,                      //是否顯示表格搜尋
        strictSearch: true,
        showColumns: true,                  //是否顯示所有的列（選擇顯示的列）
        showRefresh: true,                  //是否顯示重新整理按鈕
        minimumCountColumns: 2,             //最少允許的列數
        clickToSelect: true,                //是否啟用點選選中行
        //height: 500,                      //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度
        uniqueId: "ID",                     //每一行的唯一辨別，一般為主鍵列
        showToggle: true,                   //是否顯示詳細視圖和清單視圖的切換按鈕
        cardView: false,                    //是否顯示詳細視圖
        detailView: false,                  //是否顯示父子表
        //得到查詢的參數
        queryParams: function (params) {
            //這裡的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
            var temp = {
                rows: params.limit,                         //頁面大小
                page: (params.offset / params.limit) + 1,   //頁碼
                sort: params.sort,      //排序列名
                sortOrder: params.order, //排位指令（desc，asc）
                patternType: $.trim(self.xxx()),
                keyWord: $.trim(self.xxx())
            };
            return JSON.stringify(temp);
        },
        onLoadSuccess: function (data) {

        },
        onLoadError: function () {
            Ewin.alert("資料加載失敗！");
            stopLoad();
        },
        onDblClickRow: function (row, $element) {

        },
        responseHandler: responseHandler,    //調用處理響應資料的方法
        columns: [{
            checkbox: true,
            visible: false                  //是否顯示複選框
        },{
            field: 'xxxId',
            title: 'xxxxID',
            visible:false
        }, {
            field: 'xxx',
            title: 'xxx',
            visible:false
        }, {
            field: 'xxx',
            title: 'xxx',
            formatter: function(value,row,index){
                return getDictValueName("xxx",value);
            }
        },{
            field: 'xxx',
            title: 'xxx',
            formatter: function(value,row,index){
                //var a = getDictValueName("xxx",value);
                var html = '<a href="javascript:showKeyContent('+" target="_blank" rel="external nofollow" '"+row.xxxx+"'"+')" title="關鍵詞内容">' + getDictValueName("xxxx",value) + '</a>';
                return html;
            }
        }, {
            field: 'xxx',
            title: 'xxx',
            visible:false
        }, {
            field: 'xxxx',
            title: 'xxx',
            formatter: add,
        }, {
            field: 'xxx',
            title: 'xxx'
        }, {
            field: 'xxx',
            title: 'xxx',
            formatter: crtTimeFtt
        }, {
            field: "xxx",
            title: "xxx",
            align: "center",
            formatter: function (value, row, index) {
                var html = '<a href="javascript:showEditPage('+" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" '"+row.xxxId+"'"+',1)" title="修改"><i      class="glyphicon glyphicon-pencil"></i></a>&nbsp;&nbsp;&nbsp;'+
                    '<a href="javascript:showEditPage('+" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" '"+row.xxxId+"'"+',2)" title="複制"><i class="glyphicon glyphicon-duplicate"></i></a>&nbsp;&nbsp;&nbsp;'+
                    '<a href="javascript:delOneApp('+" target="_blank" rel="external nofollow" '"+row.xxxId+"'"+')" title="删除"><i class="glyphicon glyphicon-trash"></i></a>';
                return html;
            }
        }],
    });
}
           

3) 函數部分:

function showEditPage(xxxId,type) {
    beginLoad();
    var data = {};
    $.ajax({
        type: 'POST',
        url: ctx + '/xxx/findbyid',
        //data: JSON.stringify(data),
        data: {
            "xxxId":xxxId
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        success: function (data) {
            stopLoad();
            if(data.bizCode == 'xxx'){
                sessionInvalid(data);
                return;
            }
            //請求資源無權限
            if(data.bizCode == 'xxxx'){
                Ewin.alert("您無此操作權限,請聯系管理者！");
                return;
            }
            if (data.resultCode == 'xxx') {
                var xxx = data.data;
                app.initEditData(xxx,type);
                stopLoad();
                //$("#xxx").text('xxx');
                //$("#xxx").modal('show');
                $("#xxx").modal('show');
            }
            else {
                Ewin.alert(data.bizMsg);
            }
        },
        error: function(){
            stopLoad();
        }
    });
}
           

2. bootstrap table 

1) jsp部分

<table class="table table-bordered" style="border-spacing: 0;border-collapse: collapse;">
    <thead style="width: calc( 100% - 1.2em); display: table;table-layout: fixed">
    <tr <%--style="background: #CFE8F5"--%>>
        <th>xxx</th>
        <th>xxx</th>
        <th>xxx</th>
        <th>xxx</th>
        <th>xxx</th>
    </tr>
    </thead>
    <div style="display: block">
    <tbody data-bind="foreach: xxxArray" style="display: block;max-height: 200px;overflow-y: scroll">
    <tr style="display: table;width: 100%;table-layout: fixed">
        <td>
            <span data-bind='text:$index()+1'></span>
        </td>

        <td>
            <span data-bind='text: xxx'></span>
        </td>

        <td>
            <span data-bind='text: xxx'></span>
        </td>

        <td>
            <span data-bind='text: xxx'></span>
        </td>

        <td>
            <a href="#" target="_blank" rel="external nofollow"  data-bind="click: $root.removexxx">
                <i class="glyphicon glyphicon-trash"></i>
            </a>
        </td>
    </tr>
    </tbody>
    </div>
</table>
           

2) js部分

function initXxxs(sss,type) {
    var xxxArray = [];
    if(xxxDefs.length > 0){
        //修改規則組時
        for(var i=0;i<xxxDefs.length;i++){
            var setXxx = {};
            var xxx = xxxDefs[i];
            if(xxx != null){
                setXxx.checked = false;
                setXxx.xxxId = xxx.xxx;
                setXxx.xxxName = xxx.xxx;
                setXxx.xxxWeight = xxx.xxx;
                setXxx.xxxExpr = xxx.xxx;
                setXxx.xxx = crtTimeFtt(xxx.updateTime);
                setXxx.xxx = xxxDefs[i].mustFlag;
                xxxArray.push(setXxx);
            }
        }
    }
    return xxxArray;
}