Javascript Slickgrid，更改行上的行背景select

我使用slickgrid庫，我有一個網格，我希望它具有選擇點擊行的能力，然後將它的背景顏色改爲紅色。Javascript Slickgrid，更改行上的行背景select

我正在使用下面的代碼，網格單擊事件正在工作我可以在控制檯中打印每行單擊的ID，但我不知道如何更改選定的行背景。

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>SlickGrid example 1: Basic grid</title> 
    <link rel="stylesheet" href="js/SlickGrid/slick.grid.css" type="text/css"/> 
    <link rel="stylesheet" href="js/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> 
    <link rel="stylesheet" href="css/exemple.css" type="text/css"/> 
</head> 
<body> 
<table width="100%"> 
    <tr> 
    <td valign="top" width="50%"> 
     <div id="myGrid" style="width:480px;height:187px;"></div> 
    </td> 
    </tr> 
</table> 

<script src="js/SlickGrid/lib/jquery-1.7.min.js"></script> 
<script src="js/SlickGrid/lib/jquery.event.drag-2.2.js"></script> 

<script src="js/SlickGrid/slick.core.js"></script> 
<script src="js/SlickGrid/plugins/slick.rowselectionmodel.js"></script> 
<script src="js/SlickGrid/slick.grid.js"></script> 


<script> 
    var grid; 
    var columns = [ 
    {id: "title", name: "Title", field: "title",selectable: true}, 
    {id: "duration", name: "Duration", field: "duration"}, 
    {id: "%", name: "% Complete", field: "percentComplete"}, 
    {id: "start", name: "Start", field: "start"}, 
    {id: "finish", name: "Finish", field: "finish"}, 
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"} 
    ]; 

    var options = { 
    enableCellNavigation: true, 
    enableColumnReorder: false 
    }; 

    $(function() { 
    var data = []; 
    for (var i = 0; i < 5; i++) { 
     data[i] = { 
     title: "Task " + i, 
     duration: "5 days", 
     percentComplete: Math.round(Math.random() * 100), 
     start: "01/01/2009", 
     finish: "01/05/2009", 
     effortDriven: (i % 5 == 0) 
     }; 
    } 

    grid = new Slick.Grid("#myGrid", data, columns, options); 
    grid.setSelectionModel(new Slick.RowSelectionModel()); 
    grid.onClick.subscribe(function (e) { 
     var cell = grid.getCellFromEvent(e); 
     console.log(cell.row);//Here is the row id, I want to change this row background color 
     grid.setSelectedRows(cell.row); 
     e.stopPropagation(); 

    }); 
    }) 
</script> 
</body> 
</html>

這是一個網頁的鏈接，如果你想測試Sample Page

來源

2014-01-10 OussamaLord

它看起來像你錯過了一個CSS文件。當我打開你的樣品頁，並期待在控制檯，這個文件丟失：

http://payclix.biz/MobiusTrac/slick-default-theme.css

這一塊的CSS將顏色的行爲您提供：

.slick-row.active .slick-cell { 
    background-color: #FFB; 
}

或使用jQuery：

$(".slick-row").click(function(){ 
    $(this).css("background-color", "#FBB"); 
});

來源

2014-01-11 01:05:31 BenjaminGolder

嗨，這是工作的感謝，但是，我想做它programaticaly？活動行的id是我能找到的東西（如上面的代碼所示）謝謝。 – OussamaLord

我添加了一個簡短的jQuery示例。你不需要id來改變它的背景顏色。 – BenjaminGolder

我實際上必須使用'$（this）.children（）.css（'background-color'，'#FBB'）;'它可以使用當前版本。 –

活動行具有「活動」類，您可以向此類添加屬性到CSS。

來源

2014-01-11 09:17:48

這就是我發現的，添加了一些造型，瞧！ – William

Javascript Slickgrid，更改行上的行背景select

回答

相關問題