在 jquery 移动设备中动态更改 table 数据优先级

Question

是否可以在 jquery 移动设备中动态更改 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>

以上tableuser1需要remove the data-priority for third row. User2想remove the data-priority for fourth row。可以吗

Answer 1

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

给定此默认值 table head:

<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 使用 data-priority 将类如 ui-table-priority-1、ui-table-priority-2 等添加到头部的 TH 和尾部的 TD body。因此，您可以使用脚本删除 data-priority 属性和类，然后告诉 table 小部件重建

$("#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');
}

Here is a DEMO

在 jquery 移动设备中动态更改 table 数据优先级

Change the table data-priority dynamically in jquery mobile

jquery-mobile