Add custom color to w2ui cell [Grid]

问题

I am trying to add color to the cell of w2ui grid.

After following the documentation, I am able to change the color of the cell and the row (but individually).

For a single cell:

records: [
            { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: 384052483664, style: {3:'background-color: yellow; color: white;'}}           
        ]

For a single row:

records: [
                { recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: 384052483664, style: 'background-color: red; color: white;'}           
            ]

Till this part it's okay because am hardcoding the records.

Question:

I am loading data from the server and I am putting rules based on some conditions and I want to change color accordingly.

What I understood is that, I have to add style on server only( I am using php and mysql, btw).

Below is my sample code:

$Query = "SELECT @curRow := @curRow + 1 as id ,`x`, `y`, `z`, `a`, `b`, `c`, `d`, `e`, `f`, `g`, `h`, `i` 
        FROM `table_name` JOIN (SELECT @curRow := 0) r";
        //echo $Query;
        $code=mysqli_query($link,$Query);
        $data = array();
        while($row = mysqli_fetch_assoc($code))
        {
            if($row["id"]==1)
            {
                //$row['expanded']="'spinner'";
                //$object = (object) ['style' => "{ 5: 'color': 'red'; 'background-color': 'whilte' }"];
                //$row['style']=$object;
                $row['style']= "3:'background-color: red; color: black;'";
            }
            //var_dump ($row);
            $data[] = $row;
        }
        $arr = array("total" => count($data), 
        "records" => $data);

Assueme if($row["id"]==1) is one of the rule, so over here am trying to add style part. If you see the code, I have tried multiple ways to add style to it. It's just not working. But if am printing the rows using php, I get the row exactly the way it's supposed to code( See the code for single cell style stated above). But it's not reflecting in the table.

Second quesstion

I will like to have row colored in one color and on top of that, i'll like to color one individual cell differently( two different rules, one for rows and one for coloumns). Since I was not able to achieve the first requirement, I didnt spend much time on this issue.

Third question

How can I make the height of the row dynamic? Let's say I have a column name response, I have assigned a fixed width to it, when the content of that row exceeds the width, it shows ... after the available width. I want to show it in next line. Is it possible to do so?

Thanks.

回答1:

To answer your first question:

style has to be a JSON object when it arrives on the client side, so on the server side, it must be an array that's later on passed to json_encode()

$row['style'] => array('5' => 'background-color: red; color: black;');
...
$result = json_encode($row);

To answer your second question:

The latest version of w2ui 1.5 supports both class and style attributes on a record.

So, to color a row and color a single cell in the row differently, you could use:

records: [
    { recid: 1, fname: 'Jane', lname: 'Doe', class: 'my-css-class-for-the-row', style: {3: 'background-color: yellow; color: white;'} }           
];

style and class can both be either a string or an object, so you could also do it the other way around and use style to color the whole row and class to color specific cells.

To answer your third question:

Rows can not have a dynamic height, because of virtual scrolling. That means, all rows must have the same height. You can however change the height of all rows with

grid.recordHeight = 40; // height in pixels

Again, this requires the latest 1.5 version of w2ui and it looks quirky if used together with column groups.

来源：https://stackoverflow.com/questions/38696758/add-custom-color-to-w2ui-cell-grid

标签

javascript

php

w2ui