网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

jquery排序,jqgrid排序

Jquery 如何实现ul中的ol排序?

如果想实现排序,你可以通过用ol的属性进行排序。下面是个小例子:

网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了安源免费建站欢迎大家使用!

body

ul id="ul"

ol id="1"li1111111/li/ol

ol id="4"li2222222/li/ol

ol id="3"li3333333/li/ol

ol id="2"li4444444/li/ol

/ul

/body

script

var oUl = document.getElementById('ul');

var aOl = oUl.children;    //aOl 是一个元素集合,只是有数组的方法。但不具备sort

var arr = [];

for(var i=0;iaOl.length;i++)

{

arr.push(aOl[i]);

}

arr.sort(function(a,b){return a.id - b.id});  //这里用了数组的sort排序。

for(var i=0;iarr.length;i++)

{

oUl.appendChild(arr[i]);   //重新加入oUl中。排序成功

}

/script

如何用jquery对列表进行排序?

思路:

1、利用jquery选择器获取li数组和ul节点

2、通过数组的sort方法对li进行排序

3、根据ul节点,清空原来li,再把排序后的li节点添加进去

代码:

script

function onTest(){

var arr =   $('li');

arr.sort(function(a,b){

return a.innerHTMLb.innerHTML?1:-1;

});//对li进行排序,这里按照从小到大排序

$('ul').empty().append(arr);//清空原来内容添加排序后内容。

}

/script

/head

body

ul

lib/li

lia/li

lid/li

lic/li

/ul

a  onclick="onTest();"按钮/a

/body

/html

jquery怎么实现正向排序反向排序

首先,我可以很负责的告诉你,jquery本身不带有排序功能,表格数据的排序则更做不到。

js中可以通过sort()函数针对ASCII进行排序,当然面对数字的时候也可以自定排序规则

sort(function(a,b){return a-b;});像这样

具体使用方法:array.sort(function(a,b){return a-b;});但是呢,像你这样的数据型表格就不行了,另外数字和中文组合的排序我也没试过

往往这种排序是通过数据库中查询语句(SQL)实现的。

就算是Jquery-easyUI的DataGrid控件也是需要通过跟后台服务器交互才能实现排序功能。

不过也不是完全不能实现,这个就要复杂一点了,思路大概是通过js获取每个格内的数值然后以json嵌套的形式形成一个二维的数组数据。然后采用轮询遍历式的算法获取最大/小值然后重写表格,比较复杂需要上代码么?

用jquery实现表格列排序?

$(document).ready(function()

{

//插件的形式

jQuery.fn.alterRowColors = function()

{

$('tbody tr:odd', this).removeClass('even').addClass('odd');

$('tbody tr:even', this).removeClass('odd').addClass('even');

return this;

}

//1.此时的函数是作为jQuery.fn的一个新属性定义的,不是孤立的函数,这样就把该函数注册成了一个插件,

//2.使用关键字this,在一个插件内部,this表示的是调用该插件的jQuery对象,

//3.最后在函数的末尾返回this,返回这个值可以使这个新方法能够继续连缀其他的方法。

var $sortOrder = 0; //排序类型 1表示升序,0表示降序

var $table = $('table#shop');

$table.alterRowColors();

$('th', $table).each(function( column )

{

//处理三种有可能存在的排序字段,比较方法

var findSortKey;

if( $(this).is('.sort-title') || $(this).is('.sort-author') )

{

findSortKey = function( $cell )

{

return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase();

}

}

else if( $(this).is('.sort-date') )

{

findSortKey = function( $cell )

{

return Date.parse('1' + $cell.text());

}

}

else if( $(this).is('.sort-price') )

{

findSortKey = function( $cell )

{

var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''))

return isNaN(key) ? 0 : key;

}

}

//排序

if( findSortKey )

{

$(this).addClass('clickable').hover(function()

{

$(this).addClass('hover');

var $title = $sortOrder == 0 ? '升序' : '降序';

$(this).attr('title', '按'+ $(this).html() + $title +'排列');

}, function()

{

$(this).removeClass('hover');

}).click(function()

{

$sortOrder = $sortOrder == 0 ? 1 : 0;

var rows = $table.find('tbody tr').get();

$.each( rows, function( index, row )

{

row.sortKey = findSortKey($(row).children('td').eq(column));

});

//排序方法

rows.sort(function( a, b )

{

if( $sortOrder == 1 )

{

//升序

if(a.sortKey b.sortKey) return -1;

if(a.sortKey b.sortKey) return 1;

return 0;

}

else

{

//降序

if(a.sortKey b.sortKey) return 1;

if(a.sortKey b.sortKey) return -1;

return 0;

}

});

//排序后的对象添加给$table

$.each( rows, function( index, row )

{

$table.children('tbody').append(row);

row.sortKey = null;

});

//显著标明是通过某一列排序的

$table.find('td').removeClass('sorted')

.filter(':nth-child('+ (column + 1) +')').addClass('sorted');

//重新赋予奇偶行的样式

$table.alterRowColors();

});

}

});

//分页效果

var currentPage = 0; //当前页

var pageSize = 10; //每页行数(不包括表头)

//绑定分页事件

$table.bind('repaginate', function()

{

$table.find('tbody tr').hide()

.slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();

});

var numRows = $table.find('tbody tr').length; //记录宗条数

var numPages = Math.ceil(numRows/pageSize); //总页数

var $pager = $('div class="page"/div'); //分页div

for( var page = 0; page numPages; page++ )

{

//为分页标签加上链接

$('a href="#" span'+ (page+1) +'/span/a')

.bind("click", { "newPage": page }, function(event)

{

currentPage = event.data["newPage"];

$table.trigger("repaginate");

})

.appendTo($pager);

$pager.append("  ");

}

$pager.insertAfter($table); //分页div插入table

$table.trigger("repaginate"); //初始化

});


本文名称:jquery排序,jqgrid排序
标题网址:http://bjjierui.cn/article/dseicsi.html

其他资讯