我对此排序功能有问题。 在mozilla中,它工作正常,但是当我尝试使用Chrome或IE时,它什么也没做。 我希望有人能提供帮助。
我在mozilla中找到了关于array.sort运算符的东西 https://allenpike.com/2009/arraysort-browser-differences 但这没有帮助
https://jsfiddle.net/dojpw86a/1/
html
<div class="sortcon">
<button id="offerdown" onClick="$('#allbdcontainer .bdcontainer').sort(sortbyoffer).appendTo('#allbdcontainer')">
sortofferup
</button>
<button id="offerup" onClick="$('#allbdcontainer .bdcontainer').sort(sortbyoffer).appendTo('#allbdcontainer')">
sortofferdown
</button>
<div id="allbdcontainer">
<div class="bdcontainer">
<div class="clear">
</div>
<div class="bdshowfromdate">01.11.2018
</div>
<div class="seperator">-
</div>
<div class="bdshowtodate">31.12.2025
</div>
<div class="bdshowoffer">P3
</div>
</div>
<div class="bdcontainer">
<div class="clear">
</div>
<div class="bdshowfromdate">01.11.2018
</div>
<div class="seperator">-
</div>
<div class="bdshowtodate">31.12.2019
</div>
<div class="bdshowoffer">P1D
</div>
</div>
<div class="bdcontainer">
<div class="clear">
</div>
<div class="bdshowfromdate">15.10.2018
</div>
<div class="seperator">-
</div>
<div class="bdshowtodate">20.10.2018
</div>
<div class="bdshowoffer">P2V
</div>
</div>
<div class="bdcontainer">
<div class="clear">
</div>
<div class="bdshowfromdate">15.10.2018
</div>
<div class="seperator">-
</div>
<div class="bdshowtodate">28.10.2018
</div>
<div class="bdshowoffer">P2V
</div>
</div>
<div class="bdcontainer">
<div class="clear">
</div>
<div class="bdshowfromdate">07.08.2019
</div>
<div class="seperator">-
</div>
<div class="bdshowtodate">04.09.2019
</div>
<div class="bdshowoffer">P1D
</div>
</div>
<div class="bdcontainer">
<div class="clear">
</div>
<div class="bdshowfromdate">22.03.2020
</div>
<div class="seperator">-
</div>
<div class="bdshowtodate">25.03.2020
</div>
<div class="bdshowoffer">P2I
</div>
</div>
</div>
功能:
function sortbyoffer(a, b) {
if(event.target.id == 'offerup')
{
return $(a).find(".bdshowoffer").text() < $(b).find(".bdshowoffer").text();
}
else if(event.target.id == 'offerdown')
{
return $(a).find(".bdshowoffer").text() > $(b).find(".bdshowoffer").text();
}
}
答案 0 :(得分:0)
这是您的问题的解决方案-尽管经过了一些修改。
主要要点是,我创建了一个对象数组,其中包含表的所有数据,并创建了用于显示该数据的必要函数。
我还添加了切换功能,该功能可与其他ASC / DESC排序一起使用。
// adding toggle function
let toggleDirection = 1
// data array
let dataArray = [{
bdshowfromdate: '01.11.2018',
bdshowtodate: '31.12.2025',
bdshowoffer: 'P3'
},
{
bdshowfromdate: '01.11.2018',
bdshowtodate: '31.12.2019',
bdshowoffer: 'P1D'
},
{
bdshowfromdate: '15.10.2018',
bdshowtodate: '20.10.2018',
bdshowoffer: 'P2V'
},
{
bdshowfromdate: '15.10.2018',
bdshowtodate: '28.10.2018',
bdshowoffer: 'P2V'
},
{
bdshowfromdate: '07.08.2019',
bdshowtodate: '04.09.2019',
bdshowoffer: 'P1D'
},
{
bdshowfromdate: '22.03.2020',
bdshowtodate: '25.03.2020',
bdshowoffer: 'P2I'
},
]
// generating the HTML to be displayed as the table
function tableHtml(tableData) {
let ret = ''
tableData.forEach(item => {
ret += '<div class="bdcontainer">'
ret += '<div class="clear"></div>'
ret += `<div class="bdshowfromdate">${item.bdshowfromdate}</div>`
ret += '<div class="seperator">-</div>'
ret += `<div class="bdshowtodate">${item.bdshowtodate}</div>`
ret += `<div class="bdshowoffer">${item.bdshowoffer}</div>`
ret += '</div>'
})
return ret
}
// adding the generated HTML to the DOM
function refreshTable(tableData) {
const htmlString = tableHtml(tableData)
jQuery("#allbdcontainer")
.empty()
.append(htmlString)
}
// sorting function
function sortTable(tableData, sortDirection) {
tableData.sort((a, b) => {
if (a.bdshowoffer < b.bdshowoffer) {
return -1 * sortDirection
}
if (a.bdshowoffer > b.bdshowoffer) {
return 1 * sortDirection
}
})
return tableData
}
jQuery(document).ready(function($) {
// initial display of data
refreshTable(dataArray)
$('#offerdown').on('click', function(e) {
dataArray = sortTable(dataArray, 1)
refreshTable(dataArray)
toggleDirection = -1
})
$('#offerup').on('click', function(e) {
dataArray = sortTable(dataArray, -1)
refreshTable(dataArray)
toggleDirection = 1
})
$('#toggle').on('click', function(e) {
dataArray = sortTable(dataArray, toggleDirection)
refreshTable(dataArray)
toggleDirection = toggleDirection * -1
})
})
.bdshowfromdate,
.seperator,
.bdshowtodate,
.bdshowoffer {
float: left;
line-height: 30px;
margin-right: 68px;
}
.bdcontainer {
width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sortcon">
<button id="offerdown">
sortofferdown
</button>
<button id="offerup">
sortofferup
</button>
<button id="toggle">
toggleSorting
</button>
<div id="allbdcontainer"></div>
使用此解决方案
更改表格模板更容易
向表中添加新属性更加容易
将排序功能添加到不同属性会更容易
更容易处理数据
扩展性更好
答案 1 :(得分:0)
这是不带数组的答案,如@natiole在评论中所要求的。
If PPPres.Slides(3).Shapes("Chart").HasChart Then
'## check to see if this shape is a chart.'
' clear out any existing series data in the chart'
PPPres.Slides(3).Shapes("Chart").Chart.ChartData.Workbook.Worksheets(1). _
range("A1:F2").Value = Sheets("Sheet 1").range("A19:F20").Value
End If
function sortList(sortDirection) {
let list = $('.bdcontainer')
list.sort((a, b) => {
if ($(a).find('.bdshowoffer').text() < $(b).find('.bdshowoffer').text()) {
return -1 * sortDirection
}
if ($(a).find('.bdshowoffer').text() > $(b).find('.bdshowoffer').text()) {
return 1 * sortDirection
}
return 0
})
return list
}
function renderList(list, container) {
let htmlString = ''
// jQuery .each()
list.each((i, el) => {
htmlString += $(el).prop('outerHTML')
})
container
.empty()
.append(htmlString)
}
jQuery(document).ready(function($) {
$('#offerdown').on('click', function(e) {
renderList(sortList(1), $('#allbdcontainer'))
})
$('#offerup').on('click', function(e) {
renderList(sortList(-1), $('#allbdcontainer'))
})
})
.bdshowfromdate,
.seperator,
.bdshowtodate,
.bdshowoffer {
float: left;
line-height: 30px;
margin-right: 68px;
}
.bdcontainer {
width: 500px;
}
这是一个正确的解决方案,但是我认为上一个解决方案更好(例如,在JS中处理数组更快,对jQuery的依赖性更低等)。