Veröffentlicht am | in . . |

理解与认识

bootstrap的分页分为前端（客户端）分页和后端（服务端）分页两种，参数设置时，客户端（前端）分页的参数：sidePageination:’client’，服务端（后端）分页的参数sidePagenation:’server’。在数据格式上前端分页(客户端）需要的数据结构必须为[{},{},{}…],服务端需要的数据格式为{total:56,rows:[{},{},{}….]}具备以上两个条件，bootstraptable分页就可以正常显示，但是在前端（客户端）分页的时候，后端接口中传过来的数据不一定符合我们的数据格式标准，这就需要我们在ajax（已被框架封装进组件）获取数据完成之后且数据分发之前打印一下数据，查看是否合规。

分析原理

ajax完成获取数据并且还未发放数据，这一过程的数据（原始数据）在responseHander参数里面能够获取到,responseHandler: function(res) {return res}这里的res即为原始数据，打印出来如果res的数据格式符合当前分页（服务器或客户端）的格式则不用做处理，如果不符合则需要进行处理，如下面的例子中，我们做的是前端分页，所需要的格式是[{},{},{}…]，而我们打出来的res原始数据格式为
{total:56,rows:[{},{},{}….]}，这就需要我们进行局部截取处理，只保留合法部分：

1
2
3
4
   responseHander:function(res){
	var result = res.rows;
	return result;//在这里result就是我们需要的数据
}

排序，前端排序的基本思想就是通过获取要排序的字段名称和排序方式（asc正序或者desc倒序），对已请求获得的所有数据在发放前进行重新排列，再发放数据使其显示的行为。

具体实践

每次点击列表中的某一字段进行排序，相当于是重新查询了一遍数据，所以排序之前先设置了查询的字段规则和排序规则，这一步在queryParams: function queryParams(params) { } 获取到，params即为每次进行查询时所有的参数数据，这时候我们打印一下params，因为我们的queryParamsType设置的参数为undefined,所以打印出来的数据包含了sortName和sortOrder即排序名称和排序规则。

当我们点击某字段的排序按钮我们会看到sortName和sortOrder也在变成我们对应的字段名称和切换排序顺序，换句话说我们每次对列表进行点击排序操作在queryParams: function queryParams(params) { }都能拿到，现在我们有一个思路就是获取当前的sortName和sortOrder，通过这两项在数据发放前进行数据的重新排列，首先我们看一下我们要处理的数据，res.rows,这个数据格式是[{},{},{}….]，这样我们要对数组中的对象通过对象中的某个属性进行排序，函数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**根据数组里属性的值的大小进行排序**/
function compare(property,type){
	if(type == 'asc'){
		return function(a,b){
	        var value1 = a[property];
	        var value2 = b[property];
	        return value1 - value2;
	    }
	}else{
		return function(a,b){
	        var value1 = a[property];
	        var value2 = b[property];
	        return  value2 - value1;
	    }
	}
    
}

我们要在数据发放之前调用compare函数，也就是在 responseHander:function(res){}里面调用，compare函数的两个参数分别为属性名和排序方式，在第一次加载页面时我们可以规定一个默认的排序名称和排序方法把他们保存在两个全局变量当中，如 var sortName = ‘auditStatus’, sortType = ‘asc’;调用compare(sortName,sortType);当点击了排序按钮时再将获取到的params里面的sortName和sortOrder分别赋给sortName和sortType,即：

1
2
sortName = params.sortName;
sortType = params.sortOrder;

两个全局变量被赋予了新的值，这样每当我们重新点击了排序按钮,列表数据进入新一轮查找重新调用了compare(sortName,sortType);数据就完成了新一轮的排序。全部实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
var sortName = 'auditStatus', sortType = 'asc'; 
 /**根据数组里属性的值的大小进行排序**/
function compare(property,type){
	if(type == 'asc'){
		return function(a,b){
	        var value1 = a[property];
	        var value2 = b[property];
	        return value1 - value2;
	    }
	}else{
		return function(a,b){
	        var value1 = a[property];
	        var value2 = b[property];
	        return  value2 - value1;
	    }
	}
    
}
function initTable2() {
    layer.load(1,{shade: [0.3,'#999']});
    //先销毁表格
    $('#cusTable2').bootstrapTable('destroy');
    var url = "<%=basePath%>manage/sys/role/thisCompanyList.do";
    //初始化表格,动态从服务器加载数据
    $("#cusTable2").bootstrapTable({
        method: "get",  //使用get请求到服务器获取数据
        url:"<%=basePath%>manage/personal/towaitList.do",//获取数据的Servlet地址
        dataType: "json",
        striped: false,  //表格显示条纹
        locale:'zh-CN',//中文支持
        pagination: true, //启动分页
        pageSize: 5,  //每页显示的记录数
        pageNumber:1, //当前第几页
        pageList: [5, 10, 15, 20, 25],  //记录数可选列表
        search: false,  //是否启用查询
        showColumns: false,  //显示下拉框勾选要显示的列
        showRefresh: false,  //显示刷新按钮
        showToggle: false,
        cardView: false,
        sidePagination: "client", //表示客户端请求
        responseHandler: function(res) {//在ajax请求成功后，发放数据之前可以对返回的数据进行处理，返回什么部分的数据
            //res = $.parseJSON(res);
            /* return res; */
			/* var result = res.rows; */
        	var result = res.rows.sort(compare(sortName2,sortType2));	 	 
        	/* var newObject = {"total": res.total, "rows": result}; */
            return result; 
        },
        columns: [
            {
                title: '标的状态',
                field: 'auditStatus',
                align: 'left',
                formatter:function(value,row,index){
                    var e ="";
                    if(row.auditStatus=='2'){
                        e="催收中";
                    }else if(row.auditStatus=='4'){
                        e="撤标结案中";
                    }else if(row.auditStatus=='5'){
                        e="撤标结案";
                    }else if(row.auditStatus=='6'){
                        e="撤案结案中";
                    }else if(row.auditStatus=='7'){
                        e="撤案结案";
                    }else if(row.auditStatus=='8'){
                        e="正常结案中";
                    }else if(row.auditStatus=='10'){
                        e="正常结案";
                    }
                    return e /*+ d*/;
                }
            },
            {
                title: '标的金额',
                field: 'amount',
                align: 'right',
                valign: 'middle',
                sortable: true,
                formatter:function(value,row,index){
                    if(value==''||value==null||value==undefined) return 0;
                    var num = (row.amount).toFixed(2);
                    var numArr = [];
                    if(num.toString().indexOf('.')!= -1){
                        numArr = num.toString().split('.');
                        num = numArr[0].replace(/(\d{1,3})(?=(\d{3})+$)/g,'$1,') +'.'+numArr[1];
                    }else{
                        num = num.toString().replace(/(\d{1,3})(?=(\d{3})+$)/g,'$1,');
                    }
                    return num;
                }
            },
            {
                title: '分配员工数',
                field: 'allotUserNum',
                align: 'right',
                valign: 'middle',
                sortable: true,
                formatter:function(value,row,index){
                    if(value==''||value==null||value==undefined) return 0;
                    var num = row.allotUserNum;
                    var numArr = [];
                    if(num.toString().indexOf('.')!= -1){
                        numArr = num.toString().split('.');
                        num = numArr[0].replace(/(\d{1,3})(?=(\d{3})+$)/g,'$1,') +'.'+numArr[1];
                    }else{
                        num = num.toString().replace(/(\d{1,3})(?=(\d{3})+$)/g,'$1,');
                    }
                    return num;
                }
            }

        ],
        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
        //设置为limit可以获取limit, offset, search, sort, order
        queryParamsType : "undefined",
        queryParams: function queryParams(params) {   //设置查询参数
            var param = {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize
            };
			console.log(params);
            sortName2 = params.sortName;
            sortType2 = params.sortOrder;
            return param;
        },
        onLoadSuccess: function(){  //加载成功时执行
            layer.closeAll('loading');

        },
        onLoadError: function(){  //加载失败时执行
            layer.closeAll('loading');
            /* layer.msg("加载数据失败", {time : 1500, icon : 2}); */
        },
        formatLoadingMessage: function () {
            /* layer.msg("请稍等，正在加载中..."); */
            layer.load(1,{shade: [0.3,'#999']});
        },
        formatNoMatches: function () {  //没有匹配的结果
            layer.closeAll('loading');
            layer.msg('无符合条件的记录');
        }

    });
}

Veröffentlicht am | in |

2017年时间过得很快，前脚还沉浸在一月份元旦订婚的时候，后脚已经开始了2018新的一年，这一年里发生了很多事，经历了自己的订婚结婚父亲离世，见证了别人娶妻生子，悲欢离合。把很多人大半辈子经历的大事儿都集中在一起经历了。2017年也很长，有过很多孤独、无助的时候，哭的次数也最多，还好选对了一生相守的人，有他的陪伴，所有的不幸、愤懑全都咬牙挺过来了，相信以后的生活都会越来越好一切更加明朗。

2017在我领证的第二天晚上爸爸走了，我一直觉得特别突然，突然到像是假的，我还没来得及孝敬他他就走了，我很自责也很内疚，在等救护车的时候我没能及时想到去买急救的药，也许吃了药结果就是另一个样子，我经常会那么想，但是现在已经是事实了，这是我最大的遗憾。

2017我把妈妈接到了北京，没有了爸爸，以后的日子我想替他继续保护，继续爱妈妈，从我上中学开始就很少跟家人在一起，现在每周都能看到妈妈，闲暇的时候带她出去转转，看着妈妈越来越像个小女孩，感觉自己欣慰很多。

2017我家大胖子再次升职加薪，我们也有了自己的小家，看着他发那么多奖金的时候我真的很羡慕，有时候也会意淫一下自己也能发那么多，他经常跟我说人总是越努力就越幸运，我从他身上看到了计划和坚持的重要性。这一年一起经历很多事，他变得越发有担当，我变得比以前做事有耐性，我们都越来越可爱，感谢遇到对方让我们变成了比以前更好的自己。

2017我的弟弟高考失利，报名前我比自己考试那会儿还要紧张，我家胖子每晚加班回来还在电脑前给查学校专业，结果还是去复读了，我弟弟从小就是一个乖宝宝，我们一直觉得他还是一个小孩子，转眼他都十九岁了，比我高一头还多，我突然意识到那么多年来我一直缺席了他的成长，有一天他会像胖子一样支撑起自己的家，想要让自己和家人过得幸福不管在心理上还是能力上都要有与之匹配的承载力，我充满了担忧，希望他能早一些从小孩到大人年龄的增长带动心理的觉醒。我看过很多人，发现越早定下计划的走得越快越远，希望他也一样。

2017写给我自己，今年自己身上又多了几重身份，胖子的妻子，公婆的儿媳，妈妈已经成家了的女儿，弟弟的大姐，以后还会是孩子的妈妈，每一重身份代表的都是一种责任。这种责任驱使我要更努力工作、生活，让家里每一个人幸福。我看到很多现在看来很优秀的人，他们很早就确定了以后的规划，然后每一步都是向着目标前进，我有些后悔之前的二十多年里活得像个孩子，太随性太任性，当遇到巨大的变故的时候虽然我没有慌乱，但是也没有足够的力量来承担。我没有小时候以为的那样优秀，我毕业工作到现在马上进入第六个年头，我有时候也会迷茫，有时候甚至会想如果我从一开始就有一个规划可能现在的自己会更好。我和胖子经常说一句话就是一切都是最好的安排，虽然一夜之间被长大，这样感受也会更深刻吧。

2017过完了，2018有很多的目标要实现，加强学习让技术更加精进，工作更进一步，养成良好的生活习惯，戒除懒惰拖沓。

Veröffentlicht am | in . |

1.使用jquery获取当前url：

window.location.href;

(给window.location.href=”XXX” 赋值，即在当前位置打开新页面)

2.jquery获取url参数要用正则表达式，首先看一下单纯的通过js来获取url中的某个参数：

1
2
3
4
5
function getUrlParam(name){
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");//构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg);//匹配目标参数
	if(r!=null) return unescape(r[2]);return null;//返回参数值
	}

小知识：

unescape(string)方法是用来解码的，与escape(string)相对应
unescape()的工作原理是：通过找到形式为%xx和%uxxx的字序列（表示十六进制的数字），用Unicode字符\u00xx和\uxxx替换这样的字符序列进行编码。
unescape()和escape()函数已被废除，用decodeURI()和decodeURIComponent()（对编码后的url进行解码，encodeURIComponent是编码）取代

通过这个函数传递url中的参数名就可以获取到参数的值，比如url为：

http://localhost:33064/WebForm2.aspx?reurl=WebForm1.aspx

我们要获取reurl的值，可以这样写：

1
var xxx = getParam('reurl');

明白了js获取url的方法我们可以通过这个方法为jquery扩展一个方法来通过jquery获取url参数，下面的代码为jquery扩展了一个getUrlParam()方法

1
2
3
4
5
6
7
(function($){
	$.getUrlParam = function(name){
		var reg = newRegExp("(^|&)" + name + "=([^|$]*)");
		var r = window.location.search.substr(1).match(reg);
		if(r != null) return unescape(r[2]); return null;
	}
})(jquery)

为jquery拓扩展了方法后我们就可以通过这种方法来获取某个参数的值了：

1
var xx= $.getUrlParam('reurl');

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		//方法一
		（function($){
			$.getUrlParam = function(name){
				var reg = new RegExp("()" + name + "");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]); return null;
			}
		}）（jquery）；
		var xx =  $.getUrlParam('reurl');
		alert(xx);			
	});
	
	//方法二
	//获取url中的参数
	function getUrlParam(name){
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var  r = window.location.search.substr(1).match(reg);
		if (r != null) return unescape(r[2]); return null;
	}
</script>

用上面的方法获取url中的参数时，url中传递的中文参数在解析的时候无论怎么测试，获取的都是乱码。经过一番调试后发现，我再传递参数时，对汉字编码使用的是 encodeURI ，而上面的方法在解析参数编码时使用的是unescape ,修改为 decodeURI 就可以了。

Veröffentlicht am | in . |

jquery的extend扩展方法：

jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，因此需要我们先去了解。

一、jquery的扩展方法原理是：

1
$.extend(dest,src1,src2,src3...);

它的含义是将src1，src2,src3…合并到dest中，返回值为合并后的dest，由此可以看出发发合并后，是修改了dest结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

1
var newSrc = $.extend({},src1,src2,src3...);//也就是将“{}”作为dest的参数。

这样可以将src1，src2,src3..进行合并，然后将返回结果返回给newSrc了。如下：

1
var result = $.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});

合并后的结果：

1
result = {name:"Jerry",age:21,sex:"Boy"};

如果后面的参数和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

二、省略dest参数

上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：

1.$.extend(src)

该方法就是将src合并到jquery的全局对象中去，如：

1
2
3
$.extend({
	hello:function(){alert('hello');}
});

就是将hello方法合并到jquery的全局对象中。

2.$.fn.extend(src)

该方法将src合并到jquery的实例对象中去，如：

1
2
3
$.fn.extend(
	hello:function(){alert('hello');}
);

就是将hello方法合并到jquery的实例对象中。

下面列举几个常见实例：

1
$.extend({net:{}});

这是在jquery全局对象中扩展 一个net命名空间。

1
2
3
$.extend($.net,{
	hello:function(){alert('hello');};
});

这是将hello方法扩展到之前扩展的jquery的net命名空间中去。

三、jquery的extend方法还有一个重载原型

1
$.extend(boolean,dest,src1,src2,src3...);

第一个参数boolean代表是否深度拷贝，其余参数和前面介绍的一致，什么叫做深层拷贝，我们看一个例子：

1
2
3
var result = $.extend(true,{},
{name:"John",location:{city:"Boston",country:"USA"}},
{last:"Resig",location:{state:"MA",country:"China"}});

我们可以看出src1中嵌套子对象location：{city:”Boston”},src2中也嵌套子对象location:{state:”MA”},第一个深度拷贝参数值为true，那么合并后的结果就是：

1
result = {name:"John",last:"Resig",location:{city:"Boston",state:"MA",country:"China"}}

也就是说它会将src中嵌套子对象也进行合并，而如果第一个参数boolean为false，合并结果如下：

1
result = {name:"John",last:"resig",location:{state:"MA",country:"China"}};

Veröffentlicht am | in . |

效果如下图，直接上解决方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:500px;margin:40px auto 0 auto;}
/* tablescroll */
.tablescroll{font:12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;background-color:#fff;}
.tablescroll td,.tablescroll_wrapper,.tablescroll_head,.tablescroll_foot{border:1px solid #ccc;}
.tablescroll td{padding:5px;}
.tablescroll_wrapper{border-left:0;}
.tablescroll_head{font-size:12px;font-weight:bold;background-color:#eee;border-left:0;border-top:0;margin-bottom:3px;}
.tablescroll thead td{border-right:0;border-bottom:0;}
.tablescroll tbody td{border-right:0;border-bottom:0;}
.tablescroll tbody tr.first td{border-top:0;}
.tablescroll_foot{font-weight:bold;background-color:#eee;border-left:0;border-top:0;margin-top:3px;}
.tablescroll tfoot td{border-right:0;border-bottom:0;}
</style>

<div class="demo">
<table id="thetable" cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<td>城市</td>
			<td>状态代码</td>
			<td>zip</td>
			<td>纬度</td>
			<td>经度</td>
			<td>县</td>
		</tr>
	</thead>
	<tbody>
		<tr class="first">
			<td>中国</td>
			<td>NY</td>
			<td>00501</td>
			<td>40.8152</td>
			<td>-73.0455</td>
			<td>Suffolk</td>
		</tr>
		<tr>
			<td>中国</td>
			<td>NY</td>
			<td>00544</td>
			<td>40.8152</td>
			<td>-73.0455</td>
			<td>Suffolk</td>
		</tr>
		<tr>
			<td>韩国</td>
			<td>PR</td>
			<td>00601</td>
			<td>18.1788</td>
			<td>-66.7516</td>
			<td>韩国</td>
		</tr>
		<tr>
			<td>Aguada</td>
			<td>PR</td>
			<td>00602</td>
			<td>18.381389</td>
			<td>-67.188611</td>
			<td>Aguada</td>
		</tr>
		<tr>
			<td>Aguadilla</td>
			<td>PR</td>
			<td>00603</td>
			<td>18.4554</td>
			<td>-67.1308</td>
			<td>Aguadilla</td>
		</tr>
		<tr>
			<td>Aguadilla</td>
			<td>PR</td>
			<td>00604</td>
			<td>18.4812</td>
			<td>-67.1467</td>
			<td>Aguadilla</td>
		</tr>
		<tr>
			<td>Aguadilla</td>
			<td>PR</td>
			<td>00605</td>
			<td>18.429444</td>
			<td>-67.154444</td>
			<td>Aguadilla</td>
		</tr>
		<tr>
			<td>Maricao</td>
			<td>PR</td>
			<td>00606</td>
			<td>18.182778</td>
			<td>-66.980278</td>
			<td>Maricao</td>
		</tr>
		<tr>
			<td>Anasco</td>
			<td>PR</td>
			<td>00610</td>
			<td>18.284722</td>
			<td>-67.14</td>
			<td>Anasco</td>
		</tr>
		<tr>
			<td>Angeles</td>
			<td>PR</td>
			<td>00611</td>
			<td>18.286944</td>
			<td>-66.799722</td>
			<td>Utuado</td>
		</tr>
		<tr>
			<td>Arecibo</td>
			<td>PR</td>
			<td>00612</td>
			<td>18.4389</td>
			<td>-66.6924</td>
			<td>Arecibo</td>
		</tr>
		<tr>
			<td>Arecibo</td>
			<td>PR</td>
			<td>00613</td>
			<td>18.1399</td>
			<td>-66.6344</td>
			<td>Arecibo</td>
		</tr>
		<tr>
			<td>Arecibo</td>
			<td>PR</td>
			<td>00614</td>
			<td>18.1399</td>
			<td>-66.6344</td>
			<td>Arecibo</td>
		</tr>
		<tr>
			<td>Bajadero</td>
			<td>PR</td>
			<td>00616</td>
			<td>18.428611</td>
			<td>-66.683611</td>
			<td>Arecibo</td>
		</tr>
		<tr>
			<td>Barceloneta</td>
			<td>PR</td>
			<td>00617</td>
			<td>18.4525</td>
			<td>-66.538889</td>
			<td>Barceloneta</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>10</td>
			<td>2</td>
			<td>15</td>
			<td align="center">-</td>
			<td align="center">-</td>
			<td>9</td>
		</tr>
	</tfoot>
</table>
</div>

script部分

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablescroll.js"></script>
<script type="text/javascript">
$(document).ready(function($){
	$('#thetable').tableScroll({
		width:480,//这个地方的宽度是table的总宽度，列数多的时候可以把这个数字写大一些
		height:150
	});
});
</script>

以上js中的width是table的总宽度，如果table的列数很多，就需要宽度大一些，否则会出现thead和tbody错位的现象