Javascript Slickgrid, изменить строку фона на строке выберите

Я использую библиотеку slickgrid, у меня есть сетка, которая бы мне хотела, чтобы она имела возможность выбирать строку при щелчке, а затем подчеркивать ее цвет фона до красного.Javascript Slickgrid, изменить строку фона на строке выберите

Я использую код ниже, событие щелчка сетки работает. Я могу напечатать на консоли идентификатор каждой строки, но я не знаю, как изменить выбранный фон строки.

<!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

Привет, это работает спасибо, но я хотел бы сделать это программно? Идентификатор активной строки - это то, что я могу найти (как показано в приведенном выше коде). Спасибо. – OussamaLord

Я добавил короткий пример jQuery. Для изменения цвета фона вам не нужен идентификатор. – BenjaminGolder

Мне действительно пришлось использовать '$ (this) .children(). Css ('background-color', '#FBB');' для него работать с текущей версией. –

Активная строка имеет класс «active», и вы можете добавлять свойства к CSS для этого класса.

источник

2014-01-11 09:17:48

Вот что я обнаружил, добавил стиль и вуаля! – William

Javascript Slickgrid, изменить строку фона на строке выберите

ответ

Смежные вопросы