ronon77
ronon77

bootstrap-table源码解读

1.使用

简单场景：

Js代码   收藏代码
  1. "table">  
  2.   
  3. $("#table").bootstrapTable({  
  4.     url: options.url,   
  5.     method: options.method || 'get',      //请求方式（*）  
  6.     //toolbar: '#toolbar',    //工具按钮用哪个容器  
  7.     striped: true,      //是否显示行间隔色  
  8.     cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）  
  9.     pagination: true,     //是否显示分页（*）  
  10.     sortable: false,      //是否启用排序  
  11.     sortOrder: "asc",     //排序方式  
  12.     //: queryParams,//传递参数（*）  
  13.     pageNumber:1,      //初始化加载第一页，默认第一页  
  14.     pageSize: 20,      //每页的记录行数（*）  
  15.     pageList: [10, 20, 50, 100],  //可供选择的每页的行数（*）  
  16.     //search: true,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端  
  17.     //strictSearch: true,  
  18.     //showColumns: true,     //是否显示所有的列  
  19.     //showRefresh: true,     //是否显示刷新按钮  
  20.     minimumCountColumns: 2,    //最少允许的列数  
  21.     clickToSelect: true,    //是否启用点击选中行  
  22.     uniqueId: "id",      //每一行的唯一标识，一般为主键列  
  23.     showToggle:false,     //是否显示详细视图和列表视图的切换按钮  
  24.     sidePagination: "server", //服务端处理分页  
  25.     columns:[  
  26.         {title: 'id',field: 'id', visible: false, align: 'center',valign: 'middle'},  
  27.         {title: '名称',   field: 'name',  align: 'center',valign: 'middle'},  
  28.         {title: '操作',field: '#',align: 'center',  
  29.             formatter:function(value,row,index){  
  30.                 var e = '+ row.id + '\',\'' +row.flowProcessId+ '\',\'' +'\')">编辑 ';  
  31.                 var f = '+ row.id + '\')">复制 ';    
  32.                 //var d = '删除 ';    
  33.                 return e+f;    
  34.             }   
  35.         }  
  36.     ];  
  37. });  

 复杂场景：。。。

 

html配置：。。。

 

2.源码

Js代码   收藏代码
  1. // @author 文志新 http://jsfiddle.net/wenyi/47nz7ez9/3/  
  2.   
  3. /**关于插件的通用构造 
  4.  * 
  5.  * 构造函数PluginName($trigger,options)传入触发元素和配置项，以便在构造函数中使用触发元素 
  6.  *     写在$.fn.pluginName外围，通过实例化$ele.data('bootstrap.table',(dat=new BootstrapTable(this,options))); 
  7.  *     实例写在触发元素的data属性中，以便调用该实例，避免多次创造实例; 
  8.  * $.fn.pluginName(option)参数是对象，执行构造函数PluginName，产生新的实例; 
  9.  *     是字符串，调用data对象中存储的实例执行方法，提供PluginName.prototype的方法接口; 
  10.  *     脱离在构造函数PluginName及其原型中的函数，通过$.fn.pluginName.util暴露接口; 
  11.  *     构造函数PluginName使用$ele.trigger提供事件接口; 
  12.  * 配置项可以是html页面data数据配置、或者$.fn.pluginName参数option配置; 
  13.  *     在html中的配置可以方便使用模板引擎传值实现初始化，后台java使用content.put方法; 
  14.  *     默认配置项利用js中一切都是对象的特点附着在PluginName.DEFAULTS; 
  15.  *  
  16.  * 构造函数渲染页面时，先填充页面内容，再绑定事件; 
  17.  *     绑定事件通过$ele.off(eventType).on(eventType,function(){})先解绑; 
  18.  * 
  19.  * 书写有分支具体情况到主干通用情况，类似先做能力检测，再做浏览器嗅探 
  20.  *     应用场景，if(){return};抽离分支具体情况，后续代码对主干通用情况进行处理 
  21.  *     优先检测具体的配置项，其次对自定义配置项、默认配置项作混合处理 
  22.  *     预先配置子条目的显示情况、数据信息，再次配置父条目的显示情况、配置信息 
  23.  * 
  24.  * if语句传递设置的详情变量时，先顺序设置头部，再针对一般情况进行处理，其次设置尾部 
  25.  *     类似插件作者对分页切换页面按钮的处理， 
  26.  *     借form、to设置起始页展示情况，再是两串...，最后是尾页的显示情况 
  27.  */  
  28.   
  29. /**关于jquery 
  30.  * 
  31.  * data: 
  32.  *     $(ele).data()以对象形式返回; 
  33.  *     $(ele).data({url:"www.baidu.com"})以对象形式设置data属性; 
  34.  *     $(ele).data(url,{param:"www.baidu.com"})以对象形式设置某个data属性; 
  35.  * 
  36.  * event: 
  37.  *     $.proxy(fn,content)调用的函数fn，传入的上下文content; 
  38.  *     $.Event(eventType,arguments)转化成事件，并传入参数，只可使用一次; 
  39.  * 
  40.  * type: 
  41.  *     $.isNumeric()判断变量是否数值型或数字值字符串，包含十六进制等; 
  42.  *     $.isFunction()判断是否为函数; 
  43.  *     $.isEmptyObject()是否为空对象; 
  44.  *     $.isPlainObject()是否为对象字面量; 
  45.  *     $.isArray()是否数组; 
  46.  *     $.type()判断类型; 
  47.  *      
  48.  * util: 
  49.  *     $.grep([]/{},function(item,index))过滤出返回值为真的数组; 
  50.  *     $.map([]/{},function(item,index))过滤出以返回值为数组元素的数组; 
  51.  *     $.inArray()返回元素在数组中的位置; 
  52.  */  
  53.   
  54. /**bootstap 
  55.  * 使用caret样式实现三角形; 
  56.  */  
  57.   
  58. /**技巧 
  59.  * 
  60.  * 使用数组拼接字符串，这样做方便使用三目运算符处理可变的内容; 
  61.  *  
  62.  * i<0?[]:{} 三目运算符后跟数组或对象; 
  63.  *  
  64.  * 三目运算符以[]包裹，获取对象的属性; 
  65.  * 
  66.  * "paramName".split(/(?=[A-Z])/) 返回结果为["param","Name"]; 
  67.  *  
  68.  * str.replace(/%s/g, function(){}) 对每个匹配值应用函数; 
  69.  * 
  70.  * [{i:1},{j:2}].sort(function(a,b){}) a、b为数组元素; 
  71.  *  
  72.  * 非字符串数组对象使用toString()方法转换后，再调用localeCompare进行比较; 
  73.  * 
  74.  * ~~利用按位非转化成整数型; 
  75.  * 
  76.  * Object.getOwnPropertyNames以数组形式返回对象的属性; 
  77.  *  
  78.  * scrollWidth包含超过可视区域的长度; 
  79.  * clientWidth可视区域不包括滚动条的宽度; 
  80.  * offsetWidth可视区域包括滚动条的宽度; 
  81.  * outerWidth包括内边距、边框的宽度; 
  82.  * outerWidth(true)包括内边距、边框、外边距的宽度; 
  83.  * innerWidth包括内边距、不包括边框的宽度; 
  84.  * 
  85.  * scrollLeft()获取元素的水平偏移，有水平滚动条的情况下; 
  86.  * scrollTop()获取元素的垂直偏移，有垂直滚动条的情况下; 
  87.  * 
  88.  * 通过hide()方法隐藏的元素可以用:hidden伪类获取; 
  89.  */  
  90.   
  91. /**关于本插件 
  92.  * 
  93.  * html页面配置项写在触发元素的data属性，在$.prototype.bootstrapTable方法将其和默认配置项合并; 
  94.  *     触发元素还包含表格内容如表头信息，在构造函数Bootstrap中获取该信息，与配置项对应内容合并; 
  95.  * js配置的优先级高于html页面配置项，initTable获取页面配置thead>tr>th、tbody>tr>td信息; 
  96.  * 表体渲染通过this.data实现，搜索、排序以及其他方法更新this.data数据，实现数据和显示分离; 
  97.  */  
  98. !function ($) {  
  99.     'use strict';  
  100.   
  101.     /**工具函数 
  102.      * 
  103.      * sprintf(str,str1,str2): 
  104.      *     sprintf("%s","text-align:center"."hello"); 
  105.      *     顺序替换文本，无替换文本返回空; 
  106.      *      
  107.      * getPropertyFromOther(list,from,to,value): 
  108.      *     getPropertyFromOther(this.columns,'field','title',value); 
  109.      *     获取field属性为value的数组元素的title属性值this.columns[i].title; 
  110.      *     应用场景：卡片式显示时需要获取标题栏的显示文案信息; 
  111.      *      
  112.      * getFieldIndex(columns,field): 
  113.      *     getFieldIndex(this.columns,field); 
  114.      *     获取field属性为field的数组元素的列坐标this.columns[i].filedIndex; 
  115.      *      
  116.      * setFieldIndex(this.options.columns): 
  117.      *     setFieldIndex([[ 
  118.                 {colspan:4,title:'Group1'},// 跨几列 
  119.                 {rowspan:3,title:'ID'},// 跨几行 
  120.             ],[ 
  121.                 {rowspan:2,title:'Name1'}, 
  122.                 {colspan:3,title:'Group2'}, 
  123.             ],[ 
  124.                 {title:'Name2'}, 
  125.                 {title:'Name3'}, 
  126.                 {title:'Name4'}, 
  127.             ]]) 
  128.      *     为每条标题栏数据设置filedIndex:所在列/列坐标; 
  129.      *     无field主键的标题栏数据以列坐标作为field属性的值; 
  130.      *     意义：借用this.columns[fieldIndex]=column构建this.columns; 
  131.      *         this.column的数据格式为{[column]}，列坐标相同的标题栏取靠后的子标题; 
  132.      *     问题：用户配置options.columns时需要顺序写就标题栏，以子标题不跨列为前提，函数的应用场景变得有限; 
  133.      *          
  134.      * getScrollBarWidth获取滚动条的宽度; 
  135.      * 
  136.      * calculateObjectValue(self,name,args,defaultValue): 
  137.      *     当name为字符串时，获取window对象的方法并执行，参数为args，没有该方法时调用sprintf替换name文本; 
  138.      *     当name为函数时，传入args执行该函数; 
  139.      *     以上情况都不是返回defaultValue; 
  140.      *     问题：原型中的方法可以直接调用，window对象的方法使用户配置变得繁琐，sprintfy也可以预先作判断后调用; 
  141.      * 
  142.      * compareObjects(objectA,objectB,compareLength): 
  143.      *     compareObjects(this.options, options, true); 
  144.      *     当compareLength为真时，先比较两个对象的长度是否相同，其次比较同名元素是否等值; 
  145.      *     当compareLength为否时，只比较两个对象的同名元素是否等值; 
  146.      *     问题：在插件中的使用，依赖this.options和options长度相等，且没有不同名的属性; 
  147.      * 
  148.      * escapeHTML转义; 
  149.      * 
  150.      * getRealHeight($el): 
  151.      *     以子元素的最大高度作为父元素的高度; 
  152.      * 
  153.      * getRealDataAttr($(this).data()): 
  154.      *     将paramName的data属性转换成param-name修改完成后输出; 
  155.      * 
  156.      * getItemField(item,field,escape): 
  157.      *     当field为函数时，获取item[field]并进行转义(escape为真的情况下); 
  158.      *     当field为字符串时，以最末一个点号后的字符获取item中的属性并进行转义(escape为真的情况下); 
  159.      *     问题：实际应用场景field多是字符串，且没有点号，可以限制用户配置使调用函数变得方便; 
  160.      * 
  161.      * isIEBrowser是否IE浏览器或者Trident呈现引擎; 
  162.      */  
  163.     var cachedWidth = null;  
  164.   
  165.     // 顺序替换文本，无替换文本返回空;  
  166.     var sprintf = function (str) {  
  167.         var args = arguments,  
  168.             flag = true,  
  169.             i = 1;  
  170.   
  171.         str = str.replace(/%s/g, function () {  
  172.             var arg = args[i++];// 对每个匹配值应用函数，i自加1，直到无匹配值;  
  173.   
  174.             if (typeof arg === 'undefined') {  
  175.                 flag = false;  
  176.                 return '';  
  177.             }  
  178.             return arg;  
  179.         });  
  180.         return flag ? str : '';  
  181.     };  
  182.   
  183.     // 获取from属性为value的数组元素的to属性值this.columns[i].to;  
  184.     // 应用场景，卡片式显示时需要获取标题栏的显示文案信息;  
  185.     var getPropertyFromOther = function (list, from, to, value) {  
  186.         var result = '';  
  187.         $.each(list, function (i, item) {  
  188.             if (item[from] === value) {  
  189.                 result = item[to];  
  190.                 return false;  
  191.             }  
  192.             return true;  
  193.         });  
  194.         return result;  
  195.     };  
  196.   
  197.     // 获取field属性为field的数组元素的列坐标this.columns[i].filedIndex;  
  198.     var getFieldIndex = function (columns, field) {  
  199.         var index = -1;  
  200.   
  201.         $.each(columns, function (i, column) {  
  202.             if (column.field === field) {  
  203.                 index = i;  
  204.                 return false;  
  205.             }  
  206.             return true;  
  207.         });  
  208.         return index;  
  209.     };  
  210.   
  211.     // 为每条标题栏数据设置filedIndex:所在列/列坐标;  
  212.     /** 
  213.      * 策略： 
  214.      * 表头分割成columns.length（总行数）* totalCol（总列数）的矩阵，以flag矩阵标记为false; 
  215.      * 各标题栏为columns[i][j].rowspan（行数）* columns[i][j].colspan（列数）的小矩阵; 
  216.      * 从左自右、从上而下遍历标题栏小矩阵，将标题栏对应的flag首行、首列标记为true; 
  217.      * 因标题栏只能跨列或跨行，不能既跨行又跨列，函数的实现依赖用户输入正确的options.columns格式， 
  218.      */  
  219.     var setFieldIndex = function (columns) {  
  220.         var i, j, k,  
  221.             totalCol = 0,  
  222.             flag = [];  
  223.   
  224.         for (i = 0; i < columns[0].length; i++) {  
  225.             totalCol += columns[0][i].colspan || 1;// 表格总列数;  
  226.         }  
  227.   
  228.         for (i = 0; i < columns.length; i++) {// columns.length表格总行数;  
  229.             flag[i] = [];  
  230.             for (j = 0; j < totalCol; j++) {  
  231.                 flag[i][j] = false;  
  232.             }  
  233.         }  
  234.   
  235.         for (i = 0; i < columns.length; i++) {  
  236.             for (j = 0; j < columns[i].length; j++) {// columns[i].length某行共有多少元素;  
  237.                 var r = columns[i][j],  
  238.                     rowspan = r.rowspan || 1,  
  239.                     colspan = r.colspan || 1,  
  240.                     // i为标题栏小矩阵在flag大矩阵的行位置;  
  241.                     // index记录标题栏小矩阵在flag大矩阵的列位置;  
  242.                     index = $.inArray(false, flag[i]);  
  243.   
  244.                 if (colspan === 1) {  
  245.                     // fieldIndex记录每个标题栏的列坐标信息;  
  246.                     r.fieldIndex = index;  
  247.                     if (typeof r.field === 'undefined') {  
  248.                         r.field = index;  
  249.                     }  
  250.                 }  
  251.   
  252.                 // 目的是让$.inArray(false, flag[i])正确获取标题栏的列坐标;  
  253.                 for (k = 0; k < rowspan; k++) {  
  254.                     flag[i + k][index] = true;  
  255.                 }  
  256.                 for (k = 0; k < colspan; k++) {  
  257.                     flag[i][index + k] = true;  
  258.                 }  
  259.             }  
  260.         }  
  261.     };  
  262.   
  263.     // 获取滚动条的宽度;  
  264.     var getScrollBarWidth = function () {  
  265.         if (cachedWidth === null) {  
  266.             var inner = $('

    ').addClass('fixed-table-scroll-inner'),  

  267.                 outer = $('
    ').addClass('fixed-table-scroll-outer'),  
  268.                 w1, w2;  
  269.   
  270.             outer.append(inner);  
  271.             $('body').append(outer);  
  272.   
  273.             w1 = inner[0].offsetWidth;  
  274.             outer.css('overflow', 'scroll');  
  275.             w2 = inner[0].offsetWidth;  
  276.   
  277.             if (w1 === w2) {  
  278.                 w2 = outer[0].clientWidth;  
  279.             }  
  280.   
  281.             outer.remove();  
  282.             cachedWidth = w1 - w2;  
  283.         }  
  284.         return cachedWidth;  
  285.     };  
  286.   
  287.     // 当name为字符串时，获取window对象的方法并执行，参数为args，没有该方法时调用sprintf替换name文本;  
  288.     // 当name为函数时，传入args执行该函数;以上情况都不是返回defaultValue;  
  289.     var calculateObjectValue = function (self, name, args, defaultValue) {  
  290.         var func = name;  
  291.   
  292.         if (typeof name === 'string') {  
  293.             // support obj.func1.func2  
  294.             var names = name.split('.');  
  295.   
  296.             if (names.length > 1) {  
  297.                 func = window;  
  298.                 $.each(names, function (i, f) {  
  299.                     func = func[f];  
  300.                 });  
  301.             } else {  
  302.                 func = window[name];  
  303.             }  
  304.         }  
  305.         if (typeof func === 'object') {  
  306.             return func;  
  307.         }  
  308.         if (typeof func === 'function') {  
  309.             return func.apply(self, args);  
  310.         }  
  311.         if (!func && typeof name === 'string' && sprintf.apply(this, [name].concat(args))) {  
  312.             return sprintf.apply(this, [name].concat(args));  
  313.         }  
  314.         return defaultValue;  
  315.     };  
  316.   
  317.     // 当compareLength为真时，先比较两个对象的长度是否相同，其次比较同名元素是否等值;  
  318.     // 当compareLength为否时，只比较两个对象的同名元素是否等值;  
  319.     var compareObjects = function (objectA, objectB, compareLength) {  
  320.         var objectAProperties = Object.getOwnPropertyNames(objectA),  
  321.             objectBProperties = Object.getOwnPropertyNames(objectB),  
  322.             propName = '';  
  323.   
  324.         if (compareLength) {  
  325.             if (objectAProperties.length !== objectBProperties.length) {  
  326.                 return false;  
  327.             }  
  328.         }  
  329.   
  330.         for (var i = 0; i < objectAProperties.length; i++) {  
  331.             propName = objectAProperties[i];  
  332.   
  333.             if ($.inArray(propName, objectBProperties) > -1) {  
  334.                 if (objectA[propName] !== objectB[propName]) {  
  335.                     return false;  
  336.                 }  
  337.             }  
  338.         }  
  339.   
  340.         return true;  
  341.     };  
  342.   
  343.     // 转义;  
  344.     var escapeHTML = function (text) {  
  345.         if (typeof text === 'string') {  
  346.             return text  
  347.                 .replace(/&/g, '&')  
  348.                 .replace(/'<')  
  349.                 .replace(/>/g, '>')  
  350.                 .replace(/"/g, '"')  
  351.                 .replace(/'/g, ''')  
  352.                 .replace(/`/g, '`');  
  353.         }  
  354.         return text;  
  355.     };  
  356.   
  357.     // 以子元素的最大高度作为父元素的高度;  
  358.     var getRealHeight = function ($el) {  
  359.         var height = 0;  
  360.         $el.children().each(function () {  
  361.             if (height < $(this).outerHeight(true)) {  
  362.                 height = $(this).outerHeight(true);  
  363.             }  
  364.         });  
  365.         return height;  
  366.     };  
  367.   
  368.     // 将paramName的data属性转换成param-name修改完成后输出;  
  369.     var getRealDataAttr = function (dataAttr) {  
  370.         for (var attr in dataAttr) {  
  371.             // "paramName".split(/(?=[A-Z])/) 返回结果为["param","Name"];  
  372.             var auxAttr = attr.split(/(?=[A-Z])/).join('-').toLowerCase();  
  373.             if (auxAttr !== attr) {  
  374.                 dataAttr[auxAttr] = dataAttr[attr];  
  375.                 delete dataAttr[attr];  
  376.             }  
  377.         }  
  378.         return dataAttr;  
  379.     };  
  380.   
  381.     // 当field为函数时，获取item[field]并进行转义(escape为真的情况下);  
  382.     // 当field为字符串时，以最末一个点号后的字符获取item中的属性并进行转义(escape为真的情况下);  
  383.     var getItemField = function (item, field, escape) {  
  384.         var value = item;  
  385.   
  386.         if (typeof field !== 'string' || item.hasOwnProperty(field)) {  
  387.             return escape ? escapeHTML(item[field]) : item[field];  
  388.         }  
  389.         var props = field.split('.');  
  390.         for (var p in props) {  
  391.             value = value && value[props[p]];  
  392.         }  
  393.         return escape ? escapeHTML(value) : value;  
  394.     };  
  395.   
  396.     // 浏览器嗅探，匹配IE浏览器或呈现引擎Trident的返回为真;  
  397.     var isIEBrowser = function () {  
  398.         return !!(navigator.userAgent.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./));  
  399.     };  
  400.   
  401.   
  402.   
  403.     /**BootstrapTable构造函数 
  404.      * 
  405.      * this.$el带table标签的触发元素，置入this.$tableBody中; 
  406.      * this.$container最外层包裹元素.bootstrap-table; 
  407.      * this.$toolbar即是.bootstrap-table下工具栏元素.fixed-table-toolbar; 
  408.      * this.$pagination即是.bootstrap-table下分页元素.fixed-table-pagination; 
  409.      * this.$tableContainer即是.bootstrap-table下标题内容元素.fixed-table-container; 
  410.      * this.$tableHeader即是.fixed-table-container下表头元素.fixed-table-header; 
  411.      * this.$tableBody即是.fixed-table-container下表体元素.fixed-table-body; 
  412.      * this.$tableFooter即是.fixed-table-container下表尾元素.fixed-table-footer; 
  413.      * this.$tableLoading即是.fixed-table-container下加载中提示元素.fixed-table-loading; 
  414.      * this.$header即是this.$el下的thead元素; 
  415.      * this.$header_即是对this.$header的克隆，置入this.$tableHeader中，目的是实现表体的滚动; 
  416.      * this.options.toolbar用户自定义按钮组，置入this.$toolbar中; 
  417.      * 
  418.      * 
  419.      *  
  420.      * this.options.column: 
  421.      *     混合js和html表头标题栏的配置项，包括thead>tr的class/title/html/rowspan/colspan/data; 
  422.      * this.columns: 
  423.      *     以this.columns[fieldIndex]的数组形式[columns]记录表体相应标题栏的数据内容; 
  424.      * this.options.data: 
  425.      *     有js配置，获取js配置，没有js配置，获取html配置; 
  426.      *     包含tbody>tr的id/class/data，tbody>tr>td的html/id/class/rowspan/title/data; 
  427.      * this.header.fields: 
  428.      *     以this.header.fields[column.fieldIndex]数组形式[field]记录表体每列数据的主键; 
  429.      *     应用场景：渲染表体td时由该主键通过getFieldIndex获取this.columns的序号; 
  430.      *     问题：不能直接通过tr的序号获取this.columns数据，或者VisibleColumns数据？？？ 
  431.      *     this.header.fields剔除了this.columns中visible为false的内容; 
  432.      * this.header.styles、this.header.classes: 
  433.      *     数组形式存储经过处理的每列数据的样式、类; 
  434.      * this.header.formatters、this.header.cellStyles、this.header.sorters: 
  435.      *     数组形式存储格式化函数、设置单元格样式函数、排序函数，或者window方法名; 
  436.      * this.header.events、this.header.sortNames、this.header.searchables: 
  437.      *     数组形式存储表体相应标题栏配置的事件events、上传排序的字段sortName、可搜索searchable; 
  438.      *     应用场景:由主键名在this.header.fields的位置锁定对应的事件、排序字段、可搜索; 
  439.      * this.header.stateField: 
  440.      *     复选框内容上传时的字段名; 
  441.      * this.data: 
  442.      *     initSearch搜索前以及执行filterBy方法前与this.options.data等值; 
  443.      *     搜索后this.data为过滤后数据; 
  444.      *     data的数据格式: 
  445.                 对象形式 
  446.                 [{   // 行tr中的属性设置 
  447.                     _data:{ 
  448.                         index:1,// 后续会自动赋值为数据在当前页的所在行号 
  449.                         field:field 
  450.                     }, 
  451.                     _id:id, 
  452.                     _class:class, 
  453.                     field1:value1,field2:value2, //填充在单元格中的显示内容，从this.header.fields数组中获取属性名field1等 
  454.                     _field_id 
  455.                 }] // 每一行特定的样式、属性根据this.options.rowStyle、this.options.rowAttributes获取 
  456.                 数组形式 
  457.                 [["field","class"]] // 数组形式不能对每一行添加特定的data属性、id以及class 
  458.                                     // 特定的的样式、属性仍可由this.options.rowStyle、this.options.rowAttributes获取 
  459.                                     // 以及data-index添加行号、data-uniqueId每行的唯一标识，根据options.uniqueId从data中获取 
  460.      * this.options.data: 
  461.      *     initSearch搜索前以及执行filterBy方法前与this.data等值; 
  462.      *     搜索后this.data为未过滤数据; 
  463.      *     应用场景：搜索未使用前后台数据交互，通过this.options.data获取新的过滤数据this.data; 
  464.      * this.searchText: 
  465.      * this.text: 
  466.      *     搜索文本; 
  467.      * this.filterColumns: 
  468.      *     options.data和this.filterColumns相符则在this.data中保留，不相符则在this.data中删除; 
  469.      *     prototype.filterBy方法使用; 
  470.      * 
  471.      *  
  472.      *  
  473.      * init(): 
  474.      *     初始化函数; 
  475.      * initLocale(): 
  476.      *     将语言包添加进配置项this.options中，数据格式是{formatLoadingMessage:fn}; 
  477.      * initContainer(): 
  478.      *     创建包裹元素this.container及其子元素this.$toolbar、this.$pagination等，为表格添加样式; 
  479.      * initTable(): 
  480.      *     获取页面thead>th、tbody>tr>td的配置内容更新options.columns、options.data配置信息; 
  481.      *     this.columns记录表体每列数据相应标题栏options.column的数据内容; 
  482.      * initHeader(): 
  483.      *     由options.columns渲染表头,th的data-field记为column[field],data数据记为column; 
  484.      *     更新this.header记录主键、样式、事件、格式化函数等，以及stateField复选框上传字段; 
  485.      *     绑定事件，包括点击排序、确认键排序、全选，更新上传数据、页面状态等; 
  486.      * initFooter(): 
  487.      *     显示隐藏表尾; 
  488.      * initData(data,type): 
  489.      *     页面初始化时this.data赋值为this.options.data; 
  490.      *     ajax交互时this.data赋值为后台返回的数据，options.data也同样更新为后台返回的数据; 
  491.      *     type为append时，表格尾部插入数据，this.data、options.data尾部插入相应数据; 
  492.      *     type为prepend时，表格顶部插入数据，this.data、options.data头部插入相应数据;  
  493.      *     前台分页的情况下调用this.initSort进行排序，后台分页以返回数据为准; 
  494.      * initSort(): 
  495.      *     onSort方法设置点击排序按钮时，更新options.sortName为相应标题栏column.field值; 
  496.      *     initSort由column.field值获得相应的sortName; 
  497.      *     调用option.sorter函数或window[option.sorter]方法进行比较排序; 
  498.      *     排序通过更新this.data数据实现,this.data渲染到页面使用initBody方法; 
  499.      * onSort(): 
  500.      *     点击排序时更新options.sortName为被排序列数据对应column[field]值，以便initSort获取sortName; 
  501.      *     更新options.sortOrder为被排序列数据对应column[order]值，或保持原有值; 
  502.      *     触发sort事件，调用initServer获取后台数据，调用initSort排序、initBody渲染表体; 
  503.      * initToolbar(): 
  504.      *     创建工具栏内的用户自定义按钮组、分页显示隐藏切换按钮、刷新按钮、筛选条目按钮; 
  505.      *     以及卡片表格显示切换按钮、搜索框，并绑定相应事件；筛选条目时触发column-switch事件; 
  506.      * onSearch(): 
  507.      *     this.text，this.options.text设为搜索框去除两端空白的值，pageNumber设为1; 
  508.      *     调用initSearch将筛选本地数据;调用updatePagination完成远程交互或单渲染本地数据; 
  509.      *     触发search事件; 
  510.      * initSearch(): 
  511.      *     前台分页的情况下，先通过this.filterColumns通过this.option.data过滤this.data数据; 
  512.      *     再通过搜索文本过滤this.data数据; 
  513.      *     输入文本和经this.header.formatters或window[this.header.formatters]函数格式化匹配比对; 
  514.      * initPagination(): 
  515.      *     初始化设置分页相关页面信息显示情况，包括当前页显示第几条到第几天数据，共几条数据，每页显示几条数据; 
  516.      *     以及每页显示数据量切换按钮，选择页面的分页栏显示情况，再绑定事件; 
  517.      *     通过options.pageNumber获取this.pageFrom、this.pageTo，以便前台分页时initBody获取相应数据; 
  518.      * updatePagination(): 
  519.      *     分页点选按钮有disabled属性则返回，无则重新布局分页显示面板; 
  520.      *     maintainSelected为否时，调用resetRows重置复选框为不选中，调用initServer交互或initbody渲染页面; 
  521.      *     initSever由后台返回数据; 
  522.      *     initPagination通过options.pageNumber取得options.pageFrom、options.pageTo; 
  523.      *     initBody由options.pageFrom、options.pageTo获取需要渲染的数据data; 
  524.      *     触发page-change事件; 
  525.      * onPageListChange(): 
  526.      *     每页显示数据量下拉列表选中时触发，替换每页显示数据量按钮文本; 
  527.      *     更新options.pageSize，通过updatePagination调用initPagination设置this.pageFrom、this.pageTo; 
  528.      *     updatePagination再调用initServer完成交互，或initBody渲染本地数据; 
  529.      * onPageFirst(): 
  530.      * onPagePre(): 
  531.      * onPageNext(): 
  532.      * onPageLast(): 
  533.      * onPageNumber(): 
  534.      *     更新options.pageNumber,通过updatePagination调用initPagination设置this.pageFrom、this.pageTo; 
  535.      *     updatePagination再调用initServer完成交互，或initBody渲染本地数据; 
  536.      *     跳转分页首页、上一页、下一页、尾页，由页码跳转; 
  537.      * initBody(): 
  538.      *     fixedScroll为否的情况下，表体移动到顶部; 
  539.      *     通过this.pageFrom、this.pageTo截取this.getData()数据row渲染表体，主要是tbody>tr以及tbody>tr>td; 
  540.      *     tbody>tr的data-index设为行号，class、id为row._class、row._id，样式、data数据通过调用函数获得; 
  541.      *     tbody>tr>td区分为卡片显示和表格显示两类，显示值取经this.header.formatters[i]处理后的row[field]; 
  542.      *     tbody>tr>td其他class、id、title、data取row[_field_class]等; 
  543.      *     绑定展开卡片详情按钮点击事件、复选框点击事件、this.header.events中的事件; 
  544.      *     触发post-body、pre-body事件;  
  545.      * initServer(): 
  546.      *     触发ajax事件（可以是用户自定义的方法options.ajax），上传数据格式为: 
  547.      *     { 
  548.      *         searchText:this.searchText, 
  549.      *         sortName:this.options.sortName, 
  550.      *         sortOrder:this.options.sortOrder, 
  551.      *         pageSize/limit:..., 
  552.      *         pageNumber/offset:..., 
  553.      *         [filter]:..., 
  554.      *         query:... 
  555.      *     } 
  556.      *     上传成功调用this.load方法，触发load-success事件、上传失败load-error事件; 
  557.      * initSearchText(): 
  558.      *     初始化若设置搜索文本，开启搜索，不支持本地数据搜索;  
  559.      * getCaret(): 
  560.      *     getCaret改变排序点击箭头的上下方向; 
  561.      * updateSelected(): 
  562.      *     全选以及全不选时改变全选复选框的勾选状态，以及tr行添加或删除selected类; 
  563.      * updateRows(): 
  564.      *     复选框选中或撤销选中后更新this.data数据中的[this.header.stateField]属性，以便上传复选框的状态; 
  565.      * resetRows(): 
  566.      *     重置，撤销复选框选中，以及data[i][that.header.stateField]赋值为false; 
  567.      * trigger(): 
  568.      *     执行this.options[BootstrapTable.EVENTS[name]]函数(类似浏览器默认事件)，并触发事件; 
  569.      * resetHeader(): 
  570.      *     一定时间内触发this.fitHeader函数调整表头的水平偏移，垂直滚动不影响表头; 
  571.      * fitHeader():   
  572.      *     克隆this.$el中的表头，置入this.$tableHeader中，出使垂直滚动时，表头信息不变; 
  573.      *     调整表体水平偏移量和表体水平一致; 
  574.      * resetFooter(): 
  575.      *     创建表尾，利用footerFormatter填充表尾内容，调用fitFooter调整表尾偏移; 
  576.      * fitFooter(): 
  577.      *     调整表尾水平偏移，设置表尾fnt-cell的宽度; 
  578.      * toggleColumn(): 
  579.      *     toggleColumn筛选条目下拉菜单点选时更新columns[i].visible信息; 
  580.      *     this.columns信息的改变，重新调用表头、表体、搜索框、分页初始化函数; 
  581.      *     当勾选的显示条目小于this.options.minimumCountColumns时，勾选的条目设置disabled属性; 
  582.      * toggleRow(): 
  583.      *     从表体中找到data-index=index或data-uniqueid=uniqueId那一行，根据visible显示或隐藏; 
  584.      * getVisibleFields(): 
  585.      *     从this.column中剔除visible为false的项，返回field数组; 
  586.      */  
  587.     var BootstrapTable = function (el, options) {  
  588.         this.options = options;  
  589.         this.$el = $(el);  
  590.         this.$el_ = this.$el.clone();// 记录触发元素的初始值，destroy销毁重置的时候使用  
  591.         this.timeoutId_ = 0;// 超时计时器，有滚动条的情况下调整表头的水平偏移量  
  592.         this.timeoutFooter_ = 0;// 超时计时器，有滚动条的情况下调整表尾的水平偏移量  
  593.   
  594.         this.init();  
  595.     };  
  596.   
  597.     BootstrapTable.DEFAULTS = {  
  598.         classes: 'table table-hover',// 触发元素table加入的样式;  
  599.         locale: undefined,// 设置语言包;  
  600.         height: undefined,// 包括分页和工具栏的高度;  
  601.         undefinedText: '-',// 无显示文本时默认显示内容;  
  602.         sortName: undefined,  
  603.         // 初始化排序字段名，须是column.filed主键名;  
  604.         // 点击排序后更新options.sortName为被排序列的主键名columns[i].field;  
  605.         // 通过主键名在this.header.fields中的序号获取sortName，比较后排序;  
  606.         sortOrder: 'asc',// 升序或降序，并且上传  
  607.         striped: false,// 触发元素table是否显示间行色  
  608.         columns: [[]],  
  609.         data: [],  
  610.         dataField: 'rows',// 后台传回data数据的字段名  
  611.         method: 'get',// ajax发送类型  
  612.         url: undefined,// ajax发送地址  
  613.         ajax: undefined,  
  614.         // 用户自定义ajax，或通过字符串调用window下的方法，对插件内配置有较多使用，调用其实不便  
  615.         cache: true,// ajax设置  
  616.         contentType: 'application/json',  
  617.         dataType: 'json',  
  618.         ajaxOptions: {},  
  619.         queryParams: function (params) {  
  620.             return params;  
  621.         },  
  622.         queryParamsType: 'limit', // undefined  
  623.         responseHandler: function (res) {  
  624.             return res;  
  625.         },// ajax处理相应的函数  
  626.         pagination: false,// 分页是否显示  
  627.         onlyInfoPagination: false,// 分页文案提示只显示有多少条数据  
  628.         sidePagination: 'client', // client or server 前台分页或后台分页  
  629.         totalRows: 0, // server side need to set  
  630.         pageNumber: 1,// 初始化显示第几页  
  631.         pageSize: 10,// 初始化页面多少条数据  
  632.         pageList: [10, 25, 50, 100],// 每页显示数据量切换配置项  
  633.         paginationHAlign: 'right', //right, left 分页浮动设置  
  634.         paginationVAlign: 'bottom', //bottom, top, both  
  635.         // 分页显示位置，上、下或上下均显示，默认底部显示  
  636.         // 设置一页显示多少条数据按钮向上下拉，还是向下下拉，默认向上下拉  
  637.         // 设置为both时，分页在上下位置均显示，设置一页显示多少条数据按钮向上下拉  
  638.         paginationDetailHAlign: 'left', //right, left 每页几行数据显示区浮动情况  
  639.         paginationPreText: '‹',// 分页上一页按钮  
  640.         paginationNextText: '›',// 分页下一页按钮  
  641.         search: false,// 是否支持搜索  
  642.         searchOnEnterKey: false,// enter键开启搜索  
  643.         strictSearch: false,// 搜索框输入内容是否须和条目显示数据严格匹配，false时只要键入部分值就可获得结果  
  644.         searchAlign: 'right',// 搜索框对齐方式  
  645.         selectItemName: 'btSelectItem',// 复选框默认上传name值  
  646.         showHeader: true,// 显示表头，包含标题栏内容  
  647.         showFooter: false,// 默认隐藏表尾  
  648.         showColumns: false,// 显示筛选条目按钮  
  649.         showPaginationSwitch: false,// 显示分页隐藏展示按钮  
  650.         showRefresh: false,// 显示刷新按钮  
  651.         showToggle: false,// 显示切换表格显示或卡片式详情显示按钮  
  652.         buttonsAlign: 'right',// 显示隐藏分页、刷新、切换表格或卡片显示模式、筛选显示条目、下载按钮浮动设置  
  653.         smartDisplay: true,  
  654.         // smartDisplay为真，当总页数为1时，屏蔽分页，以及下拉列表仅有一条时，屏蔽切换条目数按钮下拉功能  
  655.         escape: false,// 是否转义  
  656.         minimumCountColumns: 1,// 最小显示条目数  
  657.         idField: undefined,// data中存储复选框value的键值  
  658.         uniqueId: undefined,// 从data中获取每行数据唯一标识的属性名  
  659.         cardView: false,// 是否显示卡片式详情（移动端），直接罗列每行信息，不以表格形式显现  
  660.         detailView: false,// 表格显示数据时，每行数据前是否有点击按钮，显示这行数据的卡片式详情  
  661.         detailFormatter: function (index, row) {  
  662.             return '';  
  663.         },// 折叠式卡片详情渲染文本，包含html标签、Dom元素  
  664.         trimOnSearch: true,// 搜索框键入值执行搜索时，清除两端空格填入该搜索框  
  665.         clickToSelect: false,  
  666.         singleSelect: false,// 复选框只能单选，需设置column.radio属性为真  
  667.         toolbar: undefined,// 用户自定义按钮组，区别于搜索框、分页切换按钮等  
  668.         toolbarAlign: 'left',// 用户自定义按钮组浮动情况  
  669.         checkboxHeader: true,// 为否隐藏全选按钮  
  670.         sortable: true,// 可排序全局设置  
  671.         silentSort: true,// ajax交互的时候是否显示loadding加载信息  
  672.         maintainSelected: false,// 为真且翻页时，保持前一页各条row[that.header.stateField]为翻页前的值  
  673.         searchTimeOut: 500,  
  674.         // 搜索框键入值敲enter后隔多少时间执行搜索，使用clearTimeout避免间隔时间内多次键入反复搜索  
  675.         searchText: '',// 初始化搜索内容  
  676.         iconSize: undefined,// 按钮、搜索输入框通用大小，使用bootstrap的sm、md、lg等  
  677.         iconsPrefix: 'glyphicon', // 按钮通用样式  
  678.         icons: {  
  679.             paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',// 显示分页按钮  
  680.             paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',// 隐藏分页按钮  
  681.             refresh: 'glyphicon-refresh icon-refresh',// 刷新按钮  
  682.             toggle: 'glyphicon-list-alt icon-list-alt',// 切换表格详情显示、卡片式显示按钮  
  683.             columns: 'glyphicon-th icon-th',// 筛选条目按钮  
  684.             detailOpen: 'glyphicon-plus icon-plus',// 卡片式详情展开按钮  
  685.             detailClose: 'glyphicon-minus icon-minus'// 卡片式详情折叠按钮  
  686.         },// 工具栏按钮具体样式  
  687.   
  688.         rowStyle: function (row, index) {  
  689.             return {};  
  690.         },// 传递给每一行的css设置，row为这一行的data数据  
  691.   
  692.         rowAttributes: function (row, index) {  
  693.             return {};  
  694.         },// 传递给每一行的属性设置  
  695.   
  696.         onAll: function (name, args) {  
  697.             return false;  
  698.         },  
  699.         onClickCell: function (field, value, row, $element) {  
  700.             return false;  
  701.         },  
  702.         onDblClickCell: function (field, value, row, $element) {  
  703.             return false;  
  704.         },  
  705.         onClickRow: function (item, $element) {  
  706.             return false;  
  707.         },  
  708.         onDblClickRow: function (item, $element) {  
  709.             return false;  
  710.         },  
  711.         onSort: function (name, order) {  
  712.             return false;  
  713.         },  
  714.         onCheck: function (row) {  
  715.             return false;  
  716.         },  
  717.         onUncheck: function (row) {  
  718.             return false;  
  719.         },  
  720.         onCheckAll: function (rows) {  
  721.             return false;  
  722.         },  
  723.         onUncheckAll: function (rows) {  
  724.             return false;  
  725.         },  
  726.         onCheckSome: function (rows) {  
  727.             return false;  
  728.         },  
  729.         onUncheckSome: function (rows) {  
  730.             return false;  
  731.         },  
  732.         onLoadSuccess: function (data) {  
  733.             return false;  
  734.         },  
  735.         onLoadError: function (status) {  
  736.             return false;  
  737.         },  
  738.         onColumnSwitch: function (field, checked) {  
  739.             return false;  
  740.         },  
  741.         onPageChange: function (number, size) {  
  742.             return false;  
  743.         },  
  744.         onSearch: function (text) {  
  745.             return false;  
  746.         },  
  747.         onToggle: function (cardView) {  
  748.             return false;  
  749.         },  
  750.         onPreBody: function (data) {  
  751.             return false;  
  752.         },  
  753.         onPostBody: function () {  
  754.             return false;  
  755.         },  
  756.         onPostHeader: function () {  
  757.             return false;  
  758.         },  
  759.         onExpandRow: function (index, row, $detail) {  
  760.             return false;  
  761.         },  
  762.         onCollapseRow: function (index, row) {  
  763.             return false;  
  764.         },  
  765.         onRefreshOptions: function (options) {  
  766.             return false;  
  767.         },  
  768.         onResetView: function () {  
  769.             return false;  
  770.         }  
  771.     };  
  772.   
  773.     BootstrapTable.LOCALES = [];  
  774.   
  775.     BootstrapTable.LOCALES['en-US'] = BootstrapTable.LOCALES['en'] = {  
  776.         formatLoadingMessage: function () {  
  777.             return 'Loading, please wait...';  
  778.         },  
  779.         formatRecordsPerPage: function (pageNumber) {  
  780.             return sprintf('%s records per page', pageNumber);  
  781.         },// 每页显示条目数提示文案  
  782.         formatShowingRows: function (pageFrom, pageTo, totalRows) {  
  783.             return sprintf('Showing %s to %s of %s rows', pageFrom, pageTo, totalRows);  
  784.         },// 分页提示当前页从第pageFrom到pageTo，总totalRows条  
  785.         formatDetailPagination: function (totalRows) {  
  786.             return sprintf('Showing %s rows', totalRows);// 分页提示供多少条数据  
  787.         },  
  788.         formatSearch: function () {  
  789.             return 'Search';  
  790.         },// 设置搜索框placeholder属性  
  791.         formatNoMatches: function () {  
  792.             return 'No matching records found';  
  793.         },// 没有数据时提示文案  
  794.         formatPaginationSwitch: function () {  
  795.             return 'Hide/Show pagination';  
  796.         },// 显示隐藏分页按钮title属性提示文案  
  797.         formatRefresh: function () {  
  798.             return 'Refresh';  
  799.         },// 刷新按钮title属性提示文案  
  800.         formatToggle: function () {  
  801.             return 'Toggle';  
  802.         },// 切换表格、卡片显示模式按钮title属性提示文案  
  803.         formatColumns: function () {  
  804.             return 'Columns';  
  805.         },// 筛选显示条目按钮title属性提示文案  
  806.         formatAllRows: function () {  
  807.             return 'All';  
  808.         }  
  809.     };  
  810.   
  811.     $.extend(BootstrapTable.DEFAULTS, BootstrapTable.LOCALES['en-US']);  
  812.   
  813.     BootstrapTable.COLUMN_DEFAULTS = {  
  814.         radio: false,// 有否radio，有则options.singleSelect设为真  
  815.         checkbox: false,// 有否checkbox，options.singleSelect设为真，checkbox单选  
  816.         checkboxEnabled: true,// 复选框是否可选  
  817.         field: undefined,// 后台数据的id号  
  818.         title: undefined,// 内容文案  
  819.         titleTooltip: undefined,// title属性文案  
  820.         'class': undefined,// 样式  
  821.         align: undefined, // tbody、thead、tfoot文本对齐情况  
  822.         halign: undefined, // thead文本对齐情况  
  823.         falign: undefined, // tfoot文本对齐情况  
  824.         valign: undefined, // 垂直对齐情况  
  825.         width: undefined, // 宽度，字符串或数值输入，均转化为"36px"或"10%"形式  
  826.         sortable: false,// 是否可排序，options.sortable设置为真的时候可用  
  827.         order: 'asc', // asc, desc  
  828.         visible: true,// 可见性  
  829.         switchable: true,// 该条目可以通过筛选条目按钮切换显示状态  
  830.         clickToSelect: true,  
  831.         formatter: undefined,  
  832.         // 以function(field,row,index){}格式化数据，field后台字段，row行数据，index对应row的序号值  
  833.         // 无配置时以title显示，有配置时以返回值显示  
  834.         footerFormatter: undefined,// 填充表尾内容  
  835.         events: undefined,// 数据格式为[{"click element":functionName}],回调中传入（value,row,index）  
  836.         sorter: undefined,// 调用sorter函数或window[sorter]函数进行排序，高优先级  
  837.         sortName: undefined,// 进行排序的字段名，用以获取options.data中的数据  
  838.         cellStyle: undefined,  
  839.         // 调用cellStyle函数或window[cellStyle]函数添加样式以及类;  
  840.         // 以function(field,row,index){}设置单元格样式以及样式类，返回数据格式为{classes:"class1 class2",css:{key:value}}  
  841.         searchable: true,// 设置哪一列的数据元素可搜索  
  842.         searchFormatter: true,  
  843.         cardVisible: true// 设为否时，卡片式显示时该列数据不显示  
  844.     };  
  845.   
  846.     BootstrapTable.EVENTS = {  
  847.         'all.bs.table': 'onAll',  
  848.         'click-cell.bs.table': 'onClickCell',  
  849.         'dbl-click-cell.bs.table': 'onDblClickCell',  
  850.         'click-row.bs.table': 'onClickRow',  
  851.         'dbl-click-row.bs.table': 'onDblClickRow',  
  852.         'sort.bs.table': 'onSort',  
  853.         'check.bs.table': 'onCheck',  
  854.         'uncheck.bs.table': 'onUncheck',  
  855.         'check-all.bs.table': 'onCheckAll',  
  856.         'uncheck-all.bs.table': 'onUncheckAll',  
  857.         'check-some.bs.table': 'onCheckSome',  
  858.         'uncheck-some.bs.table': 'onUncheckSome',  
  859.         'load-success.bs.table': 'onLoadSuccess',  
  860.         'load-error.bs.table': 'onLoadError',  
  861.         'column-switch.bs.table': 'onColumnSwitch',  
  862.         'page-change.bs.table': 'onPageChange',  
  863.         'search.bs.table': 'onSearch',  
  864.         'toggle.bs.table': 'onToggle',  
  865.         'pre-body.bs.table': 'onPreBody',  
  866.         'post-body.bs.table': 'onPostBody',  
  867.         'post-header.bs.table': 'onPostHeader',  
  868.         'expand-row.bs.table': 'onExpandRow',  
  869.         'collapse-row.bs.table': 'onCollapseRow',  
  870.         'refresh-options.bs.table': 'onRefreshOptions',  
  871.         'reset-view.bs.table': 'onResetView'  
  872.     };  
  873.   
  874.     BootstrapTable.prototype.init = function () {  
  875.         this.initLocale();  
  876.         // 将语言包添加进配置项this.options中，数据格式是{formatLoadingMessage:fn};  
  877.         this.initContainer();  
  878.         // 创建包裹元素this.container及其子元素this.$toolbar、this.$pagination等，为表格添加样式;  
  879.         this.initTable();  
  880.         // 获取页面配置更新options.columns、options.data，this.columns记录表体对应标题栏的数据;  
  881.         this.initHeader();  
  882.         // 渲染表头，设置this.header数据记录主键等，绑定表头事件，卡片式显示时隐藏表头;  
  883.         this.initData();  
  884.         // 页面初始化、后台传值、表头表尾插入数据，更新this.data、options.data，前台分页则排序;  
  885.         this.initFooter();  
  886.         // 显示隐藏表尾;  
  887.         this.initToolbar();  
  888.         // 创建工具栏按钮组，并绑定事件;  
  889.         this.initPagination();  
  890.         // 创建分页相关内容，并绑定事件;  
  891.         this.initBody();  
  892.         // 渲染表体，区分卡片显示和表格显示两类，绑定相关事件;  
  893.         this.initSearchText();  
  894.         // 初始化若设置搜索文本，开启搜索，不支持本地数据搜索;  
  895.         this.initServer();  
  896.         // 上传数据，成功时调用load方法渲染表格;  
  897.     };  
  898.   
  899.     // 将语言包添加进配置项this.options中，数据格式是{formatLoadingMessage:fn};  
  900.     BootstrapTable.prototype.initLocale = function () {  
  901.         if (this.options.locale) {  
  902.             var parts = this.options.locale.split(/-|_/);  
  903.             parts[0].toLowerCase();  
  904.             parts[1] && parts[1].toUpperCase();  
  905.             if ($.fn.bootstrapTable.locales[this.options.locale]) {  
  906.                 $.extend(this.options, $.fn.bootstrapTable.locales[this.options.locale]);  
  907.             } else if ($.fn.bootstrapTable.locales[parts.join('-')]) {  
  908.                 $.extend(this.options, $.fn.bootstrapTable.locales[parts.join('-')]);  
  909.             } else if ($.fn.bootstrapTable.locales[parts[0]]) {  
  910.                 $.extend(this.options, $.fn.bootstrapTable.locales[parts[0]]);  
  911.             }  
  912.         }  
  913.     };  
  914.   
  915.     // 创建包裹元素this.container及其子元素this.$toolbar、this.$pagination等，为表格添加样式;  
  916.     BootstrapTable.prototype.initContainer = function () {  
  917.         this.$container = $([  
  918.             '',  
  919.             '
',  
  •             this.options.paginationVAlign === 'top' || this.options.paginationVAlign === 'both' ?  
  •                 '
    • ' :  
  •                 '',  
  •             '',  
  •             '
    • ',  
  •             '',  
  •             '',  
  •             this.options.formatLoadingMessage(),  
  •             '
    • ',  
  •             '
    • ',  
  •             '
    • ',  
  •             this.options.paginationVAlign === 'bottom' || this.options.paginationVAlign === 'both' ?  
  •                 '
    • ' :  
  •                 '',  
  •             '
    • ',  
  •             '
    • '  
  •         ].join(''));  
  •   
  •         this.$container.insertAfter(this.$el);  
  •         this.$tableContainer = this.$container.find('.fixed-table-container');  
  •         this.$tableHeader = this.$container.find('.fixed-table-header');  
  •         this.$tableBody = this.$container.find('.fixed-table-body');  
  •         this.$tableLoading = this.$container.find('.fixed-table-loading');  
  •         this.$tableFooter = this.$container.find('.fixed-table-footer');  
  •         this.$toolbar = this.$container.find('.fixed-table-toolbar');  
  •         this.$pagination = this.$container.find('.fixed-table-pagination');  
  •   
  •         this.$tableBody.append(this.$el);  
  •         this.$container.after('
    • ');  
  •   
  •         this.$el.addClass(this.options.classes);  
  •         if (this.options.striped) {  
  •             this.$el.addClass('table-striped');  
  •         }  
  •         if ($.inArray('table-no-bordered', this.options.classes.split(' ')) !== -1) {  
  •             this.$tableContainer.addClass('table-no-bordered');  
  •         }  
  •     };  
  •   
  •     // 当html中包含thead>tr>th以及tbody>tr>td时，获取页面的配置项更新options.columns、options.data;  
  •     // js配置的优先级高于html页面配置;  
  •     // this.columns以this.columns[fieldIndex]的数组形式[columns]记录表体相应标题栏的数据内容;  
  •     BootstrapTable.prototype.initTable = function () {  
  •         var that = this,  
  •             columns = [],  
  •             data = [];  
  •   
  •         // 触发元素table中有thead子标签等则使用（查询排序的时候），无则创建  
  •         this.$header = this.$el.find('>thead');  
  •         if (!this.$header.length) {  
  •             this.$header = $('').appendTo(this.$el);  
  •         }  
  •         this.$header.find('tr').each(function () {  
  •             var column = [];  
  •   
  •             $(this).find('th').each(function () {  
  •                 column.push($.extend({}, {  
  •                     title: $(this).html(),  
  •                     'class': $(this).attr('class'),  
  •                     titleTooltip: $(this).attr('title'),  
  •                     rowspan: $(this).attr('rowspan') ? +$(this).attr('rowspan') : undefined,  
  •                     colspan: $(this).attr('colspan') ? +$(this).attr('colspan') : undefined  
  •                 }, $(this).data()));  
  •             });  
  •             columns.push(column);  
  •         });  
  •         if (!$.isArray(this.options.columns[0])) {  
  •             this.options.columns = [this.options.columns];// 都处理成两维数组的形式  
  •         }  
  •         this.options.columns = $.extend(true, [], columns, this.options.columns);  
  •   
  •         // 借用this.columns[fieldIndex]=column构建this.columns;  
  •         // this.column的数据格式为{[column]}，列坐标相同的标题栏取靠后的子标题;  
  •         // 意义：填充表体内容时，this.column提供每列数据的相关信息;  
  •         this.columns = [];  
  •   
  •         // setFieldIndex将标题栏的fieldIndex属性赋值为标题栏所在列坐标;  
  •         setFieldIndex(this.options.columns);  
  •   
  •         $.each(this.options.columns, function (i, columns) {  
  •             $.each(columns, function (j, column) {  
  •                 column = $.extend({}, BootstrapTable.COLUMN_DEFAULTS, column);  
  •   
  •                 if (typeof column.fieldIndex !== 'undefined') {  
  •                     that.columns[column.fieldIndex] = column;  
  •                 }  
  •   
  •                 that.options.columns[i][j] = column;  
  •             });  
  •         });  
  •   
  •         if (this.options.data.length) {  
  •             return;  
  •         }  
  •   
  •         this.$el.find('>tbody>tr').each(function () {  
  •             var row = {};  
  •   
  •             // 获取每一行tr的id、class、data属性，以数组形式赋值给data  
  •             row._id = $(this).attr('id');  
  •             row._class = $(this).attr('class');  
  •             row._data = getRealDataAttr($(this).data());  
  •   
  •             // 获取某一行每个子元素的内容、id、class、rowspan、title、data属性  
  •             $(this).find('td').each(function (i) {  
  •                 // field通常是后台数据的id号，没有该值的时候赋值为column列坐标信息，写入本地数据的时候  
  •                 var field = that.columns[i].field;  
  •   
  •                 row[field] = $(this).html();  
  •                 // save td's id, class and data-* attributes  
  •                 row['_' + field + '_id'] = $(this).attr('id');  
  •                 row['_' + field + '_class'] = $(this).attr('class');  
  •                 row['_' + field + '_rowspan'] = $(this).attr('rowspan');  
  •                 row['_' + field + '_title'] = $(this).attr('title');  
  •                 row['_' + field + '_data'] = getRealDataAttr($(this).data());  
  •             });  
  •             data.push(row);  
  •         });  
  •   
  •         this.options.data = data;  
  •     };  
  •   
  •     // 由options.columns渲染表头,th的data-field记为column[field],data数据记为column;  
  •     // 更新this.header记录主键、样式、事件、格式化函数等，以及stateField复选框上传字段;  
  •     // 绑定事件，包括点击排序、确认键排序、全选，更新上传数据、页面状态等；  
  •     BootstrapTable.prototype.initHeader = function () {  
  •         var that = this,  
  •             visibleColumns = {},  
  •             html = [];  
  •   
  •         this.header = {  
  •             fields: [],  
  •             styles: [],  
  •             classes: [],  
  •             formatters: [],  
  •             events: [],  
  •             sorters: [],  
  •             sortNames: [],  
  •             cellStyles: [],  
  •             searchables: []  
  •         };  
  •   
  •         $.each(this.options.columns, function (i, columns) {  
  •             html.push('');  
  •   
  •             // 页面以表格显示且有卡片式详情点击按钮的时候，表头首列为该按钮开辟一个空白的单元格  
  •             if (i == 0 && !that.options.cardView && that.options.detailView) {  
  •                 html.push(sprintf('
    • ',  
  •                     that.options.columns.length));  
  •             }  
  •   
  •             $.each(columns, function (j, column) {  
  •                 var text = '',  
  •                     halign = '',   
  •                     align = '',   
  •                     style = '',  
  •                     class_ = sprintf(' class="%s"', column['class']),  
  •                     order = that.options.sortOrder || column.order,  
  •                     unitWidth = 'px',  
  •                     width = column.width;  
  •   
  •                 // width输入宽度有%或px时，分割%或px到unitWidth中，width保留数字字符串  
  •                 // width输入数值时，unitWidth默认取px  
  •                 if (column.width !== undefined && (!that.options.cardView)) {  
  •                     if (typeof column.width === 'string') {  
  •                         if (column.width.indexOf('%') !== -1) {  
  •                             unitWidth = '%';  
  •                         }  
  •                     }  
  •                 }  
  •                 if (column.width && typeof column.width === 'string') {  
  •                     width = column.width.replace('%', '').replace('px', '');  
  •                 }  
  •   
  •                 halign = sprintf('text-align: %s; ', column.halign ? column.halign : column.align);  
  •                 align = sprintf('text-align: %s; ', column.align);  
  •                 style = sprintf('vertical-align: %s; ', column.valign);  
  •                 style += sprintf('width: %s; ', (column.checkbox || column.radio) && !width ?  
  •                     '36px' : (width ? width + unitWidth : undefined));  
  •   
  •                 /**  
  •                  * this.header.styles、this.header.classes: 
  •                  *     数组形式存储经过处理的每列数据的样式、类; 
  •                  * this.header.formatters、this.header.cellStyles、this.header.sorters: 
  •                  *     数组形式存储格式化函数、设置单元格样式函数、排序函数，或者window方法名; 
  •                  * this.header.events、this.header.sortNames、this.header.searchables: 
  •                  *     数组形式存储表体相应标题栏配置的事件events、上传排序的字段名sortName、可搜索searchable; 
  •                  */  
  •                 // 填充触发元素的tbody内容块时使用  
  •                 if (typeof column.fieldIndex !== 'undefined') {  
  •                     that.header.fields[column.fieldIndex] = column.field;  
  •                     that.header.styles[column.fieldIndex] = align + style;  
  •                     that.header.classes[column.fieldIndex] = class_;  
  •                     that.header.formatters[column.fieldIndex] = column.formatter;  
  •                     that.header.events[column.fieldIndex] = column.events;  
  •                     that.header.sorters[column.fieldIndex] = column.sorter;  
  •                     that.header.sortNames[column.fieldIndex] = column.sortName;  
  •                     that.header.cellStyles[column.fieldIndex] = column.cellStyle;  
  •                     that.header.searchables[column.fieldIndex] = column.searchable;  
  •   
  •                     if (!column.visible) {  
  •                         return;  
  •                     }  
  •   
  •                     if (that.options.cardView && (!column.cardVisible)) {  
  •                         return;  
  •                     }  
  •   
  •                     visibleColumns[column.field] = column;  
  •                 }  
  •   
  •                 // options.columns数据回显和渲染页面  
  •                 html.push(' + sprintf(' title="%s"', column.titleTooltip),  
  •                     column.checkbox || column.radio ?  
  •                         sprintf(' class="bs-checkbox %s"', column['class'] || '') :  
  •                         class_,  
  •                     sprintf(' style="%s"', halign + style),  
  •                     sprintf(' rowspan="%s"', column.rowspan),  
  •                     sprintf(' colspan="%s"', column.colspan),  
  •                     sprintf(' data-field="%s"', column.field),  
  •                     "tabindex='0'",  
  •                     '>');  
  •   
  •                 html.push(sprintf('', that.options.sortable && column.sortable ?  
  •                     'sortable both' : ''));  
  •   
  •                 text = column.title;  
  •   
  •                 if (column.checkbox) {  
  •                     if (!that.options.singleSelect && that.options.checkboxHeader) {  
  •                         text = '';  
  •                     }  
  •                     that.header.stateField = column.field;// 复选框内容上传时的字段名  
  •                 }  
  •                 if (column.radio) {  
  •                     text = '';  
  •                     that.header.stateField = column.field;  
  •                     that.options.singleSelect = true;  
  •                 }  
  •   
  •                 html.push(text);  
  •                 html.push('');  
  •                 html.push('');  
  •                 html.push('');  
  •                 html.push('');  
  •             });  
  •             html.push('');  
  •         });  
  •   
  •         this.$header.html(html.join(''));  
  •         this.$header.find('th[data-field]').each(function (i) {  
  •             // 标题栏data属性写入各自的column数据，展开卡片式详情时使用  
  •             $(this).data(visibleColumns[$(this).data('field')]);  
  •         });  
  •   
  •         // 绑定点击排序事件  
  •         this.$container.off('click', '.th-inner').on('click', '.th-inner', function (event) {  
  •             var target = $(this);  
  •             if (target.closest('.bootstrap-table')[0] !== that.$container[0])  
  •                 return false;  
  •   
  •             if (that.options.sortable && target.parent().data().sortable) {  
  •                 that.onSort(event);  
  •             }  
  •         });  
  •   
  •         // 确认键排序  
  •         this.$header.children().children().off('keypress').on('keypress', function (event) {  
  •             if (that.options.sortable && $(this).data().sortable) {  
  •                 var code = event.keyCode || event.which;  
  •                 if (code == 13) { //Enter keycode  
  •                     that.onSort(event);  
  •                 }  
  •             }  
  •         });  
  •   
  •         // 显示隐藏表头，调整this.$tableLoading位置;options.cardView为真时卡片式显示隐藏表头  
  •         if (!this.options.showHeader || this.options.cardView) {  
  •             this.$header.hide();  
  •             this.$tableHeader.hide();  
  •             this.$tableLoading.css('top', 0);  
  •         } else {  
  •             this.$header.show();  
  •             this.$tableHeader.show();  
  •             this.$tableLoading.css('top', this.$header.outerHeight() + 1);  
  •               
  •             this.getCaret();// 更新排序箭头显示情况  
  •         }  
  •   
  •         // 全选  
  •         this.$selectAll = this.$header.find('[name="btSelectAll"]');  
  •         this.$selectAll.off('click').on('click', function () {  
  •             var checked = $(this).prop('checked');  
  •             that[checked ? 'checkAll' : 'uncheckAll']();// 改变复选框勾选状态，更新上传数据  
  •             that.updateSelected();// tr添加selected类  
  •         });  
  •     };  
  •   
  •     // 显示隐藏表尾  
  •     BootstrapTable.prototype.initFooter = function () {  
  •         if (!this.options.showFooter || this.options.cardView) {  
  •             this.$tableFooter.hide();  
  •         } else {  
  •             this.$tableFooter.show();  
  •         }  
  •     };  
  •   
  •   
  •     // 页面初始化时this.data赋值为this.options.data;  
  •     // ajax交互时this.data赋值为后台返回的数据，options.data也同样更新为后台返回的数据;  
  •     // type为append时，表格尾部插入数据，this.data、options.data尾部插入相应数据;  
  •     // type为prepend时，表格顶部插入数据，this.data、options.data头部插入相应数据;   
  •     // 前台分页的情况下调用this.initSort，后台分页以返回数据为准;  
  •     BootstrapTable.prototype.initData = function (data, type) {  
  •         if (type === 'append') {  
  •             this.data = this.data.concat(data);  
  •         } else if (type === 'prepend') {  
  •             this.data = [].concat(data).concat(this.data);  
  •         } else {  
  •             this.data = data || this.options.data;  
  •         }  
  •   
  •         if (type === 'append') {  
  •             this.options.data = this.options.data.concat(data);  
  •         } else if (type === 'prepend') {  
  •             this.options.data = [].concat(data).concat(this.options.data);  
  •         } else {  
  •             this.options.data = this.data;  
  •         }  
  •   
  •         if (this.options.sidePagination === 'server') {  
  •             return;  
  •         }  
  •         this.initSort();  
  •     };  
  •   
  •     // onSort方法设置点击排序按钮时，更新options.sortName为相应标题栏column.field值;  
  •     // initSort由column.field值获得相应的sortName;  
  •     // 调用option.sorter函数或window[option.sorter]方法进行比较排序;  
  •     // 或者直接比较data[sortName]进行排序;  
  •     // 排序通过更新this.data数据实现,this.data渲染到页面使用initBody方法;  
  •     BootstrapTable.prototype.initSort = function () {  
  •         var that = this,  
  •             name = this.options.sortName,  
  •             order = this.options.sortOrder === 'desc' ? -1 : 1,  
  •             index = $.inArray(this.options.sortName, this.header.fields);  
  •   
  •         if (index !== -1) {  
  •             this.data.sort(function (a, b) {  
  •                 if (that.header.sortNames[index]) {  
  •                     name = that.header.sortNames[index];// 获取colum.sortName  
  •                 }  
  •                 // 获取每行数据的data[sortName]的值，转义后返回  
  •                 var aa = getItemField(a, name, that.options.escape),  
  •                     bb = getItemField(b, name, that.options.escape),  
  •                     // 调用column.sorter函数或window[column.sorter]方法进行比较，上下文是that.header  
  •                     value = calculateObjectValue(that.header, that.header.sorters[index], [aa, bb]);  
  •   
  •                 if (value !== undefined) {  
  •                     return order * value;  
  •                 }  
  •   
  •                 if (aa === undefined || aa === null) {  
  •                     aa = '';  
  •                 }  
  •                 if (bb === undefined || bb === null) {  
  •                     bb = '';  
  •                 }  
  •   
  •                 if ($.isNumeric(aa) && $.isNumeric(bb)) {  
  •                     aa = parseFloat(aa);  
  •                     bb = parseFloat(bb);  
  •                     if (aa < bb) {  
  •                         return order * -1;  
  •                     }  
  •                     return order;  
  •                 }  
  •   
  •                 if (aa === bb) {  
  •                     return 0;  
  •                 }  
  •   
  •                 if (typeof aa !== 'string') {  
  •                     aa = aa.toString();  
  •                 }  
  •   
  •                 if (aa.localeCompare(bb) === -1) {//bb为何不要转换？  
  •                     return order * -1;  
  •                 }  
  •   
  •                 return order;  
  •             });  
  •         }  
  •     };  
  •   
  •     // 点击排序时更新options.sortName为被排序列数据对应column[field]值，以便initSort获取sortName;  
  •     // 更新options.sortOrder为被排序列数据对应column[order]值，或保持原有值;  
  •     // 触发sort事件，调用initServer获取后台数据，调用initSort排序、initBody渲染表体;  
  •     BootstrapTable.prototype.onSort = function (event) {  
  •         var $this = event.type === "keypress" ? $(event.currentTarget) : $(event.currentTarget).parent(),  
  •             $this_ = this.$header.find('th').eq($this.index());// 记录this.$header下相同元素  
  •   
  •         this.$header.add(this.$header_).find('span.order').remove();  
  •   
  •         // options.sortName更新被排序列数据对应column[field]值，以便initSort获取sortName加以比较;  
  •         if (this.options.sortName === $this.data('field')) {  
  •             this.options.sortOrder = this.options.sortOrder === 'asc' ? 'desc' : 'asc';  
  •         } else {  
  •             this.options.sortName = $this.data('field');  
  •             this.options.sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc';  
  •         }  
  •         this.trigger('sort', this.options.sortName, this.options.sortOrder);  
  •   
  •         $this.add($this_).data('order', this.options.sortOrder);  
  •   
  •         this.getCaret();// 更新排序箭头样式  
  •   
  •         if (this.options.sidePagination === 'server') {  
  •             this.initServer(this.options.silentSort);  
  •             return;  
  •         }  
  •   
  •         this.initSort();  
  •         this.initBody();  
  •     };  
  •   
  •     // 创建工具栏内的用户自定义按钮组、分页显示隐藏切换按钮、刷新按钮、筛选条目按钮  
  •     //      以及卡片表格显示切换按钮、搜索框，并绑定相应事件；  
  •     // 筛选条目时触发column-switch事件;  
  •     BootstrapTable.prototype.initToolbar = function () {  
  •         var that = this,  
  •             html = [],  
  •             timeoutId = 0,  
  •             $keepOpen,  
  •             $search,  
  •             switchableCount = 0;  
  •   
  •         if (this.$toolbar.find('.bars').children().length) {  
  •             $('body').append($(this.options.toolbar));  
  •         }  
  •         this.$toolbar.html('');  
  •   
  •         if (typeof this.options.toolbar === 'string' || typeof this.options.toolbar === 'object') {  
  •             $(sprintf('', this.options.toolbarAlign))  
  •                 .appendTo(this.$toolbar)  
  •                 .append($(this.options.toolbar));  
  •                 // $(this.options.toolbar)引用对象形式，只会在页面上创建一次  
  •         }  
  •   
  •         html = [sprintf('',  
  •             this.options.buttonsAlign, this.options.buttonsAlign)];  
  •   
  •         if (typeof this.options.icons === 'string') {  
  •             // 调用window[options.icons]函数显示按钮列表  
  •             this.options.icons = calculateObjectValue(null, this.options.icons);  
  •         }  
  •   
  •         // 显示隐藏分页按钮  
  •         if (this.options.showPaginationSwitch) {  
  •             html.push(sprintf('',  
  •                     this.options.formatPaginationSwitch()),  
  •                 sprintf('', this.options.iconsPrefix, this.options.icons.paginationSwitchDown),  
  •                 '');  
  •         }  
  •   
  •         // 刷新按钮  
  •         if (this.options.showRefresh) {  
  •             html.push(sprintf(' +  
  •                     sprintf(' btn-%s', this.options.iconSize) +  
  •                     '" type="button" name="refresh" title="%s">',  
  •                     this.options.formatRefresh()),  
  •                 sprintf('', this.options.iconsPrefix, this.options.icons.refresh),  
  •                 '');  
  •         }  
  •   
  •         // 卡片式显示或表格详情显示切换按钮  
  •         if (this.options.showToggle) {  
  •             html.push(sprintf(' +  
  •                     sprintf(' btn-%s', this.options.iconSize) +  
  •                     '" type="button" name="toggle" title="%s">',  
  •                     this.options.formatToggle()),  
  •                 sprintf('', this.options.iconsPrefix, this.options.icons.toggle),  
  •                 '');  
  •         }  
  •   
  •         // 筛选条目按钮，并创建下拉列表  
  •         if (this.options.showColumns) {  
  •             html.push(sprintf('',  
  •                     this.options.formatColumns()),  
  •                 ' +  
  •                 sprintf(' btn-%s', this.options.iconSize) +  
  •                 ' dropdown-toggle" data-toggle="dropdown">',  
  •                 sprintf('', this.options.iconsPrefix, this.options.icons.columns),  
  •                 ' ',  
  •                 '',  
  •                 '');  
  •   
  •             $.each(this.columns, function (i, column) {  
  •                 if (column.radio || column.checkbox) {  
  •                     return;  
  •                 }  
  •   
  •                 if (that.options.cardView && (!column.cardVisible)) {  
  •                     return;  
  •                 }  
  •   
  •                 var checked = column.visible ? ' checked="checked"' : '';  
  •   
  •                 if (column.switchable) {  
  •                     html.push(sprintf('
  • ' +  
  •                         '' +  
  •                         '
    • ', column.field, i, checked, column.title));  
  •                     switchableCount++;  
  •                 }  
  •             });  
  •             html.push('',  
  •                 '');  
  •         }  
  •   
  •         html.push('');  
  •   
  •         if (this.showToolbar || html.length > 2) {  
  •             this.$toolbar.append(html.join(''));  
  •         }  
  •   
  •         // 绑定分页显示隐藏按钮点击事件  
  •         if (this.options.showPaginationSwitch) {  
  •             this.$toolbar.find('button[name="paginationSwitch"]')  
  •                 .off('click').on('click', $.proxy(this.togglePagination, this));  
  •         }  
  •   
  •         // 绑定刷新按钮点击事件  
  •         if (this.options.showRefresh) {  
  •             this.$toolbar.find('button[name="refresh"]')  
  •                 .off('click').on('click', $.proxy(this.refresh, this));  
  •         }  
  •   
  •         // 绑定卡片式显示、表格详情显示切换按钮点击事件  
  •         if (this.options.showToggle) {  
  •             this.$toolbar.find('button[name="toggle"]')  
  •                 .off('click').on('click', function () {  
  •                     that.toggleView();  
  •                 });  
  •         }  
  •   
  •         // 帮点筛选条目下拉列表中复选框的点击事件，筛选条目按钮点击事件由bootstrap提供  
  •         if (this.options.showColumns) {  
  •             $keepOpen = this.$toolbar.find('.keep-open');  
  •   
  •             if (switchableCount <= this.options.minimumCountColumns) {  
  •                 $keepOpen.find('input').prop('disabled', true);  
  •             }  
  •   
  •             $keepOpen.find('li').off('click').on('click', function (event) {  
  •                 event.stopImmediatePropagation();// 阻止事件冒泡，并阻止同类型事件的冒泡  
  •             });  
  •             $keepOpen.find('input').off('click').on('click', function () {  
  •                 var $this = $(this);  
  •   
  •                 that.toggleColumn(getFieldIndex(that.columns,  
  •                     $(this).data('field')), $this.prop('checked'), false);  
  •                 that.trigger('column-switch', $(this).data('field'), $this.prop('checked'));  
  •             });  
  •         }  
  •   
  •         // 创建搜索框，并绑定搜索事件  
  •         if (this.options.search) {  
  •             html = [];  
  •             html.push(  
  •                 ' + this.options.searchAlign + ' search">',  
  •                 sprintf(' +  
  •                     sprintf(' input-%s', this.options.iconSize) +  
  •                     '" type="text" placeholder="%s">',  
  •                     this.options.formatSearch()),  
  •                 '');  
  •   
  •             this.$toolbar.append(html.join(''));  
  •             $search = this.$toolbar.find('.search input');  
  •             $search.off('keyup drop').on('keyup drop', function (event) {  
  •                 if (that.options.searchOnEnterKey) {  
  •                     if (event.keyCode !== 13) {  
  •                         return;  
  •                     }  
  •                 }  
  •   
  •                 clearTimeout(timeoutId);  
  •                 timeoutId = setTimeout(function () {  
  •                     that.onSearch(event);  
  •                 }, that.options.searchTimeOut);  
  •             });  
  •   
  •             if (isIEBrowser()) {  
  •                 $search.off('mouseup').on('mouseup', function (event) {  
  •                     clearTimeout(timeoutId);   
  •                     timeoutId = setTimeout(function () {  
  •                         that.onSearch(event);  
  •                     }, that.options.searchTimeOut);  
  •                 });  
  •             }  
  •         }  
  •     };  
  •   
  •     // this.text，this.options.text设为搜索框去除两端空白的值，pageNumber设为1;  
  •     // 调用initSearch将筛选本地数据;调用updatePagination完成远程交互或单渲染本地数据;  
  •     // 触发search事件;  
  •     BootstrapTable.prototype.onSearch = function (event) {  
  •         var text = $.trim($(event.currentTarget).val());  
  •   
  •         if (this.options.trimOnSearch && $(event.currentTarget).val() !== text) {  
  •             $(event.currentTarget).val(text);  
  •         }  
  •   
  •         if (text === this.searchText) {  
  •             return;  
  •         }  
  •         this.searchText = text;  
  •         this.options.searchText = text;  
  •   
  •         this.options.pageNumber = 1;  
  •         this.initSearch();  
  •         this.updatePagination();  
  •         this.trigger('search', text);  
  •     };  
  •   
  •     // 前台分页的情况下，先通过this.filterColumns通过this.option.data过滤this.data数据;  
  •     // 再通过搜索文本过滤this.data数据;  
  •     // 输入文本和经this.header.formatters或window[this.header.formatters]函数格式化匹配比对;  
  •     BootstrapTable.prototype.initSearch = function () {  
  •         var that = this;  
  •   
  •         if (this.options.sidePagination !== 'server') {  
  •             var s = this.searchText && this.searchText.toLowerCase();  
  •             var f = $.isEmptyObject(this.filterColumns) ? null : this.filterColumns;  
  •   
  •             // options.data和this.filterColumns相符则在this.data中保留，不相符则在this.data中删除  
  •             this.data = f ? $.grep(this.options.data, function (item, i) {  
  •                 for (var key in f) {  
  •                     if ($.isArray(f[key])) {  
  •                         if ($.inArray(item[key], f[key]) === -1) {  
  •                             return false;  
  •                         }  
  •                     } else if (item[key] !== f[key]) {  
  •                         return false;  
  •                     }  
  •                 }  
  •                 return true;  
  •             }) : this.options.data;  
  •   
  •             // 在前台分页的情况下检索数据，使用$.grep返回筛选后的数组内容  
  •             this.data = s ? $.grep(this.data, function (item, i) {  
  •                 for (var key in item) {  
  •                     key = $.isNumeric(key) ? parseInt(key, 10) : key;  
  •                     var value = item[key],//data[key]  
  •                         // 当key为field时，getFieldIndex获取相应列条目数据fieldIndex值，否则返回-1  
  •                         // 问题，可以设置if语句排除key不等于field的情况，j和index等值  
  •                         column = that.columns[getFieldIndex(that.columns, key)],  
  •                         j = $.inArray(key, that.header.fields);  
  •   
  •                     if (column && column.searchFormatter) {  
  •                         value = calculateObjectValue(column,  
  •                             that.header.formatters[j], [value, item, i], value);  
  •                     }  
  •   
  •                     var index = $.inArray(key, that.header.fields);  
  •                     if (index !== -1 && that.header.searchables[index] && (typeof value === 'string' || typeof value === 'number')) {  
  •                         if (that.options.strictSearch) {  
  •                             if ((value + '').toLowerCase() === s) {  
  •                                 return true;  
  •                             }  
  •                         } else {  
  •                             if ((value + '').toLowerCase().indexOf(s) !== -1) {  
  •                                 return true;  
  •                             }  
  •                         }  
  •                     }  
  •                 }  
  •                 return false;  
  •             }) : this.data;  
  •         }  
  •     };  
  •   
  •     // 初始化设置分页相关页面信息显示情况，包括当前页显示第几条到第几天数据，共几条数据，每页显示几条数据;  
  •     // 以及每页显示数据量切换按钮，选择页面的分页栏显示情况，再绑定事件;  
  •     // 通过options.pageNumber获取this.pageFrom、this.pageTo，以便前台分页时initBody获取相应数据;  
  •     BootstrapTable.prototype.initPagination = function () {  
  •         if (!this.options.pagination) {  
  •             this.$pagination.hide();  
  •             return;  
  •         } else {  
  •             this.$pagination.show();  
  •         }  
  •   
  •         var that = this,  
  •             html = [],  
  •             $allSelected = false,// 为真时，显示所有数据条目，同时显示数据量切换按钮文本改为options.formatAllRows()  
  •             i, from, to,  
  •             $pageList,  
  •             $first, $pre,  
  •             $next, $last,  
  •             $number,  
  •             data = this.getData();  
  •   
  •         if (this.options.sidePagination !== 'server') {  
  •             this.options.totalRows = data.length;// 数据总条数  
  •         }  
  •   
  •         // this.options.totalRows数据总条数;  
  •         // this.options.pageSize一页显示几条数据，显示数据量切换按钮默认文本;  
  •         // this.totalPages总页数，与this.options.totalPages似没有差别，疑为插件作者未调优代码;  
  •         // this.options.totalPages总页数;  
  •         // this.options.pageNumber当前页页码;  
  •         // this.pageFrom当前页从总数据的第几条开始;  
  •         // this.pageTo当前页到总数据的第几条为止;  
  •         if (this.options.totalRows) {  
  •             // 当options.pageSize和options.formatAllRows()相同时，意味显示所有条目  
  •             // 或者options.pageSize即为options.totalRows总条目数，且options.formatAllRows()在pageList设置中  
  •             // $allSelected记为真，页面显示数据量切换按钮的显示文本为options.formatAllRows()  
  •             if (this.options.pageSize === this.options.formatAllRows()) {  
  •                 this.options.pageSize = this.options.totalRows;  
  •                 $allSelected = true;  
  •             } else if (this.options.pageSize === this.options.totalRows) {  
  •                 var pageLst = typeof this.options.pageList === 'string' ?  
  •                     this.options.pageList.replace('[', '').replace(']', '')  
  •                         .replace(/ /g, '').toLowerCase().split(',') : this.options.pageList;// 每页显示数据条数列表项  
  •                 if ($.inArray(this.options.formatAllRows().toLowerCase(), pageLst)  > -1) {  
  •                     $allSelected = true;  
  •                 }  
  •             }  
  •   
  •             this.totalPages = ~~((this.options.totalRows - 1) / this.options.pageSize) + 1;  
  •             // -1针对this.options.totalRows是this.options.pageSize倍数的情况  
  •   
  •             this.options.totalPages = this.totalPages;  
  •         }  
  •         if (this.totalPages > 0 && this.options.pageNumber > this.totalPages) {  
  •             this.options.pageNumber = this.totalPages;  
  •         }  
  •   
  •         this.pageFrom = (this.options.pageNumber - 1) * this.options.pageSize + 1;  
  •         this.pageTo = this.options.pageNumber * this.options.pageSize;  
  •         if (this.pageTo > this.options.totalRows) {  
  •             this.pageTo = this.options.totalRows;  
  •         }  
  •   
  •         // 分页提示文案，即总共包含几条数据，或当前页从第几条到第几条  
  •         html.push(  
  •             ' + this.options.paginationDetailHAlign + ' pagination-detail">',  
  •             '',  
  •             this.options.onlyInfoPagination ? this.options.formatDetailPagination(this.options.totalRows) :  
  •             this.options.formatShowingRows(this.pageFrom, this.pageTo, this.options.totalRows),  
  •             '');  
  •   
  •         if (!this.options.onlyInfoPagination) {  
  •             html.push('');  
  •   
  •             // 分页提示文案，即每页显示几条数据，每页显示数据量下拉列表  
  •             var pageNumber = [  
  •                     sprintf('',  
  •                         this.options.paginationVAlign === 'top' || this.options.paginationVAlign === 'both' ?  
  •                             'dropdown' : 'dropup'),  
  •                     ' +  
  •                     sprintf(' btn-%s', this.options.iconSize) +  
  •                     ' dropdown-toggle" data-toggle="dropdown">',  
  •                     '',  
  •                     $allSelected ? this.options.formatAllRows() : this.options.pageSize,  
  •                     '',  
  •                     ' ',  
  •                     '',  
  •                     ''  
  •                 ],  
  •                 pageList = this.options.pageList;  
  •   
  •             // 每页切换条目数下拉列表实现  
  •             if (typeof this.options.pageList === 'string') {  
  •                 var list = this.options.pageList.replace('[', '').replace(']', '')  
  •                     .replace(/ /g, '').split(',');  
  •   
  •                 pageList = [];  
  •                 $.each(list, function (i, value) {  
  •                     pageList.push(value.toUpperCase() === that.options.formatAllRows().toUpperCase() ?  
  •                         that.options.formatAllRows() : +value);  
  •                 });  
  •             }  
  •             $.each(pageList, function (i, page) {  
  •                 // this.options.smartDisplay为真，当总页数为1时，屏蔽分页，以及下拉列表仅有一条时，屏蔽切换条目数按钮下拉功能  
  •                 if (!that.options.smartDisplay || i === 0 || pageList[i - 1] <= that.options.totalRows) {  
  •                     var active;  
  •                     if ($allSelected) {  
  •                         active = page === that.options.formatAllRows() ? ' class="active"' : '';  
  •                     } else {  
  •                         active = page === that.options.pageSize ? ' class="active"' : '';  
  •                     }  
  •                     pageNumber.push(sprintf('%s
    • ', active, page));  
  •                 }  
  •             });  
  •   
  •             pageNumber.push('');  
  •   
  •             html.push(this.options.formatRecordsPerPage(pageNumber.join('')));  
  •             html.push('');  
  •   
  •             // 分页  
  •             // 策略：通过from初始页、to结尾页，先设置首页起的显示情况，再设置...按钮的显示情况，接着尾页的显示情况  
  •             // 顺序设置，由一般到具体  
  •             html.push('',  
  •                 ' + this.options.paginationHAlign + ' pagination">',  
  •                 ' + sprintf(' pagination-%s', this.options.iconSize) + '">',  
  •                 '' + this.options.paginationPreText + '
    • ');  
  •   
  •             if (this.totalPages < 5) {  
  •                 from = 1;  
  •                 to = this.totalPages;  
  •             } else {  
  •                 from = this.options.pageNumber - 2;  
  •                 to = from + 4;  
  •                 if (from < 1) {  
  •                     from = 1;  
  •                     to = 5;  
  •                 }  
  •                 if (to > this.totalPages) {  
  •                     to = this.totalPages;  
  •                     from = to - 4;  
  •                 }  
  •             }  
  •   
  •             // 总页数大于6时，显示第一页，最后一页，pageNumber--，pageNumber，pageNumber++，以及两串...  
  •             if (this.totalPages >= 6) {  
  •                 if (this.options.pageNumber >= 3) {  
  •                     html.push(' + (1 === this.options.pageNumber ? ' active' : '') + '">',  
  •                         '', 1, '',  
  •                         '
    • ');  
  •   
  •                     from++;  
  •                 }  
  •   
  •                 if (this.options.pageNumber >= 4) {  
  •                     // from--显示第二页按钮  
  •                     if (this.options.pageNumber == 4 || this.totalPages == 6 || this.totalPages == 7) {  
  •                         from--;  
  •                     } else {  
  •                         html.push('',  
  •                             '...',  
  •                             '
    • ');  
  •                     }  
  •   
  •                     to--;  
  •                 }  
  •             }  
  •   
  •   
  •             // 根据上一条if语句form++的情况，pageNumber临近尾页的时候执行from--，显示后五条  
  •             if (this.totalPages >= 7) {  
  •                 if (this.options.pageNumber >= (this.totalPages - 2)) {  
  •                     from--;  
  •                 }  
  •             }  
  •   
  •             // 根据上一条if语句to--的情况，pageNumber挨近尾页的时候执行to--，显示后五条  
  •             if (this.totalPages == 6) {  
  •                 if (this.options.pageNumber >= (this.totalPages - 2)) {  
  •                     to++;  
  •                 }  
  •             } else if (this.totalPages >= 7) {  
  •                 if (this.totalPages == 7 || this.options.pageNumber >= (this.totalPages - 3)) {  
  •                     to++;  
  •                 }  
  •             }  
  •   
  •             for (i = from; i <= to; i++) {  
  •                 html.push(' + (i === this.options.pageNumber ? ' active' : '') + '">',  
  •                     '', i, '',  
  •                     '
    • ');  
  •             }  
  •   
  •             if (this.totalPages >= 8) {  
  •                 if (this.options.pageNumber <= (this.totalPages - 4)) {  
  •                     html.push('',  
  •                         '...',  
  •                         '
    • ');  
  •                 }  
  •             }  
  •   
  •             if (this.totalPages >= 6) {  
  •                 if (this.options.pageNumber <= (this.totalPages - 3)) {  
  •                     html.push(' + (this.totalPages === this.options.pageNumber ? ' active' : '') + '">',  
  •                         '', this.totalPages, '',  
  •                         '
    • ');  
  •                 }  
  •             }  
  •   
  •             html.push(  
  •                 '' + this.options.paginationNextText + '
    • ',  
  •                 '',  
  •                 '');  
  •         }  
  •         this.$pagination.html(html.join(''));  
  •   
  •         if (!this.options.onlyInfoPagination) {  
  •             $pageList = this.$pagination.find('.page-list a');// 每页显示数据量切换按钮  
  •             $first = this.$pagination.find('.page-first');  
  •             $pre = this.$pagination.find('.page-pre');  
  •             $next = this.$pagination.find('.page-next');  
  •             $last = this.$pagination.find('.page-last');  
  •             $number = this.$pagination.find('.page-number');  
  •   
  •             if (this.options.smartDisplay) {  
  •                 if (this.totalPages <= 1) {  
  •                     this.$pagination.find('div.pagination').hide();  
  •                 }  
  •                 if (pageList.length < 2 || this.options.totalRows <= pageList[0]) {  
  •                     this.$pagination.find('span.page-list').hide();  
  •                 }  
  •   
  •                 this.$pagination[this.getData().length ? 'show' : 'hide']();  
  •             }  
  •   
  •             if ($allSelected) {  
  •                 this.options.pageSize = this.options.formatAllRows();  
  •             }  
  •   
  •             // 绑定事件  
  •             $pageList.off('click').on('click', $.proxy(this.onPageListChange, this));  
  •             $first.off('click').on('click', $.proxy(this.onPageFirst, this));  
  •             $pre.off('click').on('click', $.proxy(this.onPagePre, this));  
  •             $next.off('click').on('click', $.proxy(this.onPageNext, this));  
  •             $last.off('click').on('click', $.proxy(this.onPageLast, this));  
  •             $number.off('click').on('click', $.proxy(this.onPageNumber, this));  
  •         }  
  •     };  
  •   
  •     // 分页点选按钮有disabled属性则返回，无则重新布局分页显示面板;  
  •     // maintainSelected为否时，调用resetRows重置复选框为不选中，调用initServer交互或initbody渲染页面;  
  •     // initSever由后台返回数据;  
  •     // initPagination通过options.pageNumber取得options.pageFrom、options.pageTo;  
  •     // initBody由options.pageFrom、options.pageTo获取需要渲染的数据data;  
  •     // 触发page-change事件;  
  •     BootstrapTable.prototype.updatePagination = function (event) {  
  •         // Fix #171: IE disabled button can be clicked bug.  
  •         if (event && $(event.currentTarget).hasClass('disabled')) {  
  •             return;  
  •         }  
  •   
  •         if (!this.options.maintainSelected) {  
  •             this.resetRows();  
  •         }  
  •   
  •         this.initPagination();  
  •         if (this.options.sidePagination === 'server') {  
  •             this.initServer();  
  •         } else {  
  •             this.initBody();  
  •         }  
  •   
  •         this.trigger('page-change', this.options.pageNumber, this.options.pageSize);  
  •     };  
  •   
  •     // 每页显示数据量下拉列表选中时触发，替换每页显示数据量按钮文本;  
  •     // 更新options.pageSize，通过updatePagination调用initPagination设置this.pageFrom、this.pageTo;  
  •     // updatePagination再调用initServer完成交互，或initBody渲染本地数据;  
  •     BootstrapTable.prototype.onPageListChange = function (event) {  
  •         var $this = $(event.currentTarget);  
  •   
  •         $this.parent().addClass('active').siblings().removeClass('active');  
  •         this.options.pageSize = $this.text().toUpperCase() === this.options.formatAllRows().toUpperCase() ?  
  •             this.options.formatAllRows() : +$this.text();  
  •         this.$toolbar.find('.page-size').text(this.options.pageSize);  
  •   
  •         this.updatePagination(event);  
  •     };  
  •   
  •     // 更新options.pageNumber,通过updatePagination调用initPagination设置this.pageFrom、this.pageTo;  
  •     // updatePagination再调用initServer完成交互，或initBody渲染本地数据;  
  •     // 跳转分页首页  
  •     BootstrapTable.prototype.onPageFirst = function (event) {  
  •         this.options.pageNumber = 1;  
  •         this.updatePagination(event);  
  •     };  
  •     // 跳转分页上一页  
  •     BootstrapTable.prototype.onPagePre = function (event) {  
  •         if ((this.options.pageNumber - 1) == 0) {  
  •             this.options.pageNumber = this.options.totalPages;  
  •         } else {  
  •             this.options.pageNumber--;  
  •         }  
  •         this.updatePagination(event);  
  •     };  
  •     // 跳转分页下一页  
  •     BootstrapTable.prototype.onPageNext = function (event) {  
  •         if ((this.options.pageNumber + 1) > this.options.totalPages) {  
  •             this.options.pageNumber = 1;  
  •         } else {  
  •             this.options.pageNumber++;  
  •         }  
  •         this.updatePagination(event);  
  •     };  
  •     // 跳转尾页  
  •     BootstrapTable.prototype.onPageLast = function (event) {  
  •         this.options.pageNumber = this.totalPages;  
  •         this.updatePagination(event);  
  •     };  
  •     // 由页码跳转  
  •     BootstrapTable.prototype.onPageNumber = function (event) {  
  •         if (this.options.pageNumber === +$(event.currentTarget).text()) {  
  •             return;  
  •         }  
  •         this.options.pageNumber = +$(event.currentTarget).text();  
  •         this.updatePagination(event);  
  •     };  
  •   
  •     // fixedScroll为否的情况下，表体移动到顶部;  
  •     // 通过this.pageFrom、this.pageTo截取this.getData()数据row渲染表体，主要是tbody>tr以及tbody>tr>td;  
  •     // tbody>tr的data-index设为行号，class、id为row._class、row._id，样式、data数据通过调用函数获得;  
  •     // tbody>tr>td区分为卡片显示和表格显示两类，显示值取经this.header.formatters[i]处理后的row[field];  
  •     // tbody>tr>td其他class、id、title、data取row[_field_class]等;  
  •     // 绑定展开卡片详情按钮点击事件、复选框点击事件、this.header.events中的事件;  
  •     // 触发post-body、pre-body事件;   
  •     BootstrapTable.prototype.initBody = function (fixedScroll) {  
  •         var that = this,  
  •             html = [],  
  •             data = this.getData();// 获取搜索过滤后的数据  
  •             // data的数据格式为对象形式  
  •             // [{   // 行tr中的属性设置  
  •             //      _data:{  
  •             //          index:1,// 后续会自动赋值为数据在当前页的所在行号  
  •             //          field:field  
  •             //      },  
  •             //      _id:id,  
  •             //      _class:class,  
  •             //      field1:value1,field2:value2, //填充在单元格中的显示内容，从this.header.fields数组中获取属性名field1等  
  •             //      _field_id  
  •             // }] // 每一行特定的样式、属性根据this.options.rowStyle、this.options.rowAttributes获取  
  •             // 数组形式  
  •             // [["field","class"]] // 数组形式不能对每一行添加特定的data属性、id以及class  
  •             //                     // 特定的的样式、属性仍可由this.options.rowStyle、this.options.rowAttributes获取  
  •             //                     // 以及data-index添加行号、data-uniqueId每行的唯一标识，根据options.uniqueId从data中获取  
  •             //                       
  •             // tr以及checkbox中data数组的序号data-index，以便于获取data[data-index]数据调用  
  •   
  •         this.trigger('pre-body', data);  
  •   
  •         this.$body = this.$el.find('>tbody');  
  •         if (!this.$body.length) {  
  •             this.$body = $('').appendTo(this.$el);  
  •         }// 页面初始化存在tbody>tr>td的情况下，this.options.data数据由initTable获取  
  •   
  •         //Fix #389 Bootstrap-table-flatJSON is not working  
  •         // 未作分页或后台分页的情况返回所有数据  
  •         if (!this.options.pagination || this.options.sidePagination === 'server') {  
  •             this.pageFrom = 1;  
  •             this.pageTo = data.length;  
  •         }  
  •   
  •         for (var i = this.pageFrom - 1; i < this.pageTo; i++) {  
  •             var key,  
  •                 item = data[i],// 行数据信息row  
  •                 style = {},  
  •                 csses = [],  
  •                 data_ = '',  
  •                 attributes = {},  
  •                 htmlAttributes = [];  
  •   
  •             // 通过options.rowStyle(row,index)函数或window[options.rowStyle](row,index)获取tbody>tr样式  
  •             style = calculateObjectValue(this.options, this.options.rowStyle, [item, i], style);  
  •             if (style && style.css) {  
  •                 for (key in style.css) {  
  •                     csses.push(key + ': ' + style.css[key]);  
  •                 }  
  •             }  
  •   
  •             // 通过options.rowAttributes(row,index)函数或window[options.rowAttributes](row,index)获取tbody>tr属性  
  •             attributes = calculateObjectValue(this.options,  
  •                 this.options.rowAttributes, [item, i], attributes);  
  •             if (attributes) {  
  •                 for (key in attributes) {  
  •                     htmlAttributes.push(sprintf('%s="%s"', key, escapeHTML(attributes[key])));  
  •                 }  
  •             }  
  •   
  •             // 通过row._data，row._id，row._class，row[options.uniqueId]渲染tbody>tr  
  •             if (item._data && !$.isEmptyObject(item._data)) {  
  •                 $.each(item._data, function (k, v) {  
  •                     if (k === 'index') {  
  •                         return;  
  •                     }  
  •                     data_ += sprintf(' data-%s="%s"', k, v);  
  •                 });  
  •             }  
  •   
  •             html.push(',  
  •                 sprintf(' %s', htmlAttributes.join(' ')),  
  •                 sprintf(' id="%s"', $.isArray(item) ? undefined : item._id),  
  •                 sprintf(' class="%s"', style.classes || ($.isArray(item) ? undefined : item._class)),  
  •                 sprintf(' data-index="%s"', i),  
  •                 sprintf(' data-uniqueid="%s"', item[this.options.uniqueId]),  
  •                 sprintf('%s', data_),  
  •                 '>'  
  •             );  
  •   
  •             // 卡片式显示跨列  
  •             if (this.options.cardView) {  
  •                 html.push(sprintf('', this.header.fields.length));  
  •             }  
  •   
  •             // 表格显示时添加每行数据前点击展示卡片式详情按钮  
  •             if (!this.options.cardView && this.options.detailView) {  
  •                 html.push('',  
  •                     '',  
  •                     sprintf('', this.options.iconsPrefix, this.options.icons.detailOpen),  
  •                     '',  
  •                     '');  
  •             }  
  •   
  •             // 遍历this.header.fields获取主键field值，再由主键field拼接row中的属性取值，包括row[field]  
  •             // 显示文本row[field]调用对应的this.header.formatter[j]处理后获取  
  •             // j即列坐标  
  •             $.each(this.header.fields, function (j, field) {  
  •                 var text = '',  
  •                     value = getItemField(item, field, that.options.escape),// 获取row[field]  
  •                     type = '',  
  •                     cellStyle = {},  
  •                     id_ = '',  
  •                     class_ = that.header.classes[j],  
  •                     data_ = '',  
  •                     rowspan_ = '',  
  •                     title_ = '',  
  •                     column = that.columns[getFieldIndex(that.columns, field)];  
  •   
  •                 if (!column.visible) {// 筛选时设置  
  •                     return;  
  •                 }  
  •   
  •                 style = sprintf('style="%s"', csses.concat(that.header.styles[j]).join('; '));  
  •   
  •                 // 调用that.header.formatters[j](item.field,item,i)格式化显示内容  
  •                 // 特别当单元格是复选框的时候，value返回值可以是对象形式{checked:true;disabled:true}，此时无显示文本  
  •                 value = calculateObjectValue(column,  
  •                     that.header.formatters[j], [value, item, i], value);  
  •   
  •                 if (item['_' + field + '_id']) {  
  •                     id_ = sprintf(' id="%s"', item['_' + field + '_id']);  
  •                 }  
  •                 if (item['_' + field + '_class']) {  
  •                     class_ = sprintf(' class="%s"', item['_' + field + '_class']);  
  •                 }  
  •                 if (item['_' + field + '_rowspan']) {  
  •                     rowspan_ = sprintf(' rowspan="%s"', item['_' + field + '_rowspan']);  
  •                 }  
  •                 if (item['_' + field + '_title']) {  
  •                     title_ = sprintf(' title="%s"', item['_' + field + '_title']);  
  •                 }  
  •                 // 调用that.header.cellStyles[j](item.field,item,i)设置单元格显示样式  
  •                 cellStyle = calculateObjectValue(that.header,  
  •                     that.header.cellStyles[j], [value, item, i], cellStyle);  
  •                 if (cellStyle.classes) {  
  •                     class_ = sprintf(' class="%s"', cellStyle.classes);  
  •                 }  
  •                 if (cellStyle.css) {  
  •                     var csses_ = [];  
  •                     for (var key in cellStyle.css) {  
  •                         csses_.push(key + ': ' + cellStyle.css[key]);  
  •                     }  
  •                     style = sprintf('style="%s"', csses_.concat(that.header.styles[j]).join('; '));  
  •                 }  
  •   
  •                 if (item['_' + field + '_data'] && !$.isEmptyObject(item['_' + field + '_data'])) {  
  •                     $.each(item['_' + field + '_data'], function (k, v) {  
  •                         if (k === 'index') {  
  •                             return;  
  •                         }  
  •                         data_ += sprintf(' data-%s="%s"', k, v);  
  •                     });  
  •                 }  
  •   
  •                 if (column.checkbox || column.radio) {  
  •                     type = column.checkbox ? 'checkbox' : type;  
  •                     type = column.radio ? 'radio' : type;  
  •   
  •                     text = [sprintf(that.options.cardView ?  
  •                         '' : '', column['class'] || ''),  
  •                         ' +  
  •                         sprintf(' data-index="%s"', i) +  
  •                         sprintf(' name="%s"', that.options.selectItemName) +  
  •                         sprintf(' type="%s"', type) +  
  •                         sprintf(' value="%s"', item[that.options.idField]) +  
  •                         sprintf(' checked="%s"', value === true ||  
  •                         (value && value.checked) ? 'checked' : undefined) +  
  •                         sprintf(' disabled="%s"', !column.checkboxEnabled ||  
  •                         (value && value.disabled) ? 'disabled' : undefined) +  
  •                         ' />',  
  •                         that.header.formatters[j] && typeof value === 'string' ? value : '',  
  •                         that.options.cardView ? '' : ''  
  •                     ].join('');  
  •   
  •                     // 复选框上传内容字段名属性后添加true选中/false未选中值  
  •                     item[that.header.stateField] = value === true || (value && value.checked);  
  •                 } else {  
  •                     value = typeof value === 'undefined' || value === null ?  
  •                         that.options.undefinedText : value;  
  •   
  •                     // getPropertyFromOther卡片式显示时获取标题栏的文本内容  
  •                     text = that.options.cardView ? ['',  
  •                         that.options.showHeader ? sprintf('%s', style,  
  •                             getPropertyFromOther(that.columns, 'field', 'title', field)) : '',  
  •                         sprintf('%s', value),  
  •                         ''  
  •                     ].join('') : [sprintf('', id_, class_, style, data_, rowspan_, title_),  
  •                         value,  
  •                         ''  
  •                     ].join('');  
  •   
  •                     if (that.options.cardView && that.options.smartDisplay && value === '') {  
  •                         // 占位符，以利于根据元素序号准确地绑定事件  
  •                         text = '';  
  •                     }  
  •                 }  
  •   
  •                 html.push(text);  
  •             });  
  •   
  •             if (this.options.cardView) {  
  •                 html.push('');  
  •             }  
  •   
  •             html.push('');  
  •         }  
  •   
  •         if (!html.length) {  
  •             html.push('',  
  •                 sprintf('%s',  
  •                     this.$header.find('th').length, this.options.formatNoMatches()),  
  •                 '');  
  •         }  
  •   
  •         this.$body.html(html.join(''));  
  •   
  •         if (!fixedScroll) {  
  •             this.scrollTo(0);  
  •         }  
  •   
  •         // 点击单元格触发单元格以及当前行点击事件，复选框则勾选  
  •         this.$body.find('> tr[data-index] > td').off('click dblclick').on('click dblclick', function (e) {  
  •             var $td = $(this),  
  •                 $tr = $td.parent(),  
  •                 item = that.data[$tr.data('index')],// 获取当前行的data[data-index]数据调用  
  •                 index = $td[0].cellIndex,// 返回一行内单元格所在的列坐标  
  •                 field = that.header.fields[that.options.detailView && !that.options.cardView ? index - 1 : index],  
  •                 column = that.columns[getFieldIndex(that.columns, field)],  
  •                 value = getItemField(item, field, that.options.escape);  
  •   
  •             if ($td.find('.detail-icon').length) {  
  •                 return;  
  •             }  
  •   
  •             // 单元格点击事件传入单元格的field（借此获取data中的有关数据）、显示内容value值data[data-index][field]、  
  •             // 当前行data数据item值data[data-index]、单元格jquery对象$td  
  •             that.trigger(e.type === 'click' ? 'click-cell' : 'dbl-click-cell', field, value, item, $td);  
  •             // 行点击事件传入当前行data数据item值data[data-index]以及当前行jquery对象$tr  
  •             that.trigger(e.type === 'click' ? 'click-row' : 'dbl-click-row', item, $tr);  
  •   
  •             if (e.type === 'click' && that.options.clickToSelect && column.clickToSelect) {  
  •                 var $selectItem = $tr.find(sprintf('[name="%s"]', that.options.selectItemName));  
  •                 if ($selectItem.length) {  
  •                     $selectItem[0].click(); // #144: .trigger('click') bug  
  •                 }  
  •             }  
  •         });  
  •   
  •         // 展开折叠卡片式详情  
  •         this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', function () {  
  •             var $this = $(this),  
  •                 $tr = $this.parent().parent(),  
  •                 index = $tr.data('index'),  
  •                 row = data[index]; // Fix #980 Detail view, when searching, returns wrong row  
  •   
  •             if ($tr.next().is('tr.detail-view')) {  
  •                 $this.find('i').attr('class', sprintf('%s %s', that.options.iconsPrefix, that.options.icons.detailOpen));  
  •                 $tr.next().remove();  
  •                 that.trigger('collapse-row', index, row);  
  •             } else {  
  •                 $this.find('i').attr('class', sprintf('%s %s', that.options.iconsPrefix, that.options.icons.detailClose));  
  •                 $tr.after(sprintf('', $tr.find('td').length));  
  •                 var $element = $tr.next().find('td');  
  •                 // options.detailFormatter执行后渲染折叠式卡片详情文本内容，包含html标签、Dom元素  
  •                 var content = calculateObjectValue(that.options, that.options.detailFormatter, [index, row, $element], '');  
  •                 if($element.length === 1) {  
  •                     $element.append(content);  
  •                 }  
  •                 that.trigger('expand-row', index, row, $element);  
  •             }  
  •             that.resetView();  
  •         });  
  •   
  •         // 绑定复选框点击事件  
  •         this.$selectItem = this.$body.find(sprintf('[name="%s"]', this.options.selectItemName));  
  •         this.$selectItem.off('click').on('click', function (event) {  
  •             event.stopImmediatePropagation();  
  •   
  •             var $this = $(this),  
  •                 checked = $this.prop('checked'),  
  •                 row = that.data[$this.data('index')];  
  •   
  •             if (that.options.maintainSelected && $(this).is(':radio')) {  
  •                 $.each(that.options.data, function (i, row) {  
  •                     row[that.header.stateField] = false;  
  •                 });  
  •             }  
  •   
  •             row[that.header.stateField] = checked;  
  •   
  •             if (that.options.singleSelect) {  
  •                 that.$selectItem.not(this).each(function () {  
  •                     that.data[$(this).data('index')][that.header.stateField] = false;  
  •                 });  
  •                 that.$selectItem.filter(':checked').not(this).prop('checked', false);  
  •             }  
  •   
  •             that.updateSelected();  
  •             that.trigger(checked ? 'check' : 'uncheck', row, $this);  
  •         });  
  •   
  •         // 由this.header.events为tbody>tr>td中子元素绑定事件  
  •         $.each(this.header.events, function (i, events) {  
  •             if (!events) {  
  •                 return;  
  •             }  
  •             // fix bug, if events is defined with namespace  
  •             if (typeof events === 'string') {  
  •                 events = calculateObjectValue(null, events);  
  •             }  
  •   
  •             var field = that.header.fields[i],  
  •                 fieldIndex = $.inArray(field, that.getVisibleFields());  
  •   
  •             if (that.options.detailView && !that.options.cardView) {  
  •                 fieldIndex += 1;  
  •             }  
  •   
  •             for (var key in events) {  
  •                 that.$body.find('>tr:not(.no-records-found)').each(function () {  
  •                     var $tr = $(this),  
  •                         $td = $tr.find(that.options.cardView ? '.card-view' : 'td').eq(fieldIndex),  
  •                         index = key.indexOf(' '),  
  •                         name = key.substring(0, index),  
  •                         el = key.substring(index + 1),  
  •                         func = events[key];  
  •   
  •                     $td.find(el).off(name).on(name, function (e) {  
  •                         var index = $tr.data('index'),  
  •                             row = that.data[index],  
  •                             value = row[field];  
  •   
  •                         func.apply(this, [e, value, row, index]);  
  •                     });  
  •                 });  
  •             }  
  •         });  
  •   
  •         this.updateSelected();  
  •         this.resetView();  
  •   
  •         this.trigger('post-body');  
  •     };  
  •   
  •     // 触发ajax事件（可以是用户自定义的方法options.ajax），上传数据格式为  
  •     // {  
  •     //      searchText:this.searchText,  
  •     //      sortName:this.options.sortName,  
  •     //      sortOrder:this.options.sortOrder,  
  •     //      pageSize/limit:...,  
  •     //      pageNumber/offset:...,  
  •     //      [filter]:...,  
  •     //      query:...  
  •     // }  
  •     // 触发上传成功调用this.load方法，触发load-success事件、上传失败load-error事件  
  •     BootstrapTable.prototype.initServer = function (silent, query) {  
  •         var that = this,  
  •             data = {},  
  •             params = {  
  •                 searchText: this.searchText,  
  •                 sortName: this.options.sortName,  
  •                 sortOrder: this.options.sortOrder  
  •             },  
  •             request;// ajax配置  
  •   
  •         if(this.options.pagination) {  
  •             params.pageSize = this.options.pageSize === this.options.formatAllRows() ?  
  •                 this.options.totalRows : this.options.pageSize;  
  •             params.pageNumber = this.options.pageNumber;  
  •         }  
  •   
  •         if (!this.options.url && !this.options.ajax) {  
  •             return;  
  •         }  
  •   
  •         // 意义？？？  
  •         if (this.options.queryParamsType === 'limit') {  
  •             params = {  
  •                 search: params.searchText,  
  •                 sort: params.sortName,  
  •                 order: params.sortOrder  
  •             };  
  •             if (this.options.pagination) {  
  •                 params.limit = this.options.pageSize === this.options.formatAllRows() ?  
  •                     this.options.totalRows : this.options.pageSize;  
  •                 params.offset = this.options.pageSize === this.options.formatAllRows() ?  
  •                     0 : this.options.pageSize * (this.options.pageNumber - 1);  
  •             }  
  •         }  
  •   
  •         // this.filterColumnsPartial用于设置后台过滤？？？  
  •         if (!($.isEmptyObject(this.filterColumnsPartial))) {  
  •             params['filter'] = JSON.stringify(this.filterColumnsPartial, null);  
  •         }  
  •   
  •         // 调用options.queryParams处理上传的内容param，包括搜索文本、排序字段、排序方式  
  •         // 以及当前页显示几条数据、当前页数或limit、offset  
  •         data = calculateObjectValue(this.options, this.options.queryParams, [params], data);  
  •   
  •         $.extend(data, query || {});  
  •   
  •         if (data === false) {  
  •             return;  
  •         }  
  •   
  •         if (!silent) {  
  •             this.$tableLoading.show();  
  •         }  
  •         request = $.extend({}, calculateObjectValue(null, this.options.ajaxOptions), {  
  •             type: this.options.method,  
  •             url: this.options.url,  
  •             data: this.options.contentType === 'application/json' && this.options.method === 'post' ?  
  •                 JSON.stringify(data) : data,  
  •             cache: this.options.cache,  
  •             contentType: this.options.contentType,  
  •             dataType: this.options.dataType,  
  •             success: function (res) {  
  •                 res = calculateObjectValue(that.options, that.options.responseHandler, [res], res);  
  •                 that.load(res);  
  •                 that.trigger('load-success', res);  
  •                 if (!silent) that.$tableLoading.hide();  
  •             },  
  •             error: function (res) {  
  •                 that.trigger('load-error', res.status, res);  
  •                 if (!silent) that.$tableLoading.hide();  
  •             }  
  •         });  
  •   
  •         if (this.options.ajax) {  
  •             calculateObjectValue(this, this.options.ajax, [request], null);  
  •         } else {  
  •             $.ajax(request);  
  •         }  
  •     };  
  •   
  •     // 初始化若设置搜索文本，开启搜索，不支持本地数据搜索  
  •     BootstrapTable.prototype.initSearchText = function () {  
  •         if (this.options.search) {  
  •             if (this.options.searchText !== '') {  
  •                 var $search = this.$toolbar.find('.search input');  
  •                 $search.val(this.options.searchText);  
  •                 this.onSearch({currentTarget: $search});  
  •             }  
  •         }  
  •     };  
  •   
  •     // getCaret改变排序点击箭头的上下方向  
  •     BootstrapTable.prototype.getCaret = function () {  
  •         var that = this;  
  •   
  •         $.each(this.$header.find('th'), function (i, th) {  
  •             $(th).find('.sortable').removeClass('desc asc').addClass($(th).data('field') === that.options.sortName ? that.options.sortOrder : 'both');  
  •         });  
  •     };  
  •   
  •     // 全选以及全不选时改变全选复选框的勾选状态，以及tr行添加或删除selected类  
  •     BootstrapTable.prototype.updateSelected = function () {  
  •         var checkAll = this.$selectItem.filter(':enabled').length &&  
  •             this.$selectItem.filter(':enabled').length ===  
  •             this.$selectItem.filter(':enabled').filter(':checked').length;  
  •   
  •         this.$selectAll.add(this.$selectAll_).prop('checked', checkAll);  
  •   
  •         this.$selectItem.each(function () {  
  •             $(this).closest('tr')[$(this).prop('checked') ? 'addClass' : 'removeClass']('selected');  
  •         });  
  •     };  
  •   
  •     // 复选框选中或撤销选中后更新this.data数据中的[this.header.stateField]属性，以便上传复选框的状态  
  •     BootstrapTable.prototype.updateRows = function () {  
  •         var that = this;  
  •   
  •         this.$selectItem.each(function () {  
  •             that.data[$(this).data('index')][that.header.stateField] = $(this).prop('checked');  
  •         });  
  •     };  
  •   
  •     // 重置，撤销复选框选中，以及data[i][that.header.stateField]赋值为false  
  •     BootstrapTable.prototype.resetRows = function () {  
  •         var that = this;  
  •   
  •         $.each(this.data, function (i, row) {  
  •             that.$selectAll.prop('checked', false);  
  •             that.$selectItem.prop('checked', false);  
  •             if (that.header.stateField) {  
  •                 row[that.header.stateField] = false;  
  •             }  
  •         });  
  •     };  
  •   
  •     // 执行this.options[BootstrapTable.EVENTS[name]]函数(类似浏览器默认事件)，并触发事件  
  •     BootstrapTable.prototype.trigger = function (name) {  
  •         var args = Array.prototype.slice.call(arguments, 1);  
  •   
  •         name += '.bs.table';  
  •         this.options[BootstrapTable.EVENTS[name]].apply(this.options, args);  
  •         this.$el.trigger($.Event(name), args);  
  •   
  •         this.options.onAll(name, args);  
  •         this.$el.trigger($.Event('all.bs.table'), [name, args]);  
  •     };  
  •   
  •     // 一定时间内触发this.fitHeader函数调整表头的水平偏移，垂直滚动不影响表头  
  •     BootstrapTable.prototype.resetHeader = function () {  
  •         // fix #61: the hidden table reset header bug.  
  •         // fix bug: get $el.css('width') error sometime (height = 500)  
  •         clearTimeout(this.timeoutId_);  
  •         this.timeoutId_ = setTimeout($.proxy(this.fitHeader, this), this.$el.is(':hidden') ? 100 : 0);  
  •     };  
  •   
  •     // 克隆this.$el中的表头，置入this.$tableHeader中，出使垂直滚动时，表头信息不变  
  •     // 调整表体水平偏移量和表体水平一致  
  •     BootstrapTable.prototype.fitHeader = function () {  
  •         var that = this,  
  •             fixedBody,  
  •             scrollWidth,  
  •             focused,  
  •             focusedTemp;  
  •   
  •         if (that.$el.is(':hidden')) {  
  •             that.timeoutId_ = setTimeout($.proxy(that.fitHeader, that), 100);  
  •             return;  
  •         }  
  •         fixedBody = this.$tableBody.get(0);// 包裹表单的.fixed-table-body元素  
  •   
  •         // .fixed-table-container有固定高度，其子元素.fixed-table-body超过该高度就显示滚动条  
  •         scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&  
  •         fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight() ?  
  •             getScrollBarWidth() : 0;  
  •   
  •         this.$el.css('margin-top', -this.$header.outerHeight());  
  •   
  •         // 表头聚焦的元素添加focus-temp类，从而使this.$tableHeader的同个元素获得焦点  
  •         focused = $(':focus');  
  •         if (focused.length > 0) {  
  •             var $th = focused.parents('th');  
  •             if ($th.length > 0) {  
  •                 var dataField = $th.attr('data-field');  
  •                 if (dataField !== undefined) {  
  •                     var $headerTh = this.$header.find("[data-field='" + dataField + "']");  
  •                     if ($headerTh.length > 0) {  
  •                         $headerTh.find(":input").addClass("focus-temp");  
  •                     }  
  •                 }  
  •             }  
  •         }  
  •   
  •         this.$header_ = this.$header.clone(true, true);  
  •         this.$selectAll_ = this.$header_.find('[name="btSelectAll"]');  
  •         this.$tableHeader.css({  
  •             'margin-right': scrollWidth  
  •         }).find('table').css('width', this.$el.outerWidth())  
  •             .html('').attr('class', this.$el.attr('class'))  
  •             .append(this.$header_);  
  •   
  •   
  •         focusedTemp = $('.focus-temp:visible:eq(0)');  
  •         if (focusedTemp.length > 0) {  
  •             focusedTemp.focus();  
  •             this.$header.find('.focus-temp').removeClass('focus-temp');  
  •         }  
  •   
  •         // fix bug: $.data() is not working as expected after $.append()  
  •         // that.$header_是jquery对象，如果改变了this的值，$(this).data()获取内容和bug是咋回事？？？  
  •         this.$header.find('th[data-field]').each(function (i) {  
  •             that.$header_.find(sprintf('th[data-field="%s"]', $(this).data('field'))).data($(this).data());  
  •         });  
  •   
  •         var visibleFields = this.getVisibleFields();  
  •   
  •         // 标题栏单元格中的.fht-cell元素和表格中元素的宽度相一致，意义？？？  
  •         this.$body.find('>tr:first-child:not(.no-records-found) > *').each(function (i) {  
  •             var $this = $(this),  
  •                 index = i;  
  •   
  •             if (that.options.detailView && !that.options.cardView) {  
  •                 if (i === 0) {  
  •                     that.$header_.find('th.detail').find('.fht-cell').width($this.innerWidth());  
  •                 }  
  •                 index = i - 1;  
  •             }  
  •   
  •             that.$header_.find(sprintf('th[data-field="%s"]', visibleFields[index]))  
  •                 .find('.fht-cell').width($this.innerWidth());  
  •         });  
  •   
  •         // 当窗口缩放时，出现滚动条，表头表尾水平偏移情况相当  
  •         this.$tableBody.off('scroll').on('scroll', function () {  
  •             that.$tableHeader.scrollLeft($(this).scrollLeft());  
  •   
  •             if (that.options.showFooter && !that.options.cardView) {  
  •                 that.$tableFooter.scrollLeft($(this).scrollLeft());  
  •             }  
  •         });  
  •         that.trigger('post-header');  
  •     };  
  •   
  •     // 创建表尾，利用footerFormatter填充表尾内容，调用fitFooter调整表尾偏移  
  •     BootstrapTable.prototype.resetFooter = function () {  
  •         var that = this,  
  •             data = that.getData(),  
  •             html = [];  
  •   
  •         if (!this.options.showFooter || this.options.cardView) {  
  •             return;  
  •         }  
  •   
  •         if (!this.options.cardView && this.options.detailView) {  
  •             html.push(' ');  
  •         }  
  •   
  •         $.each(this.columns, function (i, column) {  
  •             var falign = '',   
  •                 style = '',  
  •                 class_ = sprintf(' class="%s"', column['class']);  
  •   
  •             if (!column.visible) {  
  •                 return;  
  •             }  
  •   
  •             if (that.options.cardView && (!column.cardVisible)) {  
  •                 return;  
  •             }  
  •   
  •             falign = sprintf('text-align: %s; ', column.falign ? column.falign : column.align);  
  •             style = sprintf('vertical-align: %s; ', column.valign);  
  •   
  •             html.push(', class_, sprintf(' style="%s"', falign + style), '>');  
  •             html.push('');  
  •   
  •             html.push(calculateObjectValue(column, column.footerFormatter, [data], ' ') || ' ');  
  •   
  •             html.push('');  
  •             html.push('');  
  •             html.push('');  
  •             html.push('');  
  •         });  
  •   
  •         this.$tableFooter.find('tr').html(html.join(''));  
  •         clearTimeout(this.timeoutFooter_);  
  •         this.timeoutFooter_ = setTimeout($.proxy(this.fitFooter, this),  
  •             this.$el.is(':hidden') ? 100 : 0);  
  •     };  
  •   
  •     // 调整表尾水平偏移，设置表尾fnt-cell的宽度  
  •     BootstrapTable.prototype.fitFooter = function () {  
  •         var that = this,  
  •             $footerTd,  
  •             elWidth,  
  •             scrollWidth;  
  •   
  •         clearTimeout(this.timeoutFooter_);  
  •         if (this.$el.is(':hidden')) {  
  •             this.timeoutFooter_ = setTimeout($.proxy(this.fitFooter, this), 100);  
  •             return;  
  •         }  
  •   
  •         elWidth = this.$el.css('width');  
  •         scrollWidth = elWidth > this.$tableBody.width() ? getScrollBarWidth() : 0;  
  •   
  •         this.$tableFooter.css({  
  •             'margin-right': scrollWidth  
  •         }).find('table').css('width', elWidth)  
  •             .attr('class', this.$el.attr('class'));  
  •   
  •         $footerTd = this.$tableFooter.find('td');  
  •   
  •         this.$body.find('>tr:first-child:not(.no-records-found) > *').each(function (i) {  
  •             var $this = $(this);  
  •   
  •             $footerTd.eq(i).find('.fht-cell').width($this.innerWidth());  
  •         });  
  •     };  
  •   
  •     // toggleColumn筛选条目下拉菜单点选时更新columns[i].visible信息;  
  •     // this.columns信息的改变，重新调用表头、表体、搜索框、分页初始化函数;  
  •     // 当勾选的显示条目小于this.options.minimumCountColumns时，勾选的条目设置disabled属性;  
  •     BootstrapTable.prototype.toggleColumn = function (index, checked, needUpdate) {  
  •         if (index === -1) {  
  •             return;  
  •         }  
  •         this.columns[index].visible = checked;  
  •   
  •         this.initHeader();  
  •         this.initSearch();  
  •         this.initPagination();  
  •         this.initBody();  
  •   
  •         if (this.options.showColumns) {// this.options.showColumns显示筛选条目按钮  
  •             var $items = this.$toolbar.find('.keep-open input').prop('disabled', false);  
  •   
  •             if (needUpdate) {  
  •                 $items.filter(sprintf('[value="%s"]', index)).prop('checked', checked);  
  •             }  
  •   
  •             if ($items.filter(':checked').length <= this.options.minimumCountColumns) {  
  •                 $items.filter(':checked').prop('disabled', true);  
  •             }  
  •         }  
  •     };  
  •   
  •     // 从表体中找到data-index=index或data-uniqueid=uniqueId那一行，根据visible显示或隐藏  
  •     BootstrapTable.prototype.toggleRow = function (index, uniqueId, visible) {  
  •         if (index === -1) {  
  •             return;  
  •         }  
  •   
  •         this.$body.find(typeof index !== 'undefined' ?  
  •             sprintf('tr[data-index="%s"]', index) :  
  •             sprintf('tr[data-uniqueid="%s"]', uniqueId))  
  •             [visible ? 'show' : 'hide']();  
  •     };  
  •   
  •     // 从this.column中剔除visible为false的项，返回field数组  
  •     BootstrapTable.prototype.getVisibleFields = function () {  
  •         var that = this,  
  •             visibleFields = [];  
  •   
  •         $.each(this.header.fields, function (j, field) {  
  •             // this.columns以列坐标:数据的形式保存  
  •             var column = that.columns[getFieldIndex(that.columns, field)];  
  •   
  •             if (!column.visible) {  
  •                 return;  
  •             }  
  •             visibleFields.push(field);  
  •         });  
  •         return visibleFields;  
  •     };  
  •   
  •   
  •   
  •     /**公共方法：通过bootstrap(fnName,argunments)调用 
  •      * 
  •      * resetView(): 
  •      *     调整表体的高度; 
  •      * getData(): 
  •      *     搜索过滤后的数据保存在this.data中，过滤前数据保存在options.data,针对数据在前台的情况; 
  •      *     有过滤数据，返回过滤数据this.data，无则返回未过滤数据this.options.data; 
  •      *     前台分页，获取this.pageFrom-1到this.pageTo的data数据或者整个data数据; 
  •      * load(): 
  •      *     使用后台传回的数据或本地data数据更新data、搜索框、分页、表体显示; 
  •      *     后台传回数据格式为{total:,rows:,[fixedScroll]:}; 
  •      * append(): 
  •      *     从表格尾部插入数据; 
  •      * prepend(): 
  •      *     从表格头部插入数据; 
  •      * remove(): 
  •      *     移除指定行数据，通过行数据row中的某个属性比较删除拥有相同值的行数据data; 
  •      *     param数据格式为{field:paramName,values:paramValues},paramName、paramValues和data对应; 
  •      * removeAll(): 
  •      *     移除所有行数据; 
  •      * getRowByUniqueId(): 
  •      *     获取row[options.uniqueId]或者row._data[options.uniqueId]同id相等的某一行数据;  
  •      * removeByUniqueId(): 
  •      *     移除row[options.uniqueId]或者row._data[options.uniqueId]同id相等的某一行数据; 
  •      * updateByUniqueId(): 
  •      *     更新替换某一行数据，参数格式为{id:row[options.uniqueId],row:row替换数据}; 
  •      * insertRow(): 
  •      *     在某一行后插入数据，参数格式为{index:index行号,row:row插入数据内容}; 
  •      * updateRow(): 
  •      *     更新替换某一行数据，参数格式为{index:index行号,row:row替换数据}; 
  •      * showRow(): 
  •      *     根据{[index:index],[uniqueid:uniqueId]}找到某一行，显示; 
  •      * hideRow(): 
  •      *     根据{[index:index],[uniqueid:uniqueId]}找到某一行，隐藏; 
  •      * getRowsHidden():   
  •      *     获取并返回隐藏的行，根据show将这些行数据显示出来; 
  •      * mergeCells(): 
  •      *     合并单元格，传参为{index:index.field:field,rowspan:3,colspan:4}; 
  •      *     隐藏被合并单元格，重新设置显示单元格rowspan、colspan属性; 
  •      * updateCell(): 
  •      *     更新单元的显示文本，传参为{index:index,field:field,value:value}，根据index、field找到单元格; 
  •      * getOptions(): 
  •      *     返回配置项; 
  •      * getSelections(): 
  •      *     通过过滤后的数据this.data返回选中行的数据; 
  •      * getAllSelections(): 
  •      *     通过未过滤的数据this.options.data返回选中行的数据; 
  •      * checkAll(): 
  •      *     全选; 
  •      * unCheckAll(): 
  •      *     全不选; 
  •      * checkInvert(): 
  •      *     反选; 
  •      * checkAll_(): 
  •      *     全选或全不选执行函数; 
  •      * check(): 
  •      *     选中; 
  •      * unCheck(): 
  •      *     取消选中; 
  •      * check_(): 
  •      *     选中、取消选中执行函数; 
  •      * checkBy(): 
  •      *     选中某几行数据; 
  •      * unCheckBy(): 
  •      *     取消选中某几行数据; 
  •      * checkBy_(): 
  •      *     根据条件选中、取消选中某几行数据执行函数，obj参数格式为{field:paramName,values:paramValues}; 
  •      * destory(): 
  •      *     移出触发元素，其内容、样式通过this.$el_改为初始值，移除构造函数添加最外层包裹元素this.$container; 
  •      * showLoading(): 
  •      *     显示后台数据载入文案; 
  •      * hideLoading(): 
  •      *     隐藏后台数据载入文案; 
  •      * togglePagination(): 
  •      *     分页切换按钮显示隐藏分页内容; 
  •      * refresh(): 
  •      *     刷新页面到第一页，传入参数为{url:url,slient:slient,query:query}; 
  •      * resetWidth(): 
  •      *     调用fitHeader、fitFooter函数调整表头、表尾的宽度; 
  •      * showColumn(): 
  •      *     根据field属性获得fieldIndex，再调用toggleColumn显示某列; 
  •      * hideColumn(): 
  •      *     根据field属性获得fieldIndex，再调用toggleColumn隐藏某列; 
  •      * getHiddenColumns(): 
  •      *     获得隐藏的某几列; 
  •      * filterBy(): 
  •      *     设置过滤数组this.filterColumns; 
  •      *     options.data和this.filterColumns相符则在this.data中保留，不相符则在this.data中删除; 
  •      *     设置页码为1，重新调用initSearch、updatePagination渲染表格;  
  •      * scrollTo(): 
  •      *     设置this.$tableBody滚动条的垂直偏移，意义是移动到第几行数据; 
  •      * getScrollPosition(): 
  •      *     表体滚动到顶部; 
  •      * selectPage(): 
  •      *     设置this.options.pageNumber当前页，调用updatePagination更新表体，initBody或initServer方法; 
  •      * prevPage(): 
  •      * nextPage(): 
  •      *     上一页，下一页; 
  •      * toggleView(): 
  •      *     切换卡片式显示或者表格详情显示; 
  •      * refreshView(): 
  •      *     更新传入的配置项options，调用destory重置，init重新渲染页面; 
  •      * resetSearch(): 
  •      *     设置搜索框文本，启动数据搜索; 
  •      * expandRow_(): 
  •      *     表格详情显示时，折叠展开按钮执行函数; 
  •      * expandRow(): 
  •      *     展开对应行的卡片详情; 
  •      * collapseRow(): 
  •      *     折叠对应行的卡片详情; 
  •      * expandAllRows(): 
  •      *     expandAllRows展开所有卡片式详情，在表格显示的时候; 
  •      *     isSubTable为真，展开父子表格的详情; 
  •      * collapseAllRows(): 
  •      *     expandAllRows展开所有卡片式详情，在表格显示的时候; 
  •      * updateFormatText(): 
  •      *     更新配置项中的格式化函数; 
  •      */  
  •   
  •     // 调整表体的高度  
  •     BootstrapTable.prototype.resetView = function (params) {  
  •         var padding = 0;  
  •   
  •         if (params && params.height) {  
  •             this.options.height = params.height;  
  •         }  
  •   
  •         this.$selectAll.prop('checked', this.$selectItem.length > 0 &&  
  •             this.$selectItem.length === this.$selectItem.filter(':checked').length);  
  •   
  •         if (this.options.height) {  
  •             var toolbarHeight = getRealHeight(this.$toolbar),  
  •                 paginationHeight = getRealHeight(this.$pagination),  
  •                 height = this.options.height - toolbarHeight - paginationHeight;  
  •   
  •             this.$tableContainer.css('height', height + 'px');  
  •         }  
  •   
  •         if (this.options.cardView) {  
  •             this.$el.css('margin-top', '0');  
  •             this.$tableContainer.css('padding-bottom', '0');  
  •             return;  
  •         }  
  •   
  •         if (this.options.showHeader && this.options.height) {  
  •             this.$tableHeader.show();  
  •             this.resetHeader();  
  •             padding += this.$header.outerHeight();  
  •         } else {  
  •             this.$tableHeader.hide();  
  •             this.trigger('post-header');  
  •         }  
  •   
  •         if (this.options.showFooter) {  
  •             this.resetFooter();  
  •             if (this.options.height) {  
  •                 padding += this.$tableFooter.outerHeight() + 1;  
  •             }  
  •         }  
  •   
  •         this.getCaret();  
  •         this.$tableContainer.css('padding-bottom', padding + 'px');  
  •         this.trigger('reset-view');  
  •     };  
  •   
  •     //  过滤或搜索过滤后的数据保存在this.data中，过滤前的数据保存在this.options.data,针对数据在前台的情况;  
  •     //  有过滤数据，返回过滤数据this.data，无则返回未过滤数据this.options.data;  
  •     //  前台分页，获取this.pageFrom-1到this.pageTo的data数据或者整个data数据;  
  •     BootstrapTable.prototype.getData = function (useCurrentPage) {  
  •         return (this.searchText || !$.isEmptyObject(this.filterColumns) || !$.isEmptyObject(this.filterColumnsPartial)) ?  
  •             (useCurrentPage ? this.data.slice(this.pageFrom - 1, this.pageTo) : this.data) :  
  •             (useCurrentPage ? this.options.data.slice(this.pageFrom - 1, this.pageTo) : this.options.data);  
  •     };  
  •   
  •     // 使用后台传回的数据或本地data数据更新data、搜索框、分页、表体显示  
  •     // 后台传回数据格式为{total:,rows:,[fixedScroll]:}  
  •     BootstrapTable.prototype.load = function (data) {  
  •         var fixedScroll = false;  
  •   
  •         // #431: support pagination  
  •         if (this.options.sidePagination === 'server') {  
  •             this.options.totalRows = data.total;  
  •             fixedScroll = data.fixedScroll;  
  •             data = data[this.options.dataField];  
  •         } else if (!$.isArray(data)) { // support fixedScroll  
  •             fixedScroll = data.fixedScroll;  
  •             data = data.data;  
  •         }  
  •   
  •         this.initData(data);  
  •         this.initSearch();  
  •         this.initPagination();  
  •         this.initBody(fixedScroll);  
  •     };  
  •   
  •     // 从表格尾部插入数据  
  •     BootstrapTable.prototype.append = function (data) {  
  •         this.initData(data, 'append');  
  •         this.initSearch();  
  •         this.initPagination();  
  •         this.initSort();  
  •         this.initBody(true);  
  •     };  
  •   
  •     // 从表格头部插入数据  
  •     BootstrapTable.prototype.prepend = function (data) {  
  •         this.initData(data, 'prepend');  
  •         this.initSearch();  
  •         this.initPagination();  
  •         this.initSort();  
  •         this.initBody(true);  
  •     };  
  •   
  •     // 移除指定行数据，通过行数据row中的某个属性比较删除拥有相同值的行数据data  
  •     // param数据格式为{field:paramName,values:paramValues},paramName、paramValues和data对应  
  •     /** var ids = $.map($table.bootstrapTable('getSelections'), function (row) { 
  •             return row.id; 
  •         }); 
  •         $table.bootstrapTable('remove', { 
  •             field: 'id', 
  •             values: ids 
  •         }); 
  •     */  
  •     BootstrapTable.prototype.remove = function (params) {  
  •         var len = this.options.data.length,  
  •             i, row;  
  •   
  •         if (!params.hasOwnProperty('field') || !params.hasOwnProperty('values')) {  
  •             return;  
  •         }  
  •   
  •         for (i = len - 1; i >= 0; i--) {  
  •             row = this.options.data[i];  
  •   
  •             if (!row.hasOwnProperty(params.field)) {  
  •                 continue;  
  •             }  
  •             if ($.inArray(row[params.field], params.values) !== -1) {  
  •                 this.options.data.splice(i, 1);  
  •             }  
  •         }  
  •   
  •         if (len === this.options.data.length) {  
  •             return;  
  •         }  
  •   
  •         this.initSearch();  
  •         this.initPagination();  
  •         this.initSort();  
  •         this.initBody(true);  
  •     };  
  •   
  •     // 移除所有行数据  
  •     BootstrapTable.prototype.removeAll = function () {  
  •         if (this.options.data.length > 0) {  
  •             this.options.data.splice(0, this.options.data.length);  
  •             this.initSearch();  
  •             this.initPagination();  
  •             this.initBody(true);  
  •         }  
  •     };  
  •   
  •     // 获取row[options.uniqueId]或者row._data[options.uniqueId]同id相等的某一行数据  
  •     BootstrapTable.prototype.getRowByUniqueId = function (id) {  
  •         var uniqueId = this.options.uniqueId,  
  •             len = this.options.data.length,  
  •             dataRow = null,  
  •             i, row, rowUniqueId;  
  •   
  •         for (i = len - 1; i >= 0; i--) {  
  •             row = this.options.data[i];  
  •   
  •             if (row.hasOwnProperty(uniqueId)) { // uniqueId is a column  
  •                 rowUniqueId = row[uniqueId];  
  •             } else if(row._data.hasOwnProperty(uniqueId)) { // uniqueId is a row data property  
  •                 rowUniqueId = row._data[uniqueId];  
  •             } else {  
  •                 continue;  
  •             }  
  •   
  •             if (typeof rowUniqueId === 'string') {  
  •                 id = id.toString();  
  •             } else if (typeof rowUniqueId === 'number') {  
  •                 if ((Number(rowUniqueId) === rowUniqueId) && (rowUniqueId % 1 === 0)) {  
  •                     id = parseInt(id);  
  •                 } else if ((rowUniqueId === Number(rowUniqueId)) && (rowUniqueId !== 0)) {  
  •                     id = parseFloat(id);  
  •                 }  
  •             }  
  •   
  •             if (rowUniqueId === id) {  
  •                 dataRow = row;  
  •                 break;  
  •             }  
  •         }  
  •   
  •         return dataRow;  
  •     };  
  •   
  •     // 移除row[options.uniqueId]或者row._data[options.uniqueId]同id相等的某一行数据  
  •     BootstrapTable.prototype.removeByUniqueId = function (id) {  
  •         var len = this.options.data.length,  
  •             row = this.getRowByUniqueId(id);  
  •   
  •         if (row) {  
  •             this.options.data.splice(this.options.data.indexOf(row), 1);  
  •         }  
  •   
  •         if (len === this.options.data.length) {  
  •             return;  
  •         }  
  •   
  •         this.initSearch();  
  •         this.initPagination();  
  •         this.initBody(true);  
  •     };  
  •   
  •     // 更新替换某一行数据，参数格式为{id:row[options.uniqueId],row:row替换数据}  
  •     BootstrapTable.prototype.updateByUniqueId = function (params) {  
  •         var rowId;  
  •   
  •         if (!params.hasOwnProperty('id') || !params.hasOwnProperty('row')) {  
  •             return;  
  •         }  
  •   
  •         rowId = $.inArray(this.getRowByUniqueId(params.id), this.options.data);  
  •   
  •         if (rowId === -1) {  
  •             return;  
  •         }  
  •   
  •         $.extend(this.data[rowId], params.row);  
  •         this.initSort();  
  •         this.initBody(true);  
  •     };  
  •   
  •     // 在某一行后插入数据，参数格式为{index:index行号,row:row插入数据内容}  
  •     BootstrapTable.prototype.insertRow = function (params) {  
  •         if (!params.hasOwnProperty('index') || !params.hasOwnProperty('row')) {  
  •             return;  
  •         }  
  •         this.data.splice(params.index, 0, params.row);  
  •         this.initSearch();  
  •         this.initPagination();  
  •         this.initSort();  
  •         this.initBody(true);  
  •     };  
  •   
  •     // 更新替换某一行数据，参数格式为{index:index行号,row:row替换数据}  
  •     BootstrapTable.prototype.updateRow = function (params) {  
  •         if (!params.hasOwnProperty('index') || !params.hasOwnProperty('row')) {  
  •             return;  
  •         }  
  •         $.extend(this.data[params.index], params.row);  
  •         this.initSort();  
  •         this.initBody(true);  
  •     };  
  •   
  •     // 根据{[index:index],[uniqueid:uniqueId]}找到某一行，显示  
  •     BootstrapTable.prototype.showRow = function (params) {  
  •         if (!params.hasOwnProperty('index') && !params.hasOwnProperty('uniqueId')) {  
  •             return;  
  •         }  
  •         this.toggleRow(params.index, params.uniqueId, true);  
  •     };  
  •   
  •     // 根据{[index:index],[uniqueid:uniqueId]}找到某一行，隐藏  
  •     BootstrapTable.prototype.hideRow = function (params) {  
  •         if (!params.hasOwnProperty('index') && !params.hasOwnProperty('uniqueId')) {  
  •             return;  
  •         }  
  •         this.toggleRow(params.index, params.uniqueId, false);  
  •     };  
  •   
  •     // 获取并返回隐藏的行，根据show将这些行数据显示出来  
  •     BootstrapTable.prototype.getRowsHidden = function (show) {  
  •         var rows = $(this.$body[0]).children().filter(':hidden'),  
  •             i = 0;  
  •         if (show) {  
  •             for (; i < rows.length; i++) {  
  •                 $(rows[i]).show();  
  •             }  
  •         }  
  •         return rows;  
  •     };  
  •   
  •     // 合并单元格，传参为{index:index.field:field,rowspan:3,colspan:4}  
  •     // 隐藏被合并单元格，重新设置显示单元格rowspan、colspan属性  
  •     BootstrapTable.prototype.mergeCells = function (options) {  
  •         var row = options.index,  
  •             col = $.inArray(options.field, this.getVisibleFields()),  
  •             rowspan = options.rowspan || 1,  
  •             colspan = options.colspan || 1,  
  •             i, j,  
  •             $tr = this.$body.find('>tr'),  
  •             $td;  
  •   
  •         if (this.options.detailView && !this.options.cardView) {  
  •             col += 1;  
  •         }  
  •   
  •         $td = $tr.eq(row).find('>td').eq(col);  
  •   
  •         if (row < 0 || col < 0 || row >= this.data.length) {  
  •             return;  
  •         }  
  •   
  •         for (i = row; i < row + rowspan; i++) {  
  •             for (j = col; j < col + colspan; j++) {  
  •                 $tr.eq(i).find('>td').eq(j).hide();  
  •             }  
  •         }  
  •   
  •         $td.attr('rowspan', rowspan).attr('colspan', colspan).show();  
  •     };  
  •   
  •     // 更新单元的显示文本，传参为{index:index,field:field,value:value}，根据index、field找到单元格  
  •     BootstrapTable.prototype.updateCell = function (params) {  
  •         if (!params.hasOwnProperty('index') ||  
  •             !params.hasOwnProperty('field') ||  
  •             !params.hasOwnProperty('value')) {  
  •             return;  
  •         }  
  •         this.data[params.index][params.field] = params.value;  
  •   
  •         if (params.reinit === false) {  
  •             return;  
  •         }  
  •         this.initSort();  
  •         this.initBody(true);  
  •     };  
  •   
  •     // 返回配置项  
  •     BootstrapTable.prototype.getOptions = function () {  
  •         return this.options;  
  •     };  
  •   
  •     // 通过过滤后的数据this.data返回选中行的数据  
  •     BootstrapTable.prototype.getSelections = function () {  
  •         var that = this;  
  •   
  •         return $.grep(this.data, function (row) {  
  •             return row[that.header.stateField];  
  •         });  
  •     };  
  •   
  •     // 通过未过滤的数据this.options.data返回选中行的数据  
  •     BootstrapTable.prototype.getAllSelections = function () {  
  •         var that = this;  
  •   
  •         return $.grep(this.options.data, function (row) {  
  •             return row[that.header.stateField];  
  •         });  
  •     };  
  •   
  •     // 执行全选  
  •     BootstrapTable.prototype.checkAll = function () {  
  •         this.checkAll_(true);  
  •     };  
  •   
  •     // 执行全不选  
  •     BootstrapTable.prototype.uncheckAll = function () {  
  •         this.checkAll_(false);  
  •     };  
  •   
  •     // 反选，调用updateRows执行initSort、initBody，调用updateSelect为行元素tr添加selected类  
  •     BootstrapTable.prototype.checkInvert = function () {  
  •         var that = this;  
  •         var rows = that.$selectItem.filter(':enabled');  
  •         var checked = rows.filter(':checked');  
  •         rows.each(function() {  
  •             $(this).prop('checked', !$(this).prop('checked'));  
  •         });  
  •         that.updateRows();  
  •         that.updateSelected();  
  •         that.trigger('uncheck-some', checked);  
  •         checked = that.getSelections();  
  •         that.trigger('check-some', checked);  
  •     };  
  •   
  •     // 全选或全不选执行函数，为什么这时又不像所在的行添加selected类？？？  
  •     BootstrapTable.prototype.checkAll_ = function (checked) {  
  •         var rows;  
  •         if (!checked) {  
  •             rows = this.getSelections();  
  •         }  
  •         this.$selectAll.add(this.$selectAll_).prop('checked', checked);//全选按钮  
  •         this.$selectItem.filter(':enabled').prop('checked', checked);  
  •         this.updateRows();  
  •         if (checked) {  
  •             rows = this.getSelections();  
  •         }  
  •         this.trigger(checked ? 'check-all' : 'uncheck-all', rows);  
  •     };  
  •   
  •     // 选中  
  •     BootstrapTable.prototype.check = function (index) {  
  •         this.check_(true, index);  
  •     };  
  •   
  •     // 取消选中  
  •     BootstrapTable.prototype.uncheck = function (index) {  
  •         this.check_(false, index);  
  •     };  
  •   
  •     // 选中、取消选中执行函数  
  •     BootstrapTable.prototype.check_ = function (checked, index) {  
  •         var $el = this.$selectItem.filter(sprintf('[data-index="%s"]', index)).prop('checked', checked);  
  •         this.data[index][this.header.stateField] = checked;  
  •         this.updateSelected();  
  •         this.trigger(checked ? 'check' : 'uncheck', this.data[index], $el);  
  •     };  
  •   
  •     // 选中某几行数据  
  •     BootstrapTable.prototype.checkBy = function (obj) {  
  •         this.checkBy_(true, obj);  
  •     };  
  •   
  •     // 取消选中某几行数据  
  •     BootstrapTable.prototype.uncheckBy = function (obj) {  
  •         this.checkBy_(false, obj);  
  •     };  
  •   
  •     // 根据条件选中、取消选中某几行数据执行函数，obj参数格式为{field:paramName,values:paramValues}  
  •     BootstrapTable.prototype.checkBy_ = function (checked, obj) {  
  •         if (!obj.hasOwnProperty('field') || !obj.hasOwnProperty('values')) {  
  •             return;  
  •         }  
  •   
  •         var that = this,  
  •             rows = [];  
  •         $.each(this.options.data, function (index, row) {  
  •             if (!row.hasOwnProperty(obj.field)) {  
  •                 return false;  
  •             }  
  •             if ($.inArray(row[obj.field], obj.values) !== -1) {  
  •                 var $el = that.$selectItem.filter(':enabled')  
  •                     .filter(sprintf('[data-index="%s"]', index)).prop('checked', checked);  
  •                 row[that.header.stateField] = checked;  
  •                 rows.push(row);  
  •                 that.trigger(checked ? 'check' : 'uncheck', row, $el);  
  •             }  
  •         });  
  •         this.updateSelected();  
  •         this.trigger(checked ? 'check-some' : 'uncheck-some', rows);  
  •     };  
  •   
  •     // 移出触发元素，其内容、样式通过this.$el_改为初始值，移除构造函数添加最外层包裹元素this.$container  
  •     BootstrapTable.prototype.destroy = function () {  
  •         this.$el.insertBefore(this.$container);  
  •         $(this.options.toolbar).insertBefore(this.$el);  
  •         this.$container.next().remove();  
  •         this.$container.remove();  
  •         this.$el.html(this.$el_.html())  
  •             .css('margin-top', '0')  
  •             .attr('class', this.$el_.attr('class') || ''); // reset the class  
  •     };  
  •   
  •     // 显示后台数据载入文案  
  •     BootstrapTable.prototype.showLoading = function () {  
  •         this.$tableLoading.show();  
  •     };  
  •   
  •     // 隐藏后台数据载入文案  
  •     BootstrapTable.prototype.hideLoading = function () {  
  •         this.$tableLoading.hide();  
  •     };  
  •   
  •     // 分页切换按钮显示隐藏分页内容  
  •     BootstrapTable.prototype.togglePagination = function () {  
  •         this.options.pagination = !this.options.pagination;  
  •         var button = this.$toolbar.find('button[name="paginationSwitch"] i');  
  •         if (this.options.pagination) {  
  •             button.attr("class", this.options.iconsPrefix + " " + this.options.icons.paginationSwitchDown);  
  •         } else {  
  •             button.attr("class", this.options.iconsPrefix + " " + this.options.icons.paginationSwitchUp);  
  •         }  
  •         this.updatePagination();  
  •     };  
  •   
  •     // 刷新页面到第一页，传入参数为{url:url,slient:slient,query:query}  
  •     BootstrapTable.prototype.refresh = function (params) {  
  •         if (params && params.url) {  
  •             this.options.url = params.url;  
  •             this.options.pageNumber = 1;  
  •         }  
  •         this.initServer(params && params.silent, params && params.query);  
  •     };  
  •   
  •     // 调用fitHeader、fitFooter函数调整表头、表尾的宽度  
  •     BootstrapTable.prototype.resetWidth = function () {  
  •         if (this.options.showHeader && this.options.height) {  
  •             this.fitHeader();  
  •         }  
  •         if (this.options.showFooter) {  
  •             this.fitFooter();  
  •         }  
  •     };  
  •   
  •     // 根据field属性获得fieldIndex，再调用toggleColumn显示某列  
  •     BootstrapTable.prototype.showColumn = function (field) {  
  •         this.toggleColumn(getFieldIndex(this.columns, field), true, true);  
  •     };  
  •   
  •     // 根据field属性获得fieldIndex，再调用toggleColumn隐藏某列  
  •     BootstrapTable.prototype.hideColumn = function (field) {  
  •         this.toggleColumn(getFieldIndex(this.columns, field), false, true);  
  •     };  
  •   
  •     // 获得隐藏的某几列  
  •     BootstrapTable.prototype.getHiddenColumns = function () {  
  •         return $.grep(this.columns, function (column) {  
  •             return !column.visible;  
  •         });  
  •     };  
  •   
  •     // 设置过滤数组this.filterColumns;  
  •     // options.data和this.filterColumns相符则在this.data中保留，不相符则在this.data中删除;  
  •     // 设置页码为1，重新调用initSearch、updatePagination渲染表格;  
  •     BootstrapTable.prototype.filterBy = function (columns) {  
  •         this.filterColumns = $.isEmptyObject(columns) ? {} : columns;  
  •         this.options.pageNumber = 1;  
  •         this.initSearch();  
  •         this.updatePagination();  
  •     };  
  •   
  •     // 设置this.$tableBody滚动条的垂直偏移，意义是移动到第几行数据  
  •     BootstrapTable.prototype.scrollTo = function (value) {  
  •         if (typeof value === 'string') {  
  •             value = value === 'bottom' ? this.$tableBody[0].scrollHeight : 0;  
  •         }  
  •         if (typeof value === 'number') {  
  •             this.$tableBody.scrollTop(value);  
  •         }  
  •         if (typeof value === 'undefined') {  
  •             return this.$tableBody.scrollTop();// 返回顶部  
  •         }  
  •     };  
  •   
  •     // 表体滚动到顶部  
  •     BootstrapTable.prototype.getScrollPosition = function () {  
  •         return this.scrollTo();  
  •     };  
  •   
  •     // 设置this.options.pageNumber当前页，调用updatePagination更新表体，initBody或initServer方法  
  •     BootstrapTable.prototype.selectPage = function (page) {  
  •         if (page > 0 && page <= this.options.totalPages) {  
  •             this.options.pageNumber = page;  
  •             this.updatePagination();  
  •         }  
  •     };  
  •   
  •     // 前一页  
  •     BootstrapTable.prototype.prevPage = function () {  
  •         if (this.options.pageNumber > 1) {  
  •             this.options.pageNumber--;  
  •             this.updatePagination();  
  •         }  
  •     };  
  •   
  •     // 后一页  
  •     BootstrapTable.prototype.nextPage = function () {  
  •         if (this.options.pageNumber < this.options.totalPages) {  
  •             this.options.pageNumber++;  
  •             this.updatePagination();  
  •         }  
  •     };  
  •   
  •     // 切换卡片式显示或者表格详情显示  
  •     BootstrapTable.prototype.toggleView = function () {  
  •         this.options.cardView = !this.options.cardView;  
  •         this.initHeader();  
  •         // Fixed remove toolbar when click cardView button.  
  •         //that.initToolbar();  
  •         this.initBody();  
  •         this.trigger('toggle', this.options.cardView);  
  •     };  
  •   
  •     // 更新传入的配置项options，调用destory重置，init重新渲染页面  
  •     BootstrapTable.prototype.refreshOptions = function (options) {  
  •         //If the objects are equivalent then avoid the call of destroy / init methods  
  •         // 当this.options和options长度相当，其中一个属性不同的时候，也会被if语句提前返回？？？  
  •         if (compareObjects(this.options, options, true)) {  
  •             return;  
  •         }  
  •         this.options = $.extend(this.options, options);  
  •         this.trigger('refresh-options', this.options);  
  •         this.destroy();  
  •         this.init();  
  •     };  
  •   
  •     // 设置搜索框文本，启动数据搜索  
  •     BootstrapTable.prototype.resetSearch = function (text) {  
  •         var $search = this.$toolbar.find('.search input');  
  •         $search.val(text || '');  
  •         this.onSearch({currentTarget: $search});  
  •     };  
  •   
  •     // 表格详情显示时，折叠展开按钮执行函数  
  •     BootstrapTable.prototype.expandRow_ = function (expand, index) {  
  •         var $tr = this.$body.find(sprintf('> tr[data-index="%s"]', index));  
  •         if ($tr.next().is('tr.detail-view') === (expand ? false : true)) {  
  •             $tr.find('> td > .detail-icon').click();  
  •         }  
  •     };  
  •   
  •     // 展开对应行的卡片详情  
  •     BootstrapTable.prototype.expandRow = function (index) {  
  •         this.expandRow_(true, index);  
  •     };  
  •   
  •     // 折叠对应行的卡片详情  
  •     BootstrapTable.prototype.collapseRow = function (index) {  
  •         this.expandRow_(false, index);  
  •     };  
  •   
  •     // expandAllRows展开所有卡片式详情，在表格显示的时候  
  •     // isSubTable为真，展开父子表格的详情  
  •     BootstrapTable.prototype.expandAllRows = function (isSubTable) {  
  •         if (isSubTable) {  
  •             var $tr = this.$body.find(sprintf('> tr[data-index="%s"]', 0)),  
  •                 that = this,  
  •                 detailIcon = null,  
  •                 executeInterval = false,  
  •                 idInterval = -1;  
  •   
  •             if (!$tr.next().is('tr.detail-view')) {  
  •                 $tr.find('> td > .detail-icon').click();  
  •                 executeInterval = true;  
  •             } else if (!$tr.next().next().is('tr.detail-view')) {  
  •                 $tr.next().find(".detail-icon").click();  
  •                 executeInterval = true;  
  •             }  
  •   
  •             if (executeInterval) {  
  •                 try {  
  •                     idInterval = setInterval(function () {  
  •                         // 父子表格情况，从.detail-view中找到.detail-icon并点击  
  •                         detailIcon = that.$body.find("tr.detail-view").last().find(".detail-icon");  
  •                         if (detailIcon.length > 0) {  
  •                             detailIcon.click();  
  •                         } else {  
  •                             clearInterval(idInterval);  
  •                         }  
  •                     }, 1);  
  •                 } catch (ex) {  
  •                     clearInterval(idInterval);  
  •                 }  
  •             }  
  •         } else {  
  •             var trs = this.$body.children();  
  •             for (var i = 0; i < trs.length; i++) {  
  •                 this.expandRow_(true, $(trs[i]).data("index"));  
  •             }  
  •         }  
  •     };  

    • 你可能感兴趣的:(python&nodejs)

    • Enum 枚举 120153216 enum枚举
      原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
    • Java8简明教程 bijian1013 javajdk1.8
              Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
    • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
      我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
    • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
            “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
    • Xshell实现Windows上传文件到Linux主机 被触发 windows
      经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
    • 类的加载ClassLoader 肆无忌惮_ ClassLoader
      类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
    • html5写的玫瑰花 知了ing html5
      <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
    • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
      原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
    • webservice获取访问服务的ip地址 alleni123 webservice
      1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
    • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
      1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
    • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
      Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
    • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
      Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
    • [Velocity二]自定义Velocity指令 bit1129 velocity
      什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
    • 【Hive十】Programming Hive学习笔记 bit1129 programming
      第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
    • nginx有选择性进行限制 ronin47 nginx 动静　限制
      http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
    • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
      /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
    • Netty学习笔记 bylijinnan javanetty
      本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
    • js获取项目路径 cngolon js
      //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
    • oracle 的性能优化 cuishikuan oracleSQL Server
         在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
    • Shell变量和数组使用详解 daizj linuxshell变量数组
      Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
    • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
      KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
    • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
      1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
    • solrcloud 部署方式比较 eksliang solrCloud
      solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
    • Java synchronized关键字详解 gqdy365 synchronized
      转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
    • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
      在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
    • 开发者必备的 Chrome 扩展 justjavac chrome
      Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
    • 算法机试题 李亚飞 java算法机试题
             在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
    • 正确配置Linux系统ulimit值 字符串 ulimit
      在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
    • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
      注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
    • Spring 4.2新特性-更简单的Application Event wiselyman application
      1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他