表格组件---bootstrapTable

bootstrapTable
中文官方网站http://bootstrap-table.wenzhixin.net.cn
1.文件引用

    //1、引用Jquery
    <script src="~/Scripts/jquery-1.10.2.js"></script>

    //2、应用bootstrap
    <script src="~/Content/bootstrap/bootstrap.js"></script>
    <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
    
    //3、引用bootstrap table组件
    <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

2.bootstrap-table说明

　关于列参数的操作

    formatter:对列参数进行格式化，可以返回value值，也可以返回一个dom元素，例如一个操作按钮

    editable：实现列参数的可编辑功能。validate：对列参数的内容限制，可提示异常信息

关于分页

　　sidePagination可以在客户端分页，填写参数的值为"client",客户端分页也就是将所有数据取出，前端分页展示，弊端就是数据量比较大的时候，会查询比较慢；
              也可以在服务端分页，填写参数的值为"server",服务端分页也就是后端分页，后端接收到分页参数，每次查询传递的参数那么多数据，点击其他页面时再次出发查询请求，需要limit页面大小，offset页面偏移量两个参数

　　　　　　　　具体需要在queryParams处，填写页面大小和页面偏移量

                limit: params.limit, //页面大小
                offset: params.offset, //页码偏移量
　　hibernate 数据dao的实现层，具体的sql语句如下

    @Override
    public List findByPage(final String hql, final Object value, final int offset, final int pageSize) {
        // TODO Auto-generated method stub
        // 通过一个HibernateCallback 对象来执行查询
//        System.out.println(hql);
        List list = getHibernateTemplate().executeFind(new HibernateCallback() {
            // 实现hibernateCallback接口必须实现的方法
            @Override
            public Object doInHibernate(Session session)
                    throws HibernateException {
                // 执行hibernate 分页查询
                Query query= session.createQuery(hql);
                whereParameter((AppiumConfig)value, query);
                List result =query
                        .setFirstResult(offset).setMaxResults(pageSize).list();
                session.close();
                return result;
            }

        });
        return list;
    }

3.bootstrap-table代码

//1.初始化Table
var oTable = new TableInit();
oTable.Init();

var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_appiumconfig').bootstrapTable({
                url: '/appAppium/list.do', //请求后台的URL（*）
                method: 'get', //请求方式（*）
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: false, //是否启用排序
                sortOrder: "asc", //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                search: true, //是否显示表格搜索，此搜索会进服务端
                strictSearch: true,
                showColumns: false, //是否显示所有的列
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID", //每一行的唯一标识，一般为主键列
                showToggle: false, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                columns: [{
                    checkbox: true,
                    width: '3%',
                }, {
                    field: 'id',
                    title: 'id',
                    visible: false
                }, {
                    field: 'projectid',
                    title: 'projectid',
                    visible: false
                }, {
                    field: 'projectname',
                    title: '项目名称',
                    width: '10%',
                }, {
                    field: 'apppackage',
                    title: 'app包名',
                    width: '10%',
                }, {
                    field: 'apkupload',
                    title: 'apk路径',
                    width: '30%',
                    formatter: function (value, row, index) {
                        console.log(row);
                        return value;
                    }
                },
                    {
                        field: 'updatetime',
                        title: '更新时间',
                        width: '10%',
                    },
                    /*{
                        field: 'clientip',
                        title: '客户端IP',
                        width: '7%',
                        formatter: function (value, row, index) {
                            if (value.indexOf("**0") > -1) {
                                return '<font style="color:#00bf5f">' + value.substring(0, value.indexOf("**0")) + '</font>';
                            } else if (value.indexOf("**1") > -1) {
                                return '<font style="color:#ff0000">' + value.substring(0, value.indexOf("**1")) + '</font>';
                            } else {
                                return '<font style="color:#FF7F00">' + value + '</font>';
                            }
                        }
                    },*/
                    {
                        field: 'operationer',
                        title: '更新人员',
                        width: '10%',
                    },
                    {
                        field: 'remark',
                        title: '备注',
                        width: '20%',
                        editable: {
                            type: 'textarea',
                            title: '备注',
                            emptytext: "无备注",
                            validate: function (value) {
                                if (value.length > 200)
                                    return '备注不能超过200个字符';
                            }
                        }
                    }],
                onEditableSave: function (field, row, oldValue, $el) {
                    var status = document.getElementById("loginstatus").value;
                    if (status == "false") {
                        if (window.confirm("你未登录哦，要先去登录吗？")) {
                            var url = '/progressus/signin.jsp';
                            window.location.href = url;
                            return true;
                        } else {
                            return false;
                        }
                    }

                    $('#tb_appiumconfig').bootstrapTable("resetView");
                    $.ajax({
                        type: "post",
                        url: "/appAppium/update.do",
                        data: row,
                        dataType: 'JSON',
                        success: function (data, status) {
                            if (data.status == "success") {
                                toastr.success(data.ms);
                            } else {
                                $('#tb_appiumconfig').bootstrapTable('refresh');
                                toastr.info(data.ms);
                            }
                        },
                        error: function () {
                            toastr.error('编辑失败!');
                        },
                        complete: function () {

                        }

                    });
                }
            });
        };
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit, //页面大小
                offset: params.offset, //页码偏移量
                search: params.search, //搜索参数
                projectid: $('#search_project').val(), //项目ID
            };
            return temp;
        };

        return oTableInit;
    };

使用过程中遇到的问题后续补充，，，