在jquery mobile中动态更改表数据优先级

时间:2015-02-11 09:13:28

标签: jquery-mobile

是否可以在jquery mobile中动态更改data-priority。这就是改变数据优先级顺序取决于用户选择。

<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
        <thead id="th">
            <tr id="tr1">
                <th>First</th>
                <th data-priority="1">Second</th>
                <th data-priority="2">third</th>
                <th data-priority="3">Fourth</th>
            </tr>
        </thead>

</table>
上表user1中的

需要remove the data-priority for third row. User2想要remove the data-priority for fourth row。这可能。

1 个答案:

答案 0 :(得分:1)

它不容易内置到jQM表中,但通过一些编码可以完成。

鉴于此默认表头:

<thead id="th">
    <tr id="tr1">
        <th>First</th>
        <th data-priority="1" id="col2th">Second</th>
        <th data-priority="2" id="col3th">third</th>
        <th data-priority="3" id="col4th">Fourth</th>
    </tr>            
</thead>

jQM使用数据优先级将类如ui-table-priority-1,ui-table-priority-2等类添加到头部的TH和正文中的TD。因此,您可以使用脚本删除数据优先级属性和类,然后告诉表小部件重建

$("#btnUser1").on("click", function(e){
    // remove priority on col3
    ResetToDefaultPriorities();
    $("#col3th").removeAttr("data-priority").removeClass();
    $('#tab tbody td').removeClass();
    $('#tab').table( "rebuild" );   
});   

function ResetToDefaultPriorities(){
    $("#col2th").attr("data-priority", '1');
    $("#col3th").attr("data-priority", '2');
    $("#col4th").attr("data-priority", '3');
}
  

这是 DEMO