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('+"'"+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('+"'"+row.xxxId+"'"+',1)" title="修改"><i      class="glyphicon glyphicon-pencil"></i></a>&nbsp;&nbsp;&nbsp;'+
                    '<a href="javascript:showEditPage('+"'"+row.xxxId+"'"+',2)" title="复制"><i class="glyphicon glyphicon-duplicate"></i></a>&nbsp;&nbsp;&nbsp;'+
                    '<a href="javascript:delOneApp('+"'"+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="#" 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;
}

没有更多推荐了,返回首页