jquery源码解析

(function(a,b){})()

JQuery源码的开头

(function(a,b){

})(window)

通常(function(){})()用来封装一些私有成员或者公共成员的导出。

  1. 定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。确保jQuery创建的变量不会与其他程序的变量发生冲突。
  2. 传入window变量,使得window由全局变量变为局部变量,当在jQuery块中使用window时,能更快的访问到。同时压缩代码,进行优化,window优化成a。由于只传入一个参数,所以b为undefined,也有利于代码压缩优化。

jQuery则以DOM为核心

匿名函数

js中函数就是一个Function对象,匿名函数指没有函数名的函数,即:

function(x,y){
    return x+y;
}

这样就存在一个匿名函数的引用问题,通过一下方法引用:
方法一:

var abc = function(x,y){return x+y};
abc(1,2); //3

方法二:

(function(x,y){
    return x+y;
})(1,2); //3

方法一是我们常用的方法,方法二中,小括号的作用是把代码分块,而且每一块会有一个返回值,值既是小括号中表达式的返回值,即如同函数名作用一般取得引用位置,再后面加上()参数列表,实现普通函数的调用。
()运算符将一个表达式包裹起来作为一个整体进行运算,然后返回这个整体的值。
那么上面的(function(){})()中左侧定义function的()也是这个作用,将这个function给包裹起来,然后返回这个function。我们调用方法一般是a();那么(function(){})的作用就是返回这个function对象,然后(function(){})()右侧的()表示调用这个function

var abc = function(x,y){return x+y};

中abc的constructor与匿名函数的constructor一样,即,两者的实现一样。

jQuery中如何实现$引用

JS中window对象是全局变量,所有浏览器都支持window对象。它表示浏览器窗口。

window.jQuery = window.$ = jQuery;

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

Sizzle引擎

jQuery以DOM为核心,jQuery内部使用Sizzle引擎,处理各种选择器,对DOM进行操作。

闭包

简单来说是指允许程序中调用函数中的局部变量。

class

简单来说可以把jQuery看成一个类,在原型上绑定方法就相当于成员方法,在jQuery上绑定方法,相当于类的静态方法。

jQuery.A = function (){}
jQuery.prototype.B = function(){}

相当于:

class jQuery(){
    public static A(){};
    public B(){};
}

$.extend、$.fn.extend

jQuery为开发插件提供了两个方法

//添加类方法,为扩展jQuery类本身,为自身添加新的方法。
jQuery.extend();
jQuery.fn.extend();//添加成员函数,给jQuery对象添加方法

//即指向jQuery对象的原型链,对其它进行的扩展,作用在jQuery对象上面
jQuery.fn=jQuery.prototype={
    //...
}

enter description here

别名

var $j=JQuery.noConflict(); 
$j('#msg').hide();//此处$j就代表JQuery 

jQuery效率

  1. ID选择器的效率最高,直接使用了浏览器的内置函数document.getElementById(),效率很高。
  2. 少直接用class选择器
    class选择器是效率最慢的
  3. 多用父子关系,少用嵌套关系。
  4. 缓存jQuery对象
  5. 每一个$()的调用都会导致一次新的查找,所以,采用链式调用和设置变量缓存结果集,减少查找,提升性能。

tomcat关于跨域问题

## tomcat解决跨域问题
web.xml中添加如下配置即可

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

css3 filter滤镜属性

网页变灰原理

使用css3的灰度过滤功能

.icon_f{
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);    
      filter: grayscale(100%);
      filter: gray;
  }

模糊图片

img{
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

图片变亮

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}

对比度调整

img {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

添加阴影效果

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

除此之外

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}
//给图像应用色相旋转
.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}
//反转输入图像。
.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
//转化图像的透明程度。
.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}
//转换图像饱和度
.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}
//将图像转换为深褐色。
.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

js实现回到顶部功能及页面定位

回到顶部

$(function(){
    $("#toTop").css("display","none");

    $(window).scroll(function() {
        var client_height = $(window).height();
        //实现兼容性
        var scroll_height = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
        if(scroll_height > client_height) {
            $("#toTop").css("display","block");
        } else {
            $("#toTop").css("display","none");
        }
    });

    $("#toTop").click(function(){
        $(document.documentElement).animate({
            scrollTop: 0
        },200);
        $(document.body).animate({
            scrollTop: 0
        },200);
    });

    //正则验证,浏览器总是否含有iphone|ipod|Android|SymbianOS|Windows Phone字样,来判断浏览器类型
    if (/iphone|ipod|Android|SymbianOS|Windows Phone/i.test(navigator.userAgent)) {
        location.href = '/jdwsjb/sy_phoneweb/ipadpdxxy/index.shtml';
     }
});  
<a id="toTop">回到顶部</a>

$(window):jQuery中获取浏览器当前窗口。

$(window).resize(function(){
});

$(document) :jQuery中获取当前文档,就是我们所看到的整个网页

$(document).ready(function(){
});

浏览器类型判断

navigator.userAgent
正则验证,浏览器总是否含有iphone|ipod|Android|SymbianOS|Windows Phone字样,来判断浏览器类型

if (/iphone|ipod|Android|SymbianOS|Windows Phone/i.test(navigator.userAgent)) {
    location.href = '/jdwsjb/sy_phoneweb/ipadpdxxy/index.shtml';
 }

 function userBrowser(){
    var browserName=navigator.userAgent.toLowerCase();
    if(/msie/i.test(browserName) && !/opera/.test(browserName)){
        alert("IE");
        return ;
    }else if(/firefox/i.test(browserName)){
        alert("Firefox");
        return ;
    }else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
        alert("Chrome");
        return ;
    }else if(/opera/i.test(browserName)){
        alert("Opera");
        return ;
    }else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
        alert("Safari");
        return ;
    }else{
        alert("unKnow");
    }
}

滚动条纵坐标

html5中获取当前页面的滚动条纵坐标位置:document.documentElement.scrollTop
在w3c标准下document.body.scrollTop恒为0,且IE5.5之后不再支持document.body.scrollX属性了。所以需要加上以下判断

if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
   top  = document.body.scrollTop;
   left = document.body.scrollleft; 
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
   top  =  document.documentElement.scrollTop;
   left =  document.documentElement.scrollLeft; 
}

元素在页面中的绝对定位

enter description here
enter description here

js的原型及继承实现

[TOC]

prototype继承

所有通过new Object()创建的对象都其对应的原型对象,且通过Object.prototype获得对原型对象的引用。所以,通过new和构造函数调用创建对象的原型即构造函数的prototype的值。

  • Object.prototype没有原型
  • 所有的内置构造函数都有一个继承自Object.prototype的原型
  • 原型对象是类的唯一标识
  • 每个JS函数都自动拥有一个prototype属性,属性的值是一个对象。对象包含一个constructor属性,此属性值是一个对象如下图:
function People(props){
    this.name = props.name || 'unnamed';
}

People.prototype.hello = function(){
    alert('hello,'+this.name);
}

enter description here

constructor

var p = new F();
p === F.prototype;  //true
var c = p.constructor;
c === F;  // true

由上可以看出,

var o = new F();
o.constructor === F; //true,constructor属性指代这个类

A的实例继承自A.prototype,B的实例继承自B.prototype。所以B继承A,即B继承A.prototype。

var object = new Object();
object == Object.prototype

Object.prototype即是一个新的对象
(一般情况下Object泛指一个JS对象,而非真正的Object对象)

原型链

var date = new Date(); date对象同时继承Date.prototype和Object.prototype,这一系列链接的原型对象就是原型链。

继承

类型检测

  1. instanceof
    1
    a instanceof A //如果a继承自A,则返回true

可以不是直接继承

  1. constructor属性检测
function typeValue(x){
    if(x==null) return ;
    switch(x.constructor){
    case Number: return "Number"+x;
    case String: return "String"+x;
    case Date: return "Date"+x;
    ...

    }
}

JS继承的实现,通过中间函数F()

function inherits(child,parent){
    var F = function(){};
    F.prototype = parent.prototype;
    child.prototype = F;
    //修复构造函数,否则会调用F的constructor
    child.prototype.constructor = child;
}

function People(props){
    this.name = props.name || 'unnamed';
}

People.prototype.hello = function(){
    alert('hello,'+this.name);
}

function Student(props){
    People.call(this,props);
    this.age = props.age||1;
}
inherits(Student,People);
var cc = new Student();

原型链的继承顺序是:

cc--->Student.prototype--->People.prototype--->Object.prototype

原型链对了,继承顺序就对了。

apply(),call()继承

call和apply是为了动态改变this而出现的。
第一个函数是调用函数的母对象。它是调用上下文,函数体内通过this来获得对它的引用。可以改变this的指示方向。
比如,以对象o的方法的形式调用函数f(),并传入两个实参,如下:

f.call(o,1,2);
f.apply(o,[1,2]);  

apply与call的区别仅在于,apply的第二个参数可以是数组形式,而且不必一一指出参数。如下:
三种不同的函数调用方法:

obj.myFunc();
myFunc.call(obj,arg);
myFunc.apply(obj,[arg1,arg2..]);

apply()

apply是函数对象的一个方法,作用是改变函数的调用对象,它的第一个参数就是改变后调用这个函数的对象,this就指的是这个对象。如果参数为空,默认调用全局对象

Function.apply(obj,args);  //方法能接收两个参数

obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args–>arguments)
如下例子所示:

function Person(name,age){
    this.name = name;
    this.age = age;
    this.hello = function(){
        console.log("hello!"+this.name);
    }
}

function Student(name, age, school){
    this.name = name;
    this.age = age;
    this.school = school;
}
 var p = new Person("person",100);
 var s = new Student("cc",25,"85");
 p.hello.apply(s);//hello!cc
 p.hello.call(s); //hello!cc

student对象没有hello方法,如果想用就可以通过apply来调用。

js Date格式化

Date.prototype.Format = function(fmt) { // author: meizz
var o = {
    "M+" : this.getMonth() + 1, // 月份
    "d+" : this.getDate(), // 日
    "h+" : this.getHours(), // 小时
    "m+" : this.getMinutes(), // 分
    "s+" : this.getSeconds(), // 秒
    "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
    "S" : this.getMilliseconds()
// 毫秒
};
if (/(y+)/.test(fmt))
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
            .substr(4 - RegExp.$1.length));
for ( var k in o)
    if (new RegExp("(" + k + ")").test(fmt))
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
var time1 = new Date().format("yyyy-MM-dd HH:mm:ss");   

var time2 = new Date().format("yyyy-MM-dd");  

js时间可以直接比较大小

深入了解HTML之meta

[TOC]

<!DOCTYPE>文档类型声明

<!DOCTYPE html>指示文档类型为html5类型,属于html标签。它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。对大小写不敏感。
HTML 元素和有效的 DTD查看标签的适用类型

定义关于 HTML 文档的元信息。标签属性是key-value对,key指http-equiv/name属性,value指content属性

//页面重定向
<meta http-equiv="Refresh" content="5;url=XX" />
<meta name="referrer" content="origin" />

referer是由客户端的浏览器发送到服务器上,且在客户端可以通过document.referrer来获取上层页面,也就是说referer的发送实际上是一个浏览器行为,发送与否的决定权是在浏览器手里。
origin 是包含了schema和hostname的部分url不包含path等后面的其他url部分
项目中在login.html页面里设置这个,登录成功后的index.jsp页面中通过document.referrer无法获取到上层页面。
enter description here

移动网站

一个简单的移动网站meta标签可以设置为如下:表示强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览

<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport"/>

IE 兼容性

X-UA-Compatible是IE8特有的,它告诉IE8采用何种IE版本去渲染页面,对于ie8之外的浏览器是不识别的。

//采用IE5
<meta http-equiv="X-UA-Compatible" content="IE=5" />

为了避免制作出的页面在IE8下面出现错误,建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码:

//采用IE7
<meta http-equiv="X-UA-Compatible" content="IE=7" />
//仿真IE7
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

浏览器在https页面点击http连接的时候,不会在header加上referer。

org.springframework.beans.factory.BeanDefinitionStoreException

org.springframework.beans.factory.BeanDefinitionStoreException

[ERROR] [10:30:28] org.springframework.web.context.ContextLoader - Context initialization failed
org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML document from class path resource [applicationContext.xml]; nested exception is java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be opened because it does not exist
at org.springframework.beans.factory.xml.XmlBeanDefinitionReader.loadBeanDefinitions(XmlBeanDefinitionReader.java:341)
at org.springframework.beans.factory.xml.XmlBeanDefinitionReader.loadBeanDefinitions(XmlBeanDefinitionReader.java:302)
at org.springframework.beans.factory.support.AbstractBeanDefinitionReader.loadBeanDefinitions(AbstractBeanDefinitionReader.java:174)
at org.springframework.beans.factory.support.AbstractBeanDefinitionReader.loadBeanDefinitions(AbstractBeanDefinitionReader.java:209)
at org.springframework.beans.factory.support.AbstractBeanDefinitionReader.loadBeanDefinitions(AbstractBeanDefinitionReader.java:180)
at org.springframework.web.context.support.XmlWebApplicationContext.loadBeanDefinitions(XmlWebApplicationContext.java:125)
at org.springframework.web.context.support.XmlWebApplicationContext.loadBeanDefinitions(XmlWebApplicationContext.java:94)
at org.springframework.context.support.AbstractRefreshableApplicationContext.__refreshBeanFactory(AbstractRefreshableApplicationContext.java:131)
at org.springframework.context.support.AbstractRefreshableApplicationContext.refreshBeanFactory(AbstractRefreshableApplicationContext.java)
at org.springframework.context.support.AbstractApplicationContext.obtainFreshBeanFactory(AbstractApplicationContext.java:522)
at org.springframework.context.support.AbstractApplicationContext.__refresh(AbstractApplicationContext.java:436)
at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java)
at org.springframework.web.context.ContextLoader.configureAndRefreshWebApplicationContext(ContextLoader.java:385)
at org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader.java:284)
at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:111)
at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:5017)
at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5531)
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1574)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1564)
at java.util.concurrent.FutureTask.run(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
at java.lang.Thread.run(Unknown Source)
Caused by: java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be opened because it does not exist
at org.springframework.core.io.ClassPathResource.getInputStream(ClassPathResource.java:158)
at org.springframework.beans.factory.xml.XmlBeanDefinitionReader.loadBeanDefinitions(XmlBeanDefinitionReader.java:328)
... 23 more

applicationContext.xml文件无法找到,在web.xml中配置

<context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml</param-value>
</context-param>    

再查看一下,tomcat发布后的classes下有没有这个文件。
eclipse发布后的工程默认不在tomcat的webapps中,需要手动设置。
enter description here
将Deploy path修改为webapps(最好是使用完整的目录,如:D:\apache-tomcat-7.0.63\webapps),默认是wtpwebapps。
若server Location无法点击选择,则右击add and remove…把项目移除,在右击clean即可。

hibernate时间段查询

java

@RequestMapping(value = "/searchDate", method = RequestMethod.POST)
@ResponseBody
public List<Uploadinfo> searchDate(@RequestParam("start") String start,@RequestParam("end") String end) {

    List<Uploadinfo> itemList = itemServiceImpl.dateRange(start,end);
    return itemList;
}
//使用HQL语句查询,预设字段
public List<Uploadinfo> dateRange(String start, String end) {
    // TODO Auto-generated method stub

    Date beginDate = java.sql.Date.valueOf(start);
    Date endDate = java.sql.Date.valueOf(end);
    String hql = "from Uploadinfo info where info.dataTime <:endDate and info.dataTime >=:beginDate";  
    Query query = itemDaoImpl.getQuery(hql);
    query.setDate("beginDate",beginDate);   
    query.setDate("endDate",endDate);
    List<Uploadinfo> infolist = query.list();
    return infolist;
}

重点在hql语句对时间的查询,由于数据库定义的是date类型,则需要将字符串类型转化为date类型
:参数名根据参数名称来设置参数
?根据参数位置来设置参数

String hql = "from Uploadinfo info where info.dataTime <? and info.dataTime >=?";
Query query= session.createQuery(hql);
query.setString(0,"20160606");
query.setString(1,"20160706");
List user = query.list();

js

前台使用datarangepicker插件

function dateInit(){
    $('#dateRange').daterangepicker({
        "ranges": {
            "Today": [
                "2016-05-04T05:40:05.879Z",
                "2016-05-04T05:40:05.879Z"
            ],
            "Yesterday": [
                "2016-05-03T05:40:05.879Z",
                "2016-05-03T05:40:05.879Z"
            ],
            "Last 7 Days": [
                "2016-04-28T05:40:05.879Z",
                "2016-05-04T05:40:05.879Z"
            ],
            "Last 30 Days": [
                "2016-04-05T05:40:05.879Z",
                "2016-05-04T05:40:05.879Z"
            ],
            "This Month": [
                "2016-04-30T16:00:00.000Z",
                "2016-05-31T15:59:59.999Z"
            ],
            "Last Month": [
                "2016-03-31T16:00:00.000Z",
                "2016-04-30T15:59:59.999Z"
            ]
        },
        "locale": {
            "format": "YYYY-MM-DD",
            "separator": "   ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "daysOfWeek": [
                "日",
                "一",
                "二",
                "三",
                "四",
                "五",
                "六"
            ],
            "monthNames": [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月"
            ],
            "firstDay": 1
        },
        "alwaysShowCalendars": true,
        "startDate": "2016-05-04",
        "endDate": "2016-06-03"
    }, function(start, end, label) {
        searchDate(start.format('YYYY-MM-DD'),end.format('YYYY-MM-DD'));
    });
}

function searchDate(start,end){
    $.ajax({
        url : "rest/Uploadinfo/searchDate",
        type : "post",
        dataType : 'json',
        data:{
            "start":start,
            "end":end
        },
        success : function(data) {
            tableShow(data);
        }
    });
}

bootstrap table教程

[TOC]

table参数(Table options)

The table options are defined in jQuery.fn.bootstrapTable.defaults.

按照某列排序:

data-sort-name="dataTime" data-sort-order="desc"

查看细节,效果如下图所示

data-detail-view="true" data-detail-formatter="detailFommater"

function detailFommater(index, row, element) {
    return 'ccc'+row;
}

enter description here

table手动启动

如果bootstrapTable没有启用,选择手动触发。

$('#table').bootstrapTable();

pageNum初始化

data-page-list="[10, 25, 50, 100, 'ALL']"

分页初始值

data-page-size=15

表格添加序号

function runningFormatter(value, row, index) {
    return index + 1;
}

<th data-align="center" data-valign="middle" data-sortable="true" data-formatter="runningFormatter" >序号</th>

高度自适应

$(function(){
    $table = $('#table');
    $table.bootstrapTable('resetView', {
        height: getHeight()
    });
})
function getHeight() {
    return $(window).height() - $('h1').outerHeight(true);
}

或者

$(window).resize(function() {
    $('#table').bootstrapTable('resetView');
});

table的高度可以自己设定

data-height="300px"

table的分页方式

js中

$('#table').bootstrapTable({
 sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
 });

html中 data-side-pagination = “server”

<table id="table"
           data-toggle="table"
           data-url="/examples/bootstrap_table/data"
           data-height="400"
           data-side-pagination="server"
           data-pagination="true"
           data-page-list="[5, 10, 20, 50, 100, 200]"
           data-search="true">
        <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>

手动加载table data

$('#table').bootstrapTable({
    data : result
});

table data from url

html代码

<table data-toggle="table" data-url="rest/Uploadinfo/queryAll" data-show-refresh="true">

或者在JS中用URL地址获取数据,与data-url的作用相同:
方法一

$('#table').bootstrapTable({url:"rest/Uploadinfo/queryAll"});

方法二

$.get("rest/Uploadinfo/queryAll",function(result){
    $('#table').bootstrapTable({
        data : result
    });
})

后台java代码:

@RequestMapping(value = "/queryAll", method = RequestMethod.GET)
@ResponseBody
    public JSONArray queryAll() {
        List<Uploadinfo> itemList = itemServiceImpl.queryAll();
        JSONArray jsonArr = new JSONArray();
        for(int i=0;i<itemList.size();i++){
        JSONObject obj  = new JSONObject();
        obj.put("id", itemList.get(i).getId());
        obj.put("content", itemList.get(i).getContent());
        obj.put("telephone", itemList.get(i).getTelephone());
        obj.put("picturepath1", itemList.get(i).getPicturepath1());
        String date = Common.dateFormatStr(itemList.get(i).getDataTime()); 

        obj.put("dataTime", date);
        obj.put("cname", itemList.get(i).getClassfic().getCname());
        jsonArr.add(obj);
    }
    return jsonArr;
}

这样页面一打开就可以加载数据,且reload按钮可以发挥作用,不用在js页面中写queryAll(),试用ajax来异步获取数据。直接在后台”rest/Uploadinfo/queryAll”服务中封装好要用的数据
数据加载

数据重新加载

$('#table').bootstrapTable('load', data);

更新操作

1
2
3
4
5
6
7
8
9
10
$table.bootstrapTable('updateRow', {
index : index1,
row : {
tid : tid,
cid : cid,
uid : uid,
date : date,
type : type,
}
});

添加操作

使用bootstrap table插件
table rowStyle和runningFormatter

<table data-row-style="rowStyle"> <thead> <tr><th data-align="center" data-formatter="runningFormatter">ID</th> </tr></thead>

function rowStyle(row, index) {
    var classes = ['success', 'info', 'warning', 'danger'];
 /*if (index % 2 === 0 && index / 2 < classes.length) {
    return {
        classes: classes[index / 2]
    };
}*/
if(index % 2 ===0){
    return {
        classes:classes[index%3]
    }
}
return {};
}
function runningFormatter(value, row, index) {
    return index+1;
}

tablet添加操作

<th data-field="operate" data-formatter="operateFormatter"
data-events="operateEvents" data-align="center">操作</th>

更全更详细的文档请查看:bootstrap-table官方文档

|