如果要制作一个相册显示页面，用户上传的图片可能非常大，通常都来自于数码相机拍摄的彩色照片，这些照片都是未经过任何压缩处理的图片，要是上传之后直接显示出来的话可能会非常的慢。于是压缩上传图片的缩略图并呈现列表图片是一个不错的办法。制作缩略图c#.net框架都有已定义好的类，可以直接使用它生成缩略图。
private void setDataImg()
{
string path = Server.MapPath("success.jpg");
string thumbsDir = Server.MapPath("thumbs/");
System.Drawing.Image img;
Bitmap bitmap = new Bitmap(path);
img = bitmap.GetThumbnailImage(100, 100, null, IntPtr.Zero);
img.Save(thumbsDir+"new.jpg",ImageFormat.Jpeg);
Response.ContentType = "image/jpeg";
img.Save(Response.OutputStream, ImageFormat.Jpeg);
Response.End();
img.Dispose();
bitmap.Dispose();
}
上次mymickey利用prototype的方法写过一个表格排序的插件，这次mymickey用jquery也对上一次写排序的插件代码做了一些细化，内部功能也做了一些扩展，增加了扩展名（后缀名）排序的双相选择，可以对后缀名和文件名排序分别制定排序方式；还增加了对表格被选中行排序的功能。
演示请看这里demo;
插件下载
【程序功能】：
- 日期排序、
- 中英文混合数字排序、
- 数据大小排序、
- 数据类型文件类型和扩展名排序、
- 选中行排序。
mymickey谈谈其制作此插件相当于上次遇到的不同情况：
【扩展名排序】：排序之后的对每一行同通类型的文件后缀名进行着色，先要取得每种数据后缀名在表格中被重复的次数
ExtensionName.strongClass
&&strong($(this),previous,this.axis,next)&&arr.push(this.axis);
初始化参数的扩展名属性的强调分类如果被设置，那么会将刷选出来的所有扩展名进行的包装如果列的单元格合法带有相应扩展名，
function strong(o,TagStart,oldText,TagEnd){
return oldText &&
o.html(o.text().replace(oldText,Array.prototype.slice.call(arguments).slice(1).join('')))
}调用strong函数判断顺便加入需要强调着色的单元格文本。这里现将单元格匹配内容replace()替换成所需内容，以此达到文件扩展名的功能。这一个循环涉及到大量的字符串拼接如果这样做的话定会性能损耗较大<strong>+’string’+</strong>，可以使用通变的方法直接将函数参数转为
数组之后取得所需字符串join()掉便得到了理想中的结果，如果拼接成功将返回对象，那么此字符串压入一个数组，数组将计算出所有被重复过的扩展名的次数，就是对数组的元素计算元素的重复次数的计算，之后对被重复过的这些扩展名进行字母的顺序排序，选取之前数组长度讲被刷选出来的对象压入数组slice刷选出之后被压入的对象进行字母先后序列的排序，由此便得到了每个扩展名被重复的次数。
function OrderExtNum(){
var count = arr.length;
$.each($(arr).Filter(),function(i,v){
arr.push( {} );
arr[arr.length-1][v] = i;
});
return arr.slice(count).sort(function(a,b){
for(var i in a){
for(var j in b)
return -(a[i].localeCompare(b[j]))
}
})
}
$.fn.Filter=function(){
var self = this.get(),o={},result=[];
this.each(
function(index){
if( !o[self[index]] ){
o[self[index]] = 1;
}
else {
o[self[index]]++ ;
}
});
return o;
}在排序完毕之后遍历数组，jquery自身扩展了一个slice方法用于更方便的dom元素选择，在这里正好可以派上用场。数组的长度这时候正好就是程序中需要着色次数的长度。
var j = 0 ,color = ['03c','060'],
strong = table.find('td:nth-child('+(tableData.CurrentIndex+1)+') '+target+''),;
$.each(arr,function(i){
$.each(arr[i],
function(k,v){
strong.slice(j,parseInt(k)+j).css({color:'#'+color[i%2]});
j+=parseInt(k);
})
})【选中行排序】：选中行排序在IE6-7中当DOM元素被重新插入表格后如果dom元素中包含checkbox , input元素原来的选中状态会被重置解决办法，mymickey在这里为每个点击后的input元素的父元素添加了一个属性，排序完毕之后重新遍历为input加入选择状态就行了。
function IE6Checked(){
rows.find('td:eq('+(SelectRowOrder.index)+') input')
.each(
function(){
this.checked = parseInt($(this).parent()[0].axis);//IE6下必须被转换为数字//
}
)
}【过滤掉不需要排序的行】：将当前表格需排序的列转换成为数组，拼接需过滤的数组使用自定义的Filter方法删除掉被重复过的数组元素。
if(NotOrder!=null){
var arr=[],Count=th.length;
filterTh={};
while(Count--)arr.push(Count);
arr = $(NotOrder.concat(arr)).Filter();
Count = arr.length;
while(Count--){filterTh[arr[Count]] = th[arr[Count]]}
}
$.fn.Filter=function(){
var self = this.get(),o={},result=[];
this.each(
function(index){
if( o[self[index]] != self[index] )
o[self[index]] = self[index];
else delete o[self[index]];
});
for(var i in o)
result.push(i);
return result
}【其他】：在上一次使用prototype方式做的表格排序中每次反向需要把当前的行转换成为数组在调用数组的reverse()方法进行反向，实际上dom对象也可以拥有reverse()方法
Array.prototype.reverse.call(row);
原因是dom对象列表的hash结构和属性完全达到了数组对象的reverse()方法的标准所以这个可以直接使用数组对象的reverse()方法反序。
插件使用说明：文档载入后选择table对象后调用blueTable方法，$(table).blueTable();blutTable支持2个可选参数。
第一个参数为一个对象详细如下：
- 选中行排序参数：SelectRowOrder{index:number}，属性为一个对象，index属性为需要排序的列的坐标值 从0算起；
- 扩展名排序参数：
ExtensionName{index:number,extension:stringID,name:stringID,strongClass:CSSClass};
index属性同上。
extension属性为点击后需排序的列中的htmlID，点击后可对此列中文件名称排序；
name属性htmlID,点击后可对此列中文件名称的扩展名排序，以上两个属性为一个HTML标签元素，包含在thead th中（详细请看demo）,在文件名排序列中这两个ID必须被设置；
strongClass属性是否对文件扩展名排序后再次对分文件类型分类着色；属性值为字符串，设’ext’的话为文件后缀名分类着色，’font’的话为单元格内所有字符串着色，（mymickey觉得这个东西蛮鸡肋的所以我只设定了2个颜色）;
- DataSize参数：index属性同上;
- NotOrder参数:为一个数组，可以过滤掉不需要排序的列，数组元素为不需排序的列的坐标值，
- HighLightColClass参数：属性值为一个字符串，在切换排序列的时候对当前排序的列进行高亮的CLASS，在CSS中申明;
第二个参数为排序完毕之后需要执行的函数，此函数接受两个参数，第一个的当前被排序列的坐标值，第二个为在此之前被排序列的坐标值。
继续阅读 »