• bootstrap table入门demo


    
        $(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');
        }
    
        
  • 相关阅读:
    字符串转换日期,日期转换字符串
    List中的Map
    一维数组
    流程控制的基本语法和应用
    《代码阅读方法与实践》读书笔记1
    专业实训题目需求分析
    2015年秋季个人阅读计划
    《人件集 人性化的软件开发》阅读笔记03
    《人件集 人性化的软件开发》阅读笔记02
    《人件集 人性化的软件开发》阅读笔记01
  • 原文地址:https://www.cnblogs.com/beimingbingpo/p/9596260.html
Copyright © 2020-2023  润新知