jquery tablesorter uislider

테이블에 포함 된 슬라이더 막대를 갖고 싶습니다. 각 셀은 다른 셀에있는 것이 좋으며, 한 칸 아래로 내려가는 것이 좋습니다.jquery tablesorter uislider

내가 가진 테이블을 구성하고 있습니다 : $('#namehere').tablesorter({table info here})

다음으로 테이블을 호출 : 나는 필터로 작동하는이 슬라이더를 원하는 게 아니에요 <div id="namehere"></div>

아니라 입력 변수 각 행의 다른 부분을 계산하십시오. 필터에 사용되는 슬라이더 막대가있는 많은 게시물을 찾았지만 이러한 슬라이더 막대의 목적이 아닙니다.

슬라이더 막대를 정렬 할 수있는 열이 필요하지 않지만 다른 열은 여전히 고정되어 있어야합니다.

이것을 구현하는 방법에 대한 의견이 있으십니까? 모든 의견을 주시면 감사하겠습니다. HTML 파일에 대한

$(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>

코드는 슬라이더 막대를 허용하고 값을 표시합니다 그것의 위치,하지만 지금은 다른 셀 값을 계산하는 데 사용하는 방법입니다.

출처

2014-03-26 Jeremie

당신이 tablesorter에 전에 슬라이더 바코드를 초기화 시도? HTML5 슬라이더를 사용하지 않는 한 tablesorter가 모든 테이블 행을 제거하고 정렬 한 다음 슬라이더 막대에 첨부 된 모든 코드를 중단시킬 수 있으므로 위의 방법은 작동하지 않을 수 있습니다. 설명하는 내용의 예를 들려줄 수 있습니까? – Mottie

HTML5 슬라이더를 사용하는 것이 좋습니다. 슬라이더 막대를 테이블에 추가 할 수 있었지만 슬라이더 막대에서 위치 값을 참조하고 끌어 올 수있는 방법이 필요했습니다. 어딘가에 코드를 게시 할 수 있는지 보겠습니다 ... – Jeremie

코드를 어딘가에 게시하는 대신 질문을 업데이트했습니다. 또한 미리 감사드립니다. – Jeremie

동적으로 수정 된 테이블 내의 요소에 바인딩 할 때을 사용하십시오. 다음과 같이

그래서, 당신은 당신의 코드를 수정할 수 있습니다 (demo) :

$(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 ]); 
      }); 
     } 
    }); 
});

출처

2014-03-28 10:09:11 Mottie

도와 주셔서 감사합니다. 이 코드는 슬라이더 막대를 가져 와서 테이블의 슬라이더 막대 값 출력을 업데이트 할 수있게합니다. 슬라이더 막대로 변경된 변수를 다른 셀을 계산하는 데 사용하는 방법을 알지만 잘 모르겠습니다. 예를 들어 슬라이더 막대 옆의 셀을 정적 막대 4가 아닌 슬라이더 막대 위치의 기능으로 지정한다고 가정 해 봅시다. 슬라이더 바의 4 * 출력을 봅시다. 그 방법도 알고 있습니까? – Jeremie

jquery tablesorter uislider

답변

관련 문제