Question

我想要一个显示表格的页面，显示的表格基于页面上的选择，并通过ajax更新。

我在页面上有两个范围滑块，一个是价格，另一个是尺寸，页面上还有复选框，您可以选择木材，金属和/或塑料。

我需要帮助我如何构造jQuery来传递所有这些参数。

我知道如何做php以及如何生成表格等等。但我仍然坚持构造jQuery，以允许所有各种选择，请对此有任何帮助。

更新---------------------------------------------- -----------------

你好

感谢您的回复，但计划略有变化：

我有一份材料清单，木材/塑料和金属，

用户应首先选择其中一个，然后显示表格。

当显示表格时，此处还会显示一个jquery ui范围滑块，您可以更改尺寸范围，并且表格应根据这些选择进行更新，请注意需要重新选择所选材料，并通过ajax选择尺寸（基本上需要代码来记住选中的材料。

请参阅我目前的代码：






 

$(function() {
    $slider = $("#slider");//Caching slider object
    $size = $("#size");//Caching size object
    $slider.slider({
        range: true, // necessary for creating a range slider
        min: 0, // minimum range of slider
        max: 50, //maximimum range of slider
        values: [0, 50], //initial range of slider
        step: 0.2,
        slide: function(event, ui) { // This event is triggered on every mouse move during slide.
            $size.html('$' + ui.values[0] + ' - $' + ui.values[1]);//set value of  size span to current slider values
        },
        stop: function(event, ui){//This event is triggered when the user stops sliding.
            getDiamonds();
        }
    });
    $size.html($slider.slider("values", 0) + 'm - ' + $slider.slider("values", 1) + 'm');
});

function getTable(){
    $.ajax({
        type: "POST",
        url: "getTable.php",
        data: "szMin="+$slider.slider('values', 0)+"&szMax="+$slider.slider('values', 1)+"material="+$('#material_type').val(),
        success: function(responseText){
            $('#txtHint').html(responseText);
            $(".tablesorter").collapsible("td.collapsible", {collapse: true})
            .tablesorter({sortList: [[5,1]],headers: {0: {sorter: false}}, widgets: ['zebra'], onRenderHeader: function (){this.wrapInner("");}, debug: false})
            .tablesorterPager({container: $("#pager"), positionFixed: false});
            $("tr.first_row_class").hover(
                function () {$(this).children('td').attr("style","background-color:#FDF5CE");},function () {$(this).children('td').removeAttr("style");});
        }
    });
};
$(function() {
    $( '#selectable' ).selectable({
        stop: function() {
            var selectedLI = $('.ui-selected', this).attr("id");
            //alert(selectedLI);
        }
    }); 
});

之后我有了ul li list（li有id =“plastic / wood or metal”

一旦选择了材料，我希望显示滑块，并且应该使用范围滑块中的值发布ajax，并且应该记住materialType。

很抱歉，如果我重复自己只是想尽可能清楚。最后，我还希望jquery尽可能高效，我可以考虑稍后添加其他滑块和选择。

感谢您的帮助。 Ps，没有提交按钮，更新应该在滑块释放和/或点击材料类型时发生。

Answer 1

你的问题不是那么清楚，但我认为以下功能会有所帮助..

    function wrapData($jqr){
        if(typeof $jqr == 'string') {$jqr = $($jqr)}
        var data = {};
        $jqr.find('select,input:text,input:hidden,textarea,input:password').each(function(){
            var $t = $(this);
            var name = $t.attr('name')||$t.attr('id');
            data[name] = $t.val();
        });
        $jqr.find('input:checkbox').each(function(){
            var $t = $(this);
            var name = $t.attr('name')||$t.attr('id');
            if($t.is(':checked')){
                data[name] = true;
            } else {
                data[name] = false;
            }
        });
        $jqr.find('input:radio').each(function(){
            var $t = $(this);
            var name = $t.attr('name')||$t.attr('id');
            if($t.is(':checked')){
                data[name] = $t.val();
            }
        });
        return data;
    }

$('#submit').click(function(){ var data = wrapData('#all_inputs')
   /* you can then send the parameters to your server */ })

希望对你有所帮助。

Ajax过滤结果使用jQuery，滑块，收音机，复选框

1 个答案: