码迷,mamicode.com
首页 > 其他好文 > 详细

表格组件---bootstrapTable

时间:2018-07-18 20:27:15      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:column   apk   object   list()   box   tip   result   window   点击其他   

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;
    };

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

 

表格组件---bootstrapTable

标签:column   apk   object   list()   box   tip   result   window   点击其他   

原文地址:https://www.cnblogs.com/alasijia/p/9332170.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!