bootstrap table入门demo-CSDN博客


    $(function() {
        var oTable = new TableInit();
        oTable.Init();
        $(window).resize(function() {
            $('#table').bootstrapTable('resetView', {
                height : $(window).height() - 25
            });
        });
    });
    var TableInit = function() {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function() {
            $('#table').bootstrapTable({
                url : ConstantHome + '/getListInfoDictionary', //请求后台的URL（*）
                method : 'post', //请求方式（*）
                toolbar : '#toolbar', //工具按钮用哪个容器
                toolbarAlign : 'right',//工具按钮位置
                strictSearch : true,//设置为 true启用全匹配搜索，否则为模糊搜索。
                striped : true, //是否显示行间隔色
                cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination : true, //是否显示分页（*）
                sortable : false, //是否启用排序
                sortOrder : "asc", //排序方式
                queryParams : oTableInit.queryParams,//传递参数（*）
                sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber : 1, //初始化加载第一页，默认第一页
                pageSize : 10, //每页的记录行数（*）
                pageList : [ 10, 20, 50, 100 ], //可供选择的每页的行数（*）
                strictSearch : true,
                clickToSelect : true, //是否启用点击选中行
                height : $(window).height() - 25, //自定义表格的高度，保持和页面高度一致
                uniqueId : "id", //每一行的唯一标识，一般为主键列
                dataType : "json", //返回值类型
                columns : [ {
                    checkbox : true
                }, {
                    field : 'ID',
                    title : '字典ID'
                }, {
                    field : 'TYPE_NAME',
                    title : '字典类别'
                }, {
                    field : 'TYPE_DESCRIPTION',
                    title : '字典描述'
                }, {
                    field : 'NAME',
                    title : '字典名称'
                }, {
                    field : 'CODE',
                    title : '字典编码'
                }, {
                    field : 'CREATE_TIME',
                    title : '创建时间',
                    formatter : function(value, row, index) {
                        return formatDate(value)
                    }
                }, {
                    field : 'UPDATE_TIME',
                    title : '修改时间',
                    formatter : function(value, row, index) {
                        return formatDate(value)
                    }
                }, {
                    title : '操作',
                    field : 'button',
                    align : 'center',
                    width : "150px",
                    events : oTableInit.operateEvents,
                    formatter : oTableInit.AddFunctionButton
                } ]
            });

        };

        //得到查询的参数
        oTableInit.queryParams = function(params) {
            var param = {
                limit : params.limit,
                offset : params.offset,
                search : $("input[ name='search_text' ] ").val(), //定义传输的搜索参数
                order : params.sortOrder,
                sort : params.sortName
            };
            search_trim(param);
            return param;

        };

        oTableInit.AddFunctionButton = function(value, row, index) {
            return [
                    '<button id="TableEdit" style="display:none;" data-id="/dictionary/dictionaryEdit" type="button" class="btn btn-warning btn-xs right10">修改</button>',

                    '<button id="TableDelete" style="display:none;" data-id="/dictionary/dictionaryDelete" type="button" class="btn btn-danger btn-xs right10">删除</button>' ]
                    .join("")
        }

        oTableInit.operateEvents = {
            'click #TableDelete' : function(e, value, row, index) {
                deleteItem(row.ID);
            },
            'click #TableEdit' : function(e, value, row, index) {
                 row.ID, //iframe的url


            }
        }

        $('#table').on('load-success.bs.table', function(data) {//table加载成功后的监听函数
        });
        return oTableInit;
    };

    function refresh() {
        $('#table').bootstrapTable('refresh', {
            query : {
                pageNumber : 1
            }
        });
    }

    function addItem(id) {
        
    }

    function deleteItem(ids) {

    }

    function deleteItemList() {

        //获取所有被选中的记录
        var rows = $("#table").bootstrapTable('getSelections');
        if (rows.length == 0) {
            layer.alert("请先选择要删除的记录!");
            return;
        }
        var ids = "";

        rows.forEach(function(value, i) {
            ids += value["ID"] + ",";
        })
        ids = ids.substring(0, ids.length - 1);
        deleteItem(ids);
    }

    function searchValue() {
        $("#table").bootstrapTable('refresh');
    }