jquery表排序器uislider
我想在表格中嵌入一些滑动条，最好每个滑动条位于不同的单元格中，沿列向下 我正在用以下内容构建表： $'namehere'.tablesorter{table info here} 然后使用以下命令调用表： 我不希望这些滑块用作过滤器，而是作为一个输入变量来计算每行的其他部分。我发现很多帖子都使用了滑动条作为过滤器，但这并不是这些滑动条的目的 我不需要滑动条可排序的列，但是其他列应该仍然可以排序 有没有关于如何实施的想法？如有任何反馈，将不胜感激 因此，从目前的情况来看，我有以下几点：jquery表排序器uislider,jquery,tablesorter,uislider,Jquery,Tablesorter,Uislider,我想在表格中嵌入一些滑动条，最好每个滑动条位于不同的单元格中，沿列向下 我正在用以下内容构建表： $'namehere'.tablesorter{table info here} 然后使用以下命令调用表： 我不希望这些滑块用作过滤器，而是作为一个输入变量来计算每行的其他部分。我发现很多帖子都使用了滑动条作为过滤器，但这并不是这些滑动条的目的 我不需要滑动条可排序的列，但是其他列应该仍然可以排序 有没有关于如何实施的想法？如有任何反馈，将不胜感激 因此，从目前的情况来看，我有以下几点： $(fu
$(function() {
DataArray = [];
tempor = [];
DataArray.push(['test_01','test_02','test_03','test_04','test_05']);
tempor.push('1');
tempor.push('2');
tempor.push(' <form onsubmit="return false" oninput="OutputValue.value = parseInt(a.value)">'
+' <input name="a" type="range" min="0" max="5" value="0"/>'
+' <br>'
+' <output name="OutputValue">0</output>'
+' </form>');
tempor.push('4');
tempor.push('5');
DataArray.push(tempor);
DataArray.push([1,2,3,4,5]);
DataArray.push(['test_01','test_02','test_03','test_04','test_05']);
$('#namehere').tablesorter({
theme: 'blue',
widgetOptions : {
build_type : 'array',
build_source : DataArray,
build_headers : {
rows : 1, // Number of header rows from the csv
classes : [], // Header classes to apply to cells
text : [], // Header cell text
widths : [] // set header cell widths
},
build_footers : {
rows : 1, // Number of header rows from the csv
classes : [], // Footer classes to apply to cells
text : [] // Footer cell text
}
}
});
});
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="widget-build-table.js"></script>
<link rel="stylesheet" href="theme.blue.css">
<script src="SliderBar_03_2.js"></script>
</head>
<body>
<div id="namehere"></div>
</body>
</html>
代码将允许使用滑块并显示其位置的值，但现在的问题是如何使用该滑块计算其他单元格值…当绑定到表中动态修改的元素时，请使用 因此，您可以按如下方式修改代码：
您在tablesorter之前是否尝试过初始化滑块条形码？除非您使用HTML5滑块，否则上述方法可能无法工作，因为tablesorter会删除、排序然后替换所有表行，并且可能会中断附加到滑块条的任何代码。你能分享一个你正在描述的例子吗？使用HTML5滑块的建议很有帮助。我能够用它将滑块添加到表中，但是需要一种方法来引用并从滑块中提取位置值。让我看看我是否可以把代码发布到某个地方…只是更新了问题，而不是将代码发布到某个地方。还有，先谢谢你。谢谢你的帮助。这段代码允许我获取滑块，并更新表中这些滑块的输出值。我不太确定我是否知道如何使用滑块改变的变量来计算另一个单元格。例如，假设我希望滑动条旁边的单元格是滑动条位置的函数，而不是静态4。假设滑块条的输出为4*。你也知道怎么做吗？
$(function () {
DataArray = [];
tempor = [];
DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);
tempor.push('1');
tempor.push('2');
tempor.push(' <input name="a" type="range" min="0" max="5" value="0"/>'
+' <br>'
+' <output name="OutputValue">0</output>');
tempor.push('4');
tempor.push('5');
for (var i = 0; i < 4; i++) {
DataArray.push(tempor);
DataArray.push([1, 2, 3, 4, 5]);
}
DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);
$('#namehere').tablesorter({debug: true,
theme: 'blue',
widgetOptions: {
build_type: 'array',
build_source: DataArray,
build_headers: {
rows: 1, // Number of header rows from the csv
classes: [], // Header classes to apply to cells
text: [], // Header cell text
widths: [] // set header cell widths
},
build_footers: {
rows: 1, // Number of header rows from the csv
classes: [], // Footer classes to apply to cells
text: [] // Footer cell text
}
},
initialized: function (table) {
$('#namehere').on('change', 'input', function () {
var $input = $(this),
// don't allow resort, it makes it difficult to use the slider
resort = false;
$input.parent().find('output').html($input.val());
$(table).trigger('updateCell', [ $input.closest('td'), resort ]);
});
}
});
});