zoukankan      html  css  js  c++  java
  • bootstrap table自用

    $(function() {
            //1.初始化Table
            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 + '/getListInfo', //请求后台的URL(*)
                    method : 'post', //请求方式(*)
                    toolbar : '#toolbar', //工具按钮用哪个容器
                    toolbarAlign : 'right',//工具按钮位置
                    strictSearch : true,//设置为 true启用全匹配搜索,否则为模糊搜索。
                    striped : true, //是否显示行间隔色
                    cache : false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                    pagination : true, //是否显示分页(*)
                    queryParams : oTableInit.queryParams,//传递参数(*)
                    sidePagination : "server", //分页方式:client客户端分页,server服务端分页(*)
                    pageNumber : 1, //初始化加载第一页,默认第一页
                    pageSize : 10, //每页的记录行数(*)
                    pageList : [ 10, 20, 50, 100 ], //可供选择的每页的行数(*)
                    strictSearch : true,
                    clickToSelect : true, //是否启用点击选中行
                    height : $(window).height() - 25, //自定义表格的高度,保持和页面高度一致
                    //height : 460, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                    uniqueId : "id", //每一行的唯一标识,一般为主键列
                    dataType : "json", //返回值类型
                    columns : [ {
                        checkbox : true
                    }, {
                        field : 'num',//可不加
                        title : '序号',//标题  可不加
                        "36px",
                        formatter : function(value, row, index) {
                            var pageSize=$('#table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                            var pageNumber=$('#table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                            return pageSize * (pageNumber - 1) + index + 1;
                        }
                    }, {
                        field : 'ID',
                        title : '主键',
                        visible : false
    
                    }, {
                        field : 'appType',
                        title : 'app类型',
                        width : '50px',
                        formatter : function(value, row, index) {
                            return formatAppType(value)
                        }
                    }, {
                        field : 'version',
                        title : '版本号',
                        "30px",
                    }, {
                        field : 'uploadApp',
                        title : 'apk',
                        "45px",
                        formatter : oTableInit.formatUrl
                    }, {
                        field : 'newFeature',
                        title : '新特性'
                    }, {
                        field : 'isEnforcement',
                        title : '是否强制更新',
                        "45px",
                        formatter : function(value, row, index) {
                            return formatEnforcement(value)
                        }
                    }, {
                        field : 'isCheck',
                        title : '审核状态',
                        width : "110px",
                        formatter : function(value, row, index) {
                            if(!authority["/appEdition/EditSave"]){
                                var dict = [[${check_status}]];
                                return formatTypeByCode(dict,value); 
                            }
                            let audit="";
                            audit+='<select data-number="'+row.id+'" id="isCheck'+row.id+'" name="isCheck" class="tdselect">';
                            if(row.isCheck==0){
                                audit+='<option selected="selected" value="0">待审核</option>';
                                audit+='<option value="1">审核通过</option>';
                                audit+='<option value="2">审核拒绝</option>';
                            }else if(row.isCheck==1){
                                audit+='<option value="0">待审核</option>';
                                audit+='<option selected="selected" value="1">审核通过</option>';
                                audit+='<option value="2">审核拒绝</option>';
                            }else if(row.isCheck==2){
                                audit+='<option value="0">待审核</option>';
                                audit+='<option value="1">审核通过</option>';
                                audit+='<option selected="selected" value="2">审核拒绝</option>';
                            }
                            audit+='</select>';
                            return audit;
                        }
                    }, {
                        field : 'downNumber',
                        title : '下载次数',
                        "45px",
                    }, {
                        field : 'createTime',
                        title : '创建时间',
                        "146px",
                        formatter : function(value, row, index) {
                            return formatDate(value)
                        }
                    }, {
                        field : 'updateTime',
                        title : '修改时间',
                        "146px",
                        formatter : function(value, row, index) {
                            return formatDate(value)
                        }
                    }, {
                        title : '操作',
                        field : 'button',
                        align : 'center',
                        width : "160px",
                        events : oTableInit.operateEvents,
                        formatter : oTableInit.AddFunctionButton
                    } ]
                });
    
            };
            
            oTableInit.formatUrl= function(value, row, index) {
                return [
                    '<a href="'+value+'">下载</a>'
                ].join("")
            }
    
            //得到查询的参数
            oTableInit.queryParams = function(params) {
                var param = {
                    limit : params.limit,
                    offset : params.offset,
                    search : $("select[ name='search_text' ] ").val(), //定义传输的搜索参数
                    order : params.sortOrder,
                    sort : params.sortName
                };
                search_trim(param);
                return param;
    
            };
    
            oTableInit.AddFunctionButton = function(value, row, index) {
                var x1 = x2 = x3 = "display:none";
                if(authority["/appEdition/view"]){x1 = ""}
                if(authority["/appEdition/edit"]){x2 = ""}
                if(authority["/appEdition/Delete"]){x3 = ""}
                return [
                        '<button id="TableView" style="'+x1+'" type="button" class="btn btn-info btn-xs right10">详情</button>',
    
                        '<button id="TableEdit" style="'+x2+'" type="button" class="btn btn-warning btn-xs right10">修改</button>',
    
                        '<button id="TableDelete" style="'+x3+'" type="button" class="btn btn-danger btn-xs right10">删除</button>' ]
                        .join("")
            }
    
            oTableInit.operateEvents = {
                'click #TableView' : function(e, value, row, index) {
                    layer.open({
                        type : 2,
                        title : '详情',
                        maxmin: true,
                        area : [ '70%', '70%' ],
                        content : ConstantHome + '/view?id=' + row.id, //iframe的url
                    });
                },
                'click #TableDelete' : function(e, value, row, index) {
                    deleteItem(row.id);
                },
                'click #TableEdit' : function(e, value, row, index) {
                    layer.open({
                        type : 2,
                        title : '修改',
                        maxmin: true,
                        area : [ '70%', '70%' ],
                        content : ConstantHome + '/edit?id=' + row.id, //iframe的url
                    });
                }
            }
    
            $('#table').on('load-success.bs.table', function(data) {//table加载成功后的监听函数
                $(".pull-right").css("display", "block");
            
                $("select[name='isCheck']").change(function(){
                    
                    let id=$(this).attr("data-number");
                    let isCheck=$(this).val();
                    let data={
                        id:id,
                        isCheck:isCheck    
                    };
                    
                    layer.confirm("确定修改审核状态吗?", {
                        btn: ["确定","取消"],
                        closeBtn: 0
                    }, function(index){
                        // 修改审核状态
                        postData(ConstantHome+'/EditSave',data,function(ret){
                            if(!paramIsNull(ret)){
                                if(ret.code==0){
                                    layer.msg("修改审核状态成功");
                                    setTimeout(function(){
                                        refresh2();
                                    },1000);
                                }else{
                                    if (ret.code == null) {
                                        layer.open({
                                            title : '您没有权限',
                                            content : ret
                                        });
    
                                    } else {
                                        layer.msg(ret.msg);
                                    }
                                }
                            }else{
                                layer.msg('服务器繁忙,请重试');
                            }
                        }); 
                    }, function(index){
                        layer.close(index);
                        //refresh();
                    });
                });
    
                //加载完成后执行 界面权限控制
                //judgeAuthority();
                setTimeout(function(){
                    $('#table').bootstrapTable('resetView', {
                        height : $(window).height() - 25
                    });
                },0)
                
            });
            return oTableInit;
        };
  • 相关阅读:
    Halcon各个算子角度计算方式汇总
    阈值分割算子之OSTU算法
    Halcon18--深度学习应用问题记录
    Halcon18新技术
    Halcon之3D重建
    关于数组排序(顺序,逆序)
    封装jq的ajax
    h5在微信生成分享海报(带二维码)
    使用mintUI的总结
    时间戳转日期
  • 原文地址:https://www.cnblogs.com/beimingbingpo/p/9776419.html
Copyright © 2011-2022 走看看