Question

我需要一个表来完成为用户分配auth，这样我就可以检查一个单元格，以便为用户提供auth。

表应该是：

auth table

当用户选中此框时，颜色会变为指示他/她将有权访问该主题。

我现在使用的数据是（结构可以更改，因为我可以控制它）：

["subject/user","user1","user2","user3","user4","user5"],
["subject1","X","X","√","√","√"],
["subject2","√","√","√","√","√"],
["subject3","√","√","√","√","√"],
["subject4","√","√","√","√","√"],
["subject5","√","√","√","√","√"]

其中第一个数组是第一行（标题），其余表示他们在特定主题上具有auth或不具有auth。

我现在通过dataTables和

完成此操作

var titles = data.shift();
var columns = [];
for(var i=0; i<titles.length; i++){
columns.push({
    "sTitle":titles[i],
     "class":"center"
});
}

....//
$("#authManageUserListTable").dataTable({
            "aaData":data,
            "aaSorting": [[ 0, "asc" ]], // disable default sort
            "aoColumns":columns,
....//
"fnDrawCallback":function(oSettings){
    $("#authManageUserListTable tbody td").each(function(){
        if($(this).text() == "√"){
            $(this).text("");
            $(this).attr("isChecked",true);
            $(this).css("background-color","#2674A7");
        }else if($(this).text() == "X"){
            $(this).text("");
            $(this).attr("isChecked",false);
            $(this).css("background-color","#aaaaaa");
        }
    });
}


....//

//and then 

 $('#authManageUserListTable tbody').on( 'click', 'td', function () {
    if(isTrue($(this).attr("isChecked"))){
        $(this).css("background-color","#aaaaaa");
        $(this).attr("isChecked",false);
    }
    else if(isFalse($(this).attr("isChecked"))){
        $(this).css("background-color","#2674A7");
        $(this).attr("isChecked",true);
    }
    console.log(this);
} );

但我担心的是：

如何在用户操作后获取新的重置数据以表示新的auth。检查/取消选中单元格时应该更改某些内容吗？
我需要在除了所有用户之外的行中添加两个按钮（span），表示＆＃34;检查所有＆＃34;，＆＃34;取消选中所有＆＃34;指示在所有主题上为该用户分配所有auth。我怎么能这样做？

我正在使用jquery.dataTables 1.9.4但是如果有任何易于实现的库，那么它也将受到高度赞赏。

Answer 1

你的第一个问题。

如果要在Datatable中更改某些内容，则必须更改dataTable对象。如果仅更改HTML，则当dataTable的状态发生更改（过滤器，顺序等）时，您的更改将消失。因此，如果您必须在dataTable中进行更改，则必须访问fnSettings并在那里更改所有内容。

示例：

$('#authManageUserListTable tbody').on( 'click', 'td', function () {
var table = $("#authManageUserListTable").dataTable();
// Get the position of the current data from the node
var aPos = table.fnGetPosition( this );
var aPosCell = aPos[1];
var aPosRow = aPos[0]
var tdcell = table.fnSettings().aoData[aPosRow].nTr;
if($(this).attr("isChecked")=='true'){
//$(this).css("background-color","#aaaaaa");
//$(this).attr("isChecked",false);
   $('td',tdcell)[aPosCell].setAttribute('isChecked','false');
   $('td',tdcell).eq(aPosCell).css("background-color","#aaaaaa");
}
else if($(this).attr("isChecked")=='false'){
//$(this).css("background-color","#2674A7");
//$(this).attr("isChecked",true);
   $('td',tdcell).eq(aPosCell).attr('isChecked','true');
   $('td',tdcell).eq(aPosCell).css("background-color","#2674A7");
}
});

2.第二个问题。您可以在末尾添加一行然后，当点击任何此td时，获取单元格，并修改此单元格的所有tr的两个属性（isChecked，colorbackground）。

// The last tr is for all grants
$('#authManageUserListTable tbody tr').eq(-1).on( 'click', 'td', function (){ 
 var table = $("#authManageUserListTable").dataTable();
 // Get the position of the current data from the node
 var aPosCell = table.fnGetPosition( this );
 $(table.fnSettings().aoData).each(function(){
 $(this).nTr.cells.eq(aPosCell).attr('isChecked','true');
 $(this).nTr.cells.eq(aPosCell).css("background-color","#2674A7");
})
//The second to last is for any grants
$('#authManageUserListTable tbody tr').eq(-1).on( 'click', 'td', function (){ 
 var table = $("#authManageUserListTable").dataTable();
 // Get the position of the current data from the node
 var aPosCell = table.fnGetPosition( this );
 $(table.fnSettings().aoData).each(function(){
 $(this).nTr.cells.eq(aPosCell).attr('isChecked','false');
 $(this).nTr.cells.eq(aPosCell).css("background-color","#aaaaaa");
})
} );

请记住在DrawCallBack中应用此更改。我想没有任何错误，但如果发现任何错误，请告诉我。我希望这对你有所帮助。如果您有任何问题，请告诉我。

如何用＆＃34; check＆＃34;写一个表和＆＃34;未经检查＆＃34;细胞容易吗？

1 个答案: