如何在 jqxTreeGrid 中更改单元格的背景颜色

Question

我有一个 treegrid 一个动态添加的行。 当我在 JqxTreeGrid 中添加行时，我想更改单元格的背景颜色。 JqxTreeGrid 是否有 function 来更改单元格的背景？

Answer 1

Syntax : $("#treeGrid").jqxTreeGrid('getCellValue', rowKey, dataFiel

Complete ex code:-

<!DOCTYPE html>
<html lang="en">

<head>`enter code here`
    <link rel="stylesheet" href=
    "jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript"
            src="scripts/jquery.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxscrollbar.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxlistbox.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxdropdownlist.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxdatatable.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxtreegrid.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color: green;">
            My Company
        </h1>
        <h3>
            jQWidgets jqxTreeGrid getCellValue() Method
        </h3>
        <div id="jqxTreeGrid" style="margin: 25px;">
        </div>
        <input type="button" style="margin: 20px;"
            id="button_for_getCellValue"
                value="Get the second row's cell
                    value of 'Company' column" />
        <div id="log"></div>
        <script type="text/javascript">
            $(document).ready(function () {
                var A = [{
                    "ID": 1,
                    "Employee_Name": "Amit",
                    "Company": "My Company",
                    "Designation": "Content Writer",
                    "expanded": true,
                    A1: [{
                        "ID": 2,
                        "Employee_Name": "Sumit",
                        "Company": "Amazon",
                        "Designation": "Software Engineer",
                    }, {
                        "ID": 3,
                        "Employee_Name": "Vivek",
                        "Company": "Apple",
                        "Designation": "Product Manager",
                        "expanded": true,
                        A1: [{
                            "ID": 4,
                            "Employee_Name": "Soni",
                            "Company": "Flipkart",
                            "Designation": "HR",
                        }]
                    }]
                }];

                var Data_Source = {
                    dataFields: [{
                        name: 'ID'
                    }, {
                        name: 'Employee_Name'
                    }, {
                        name: 'Company'
                    }, {
                        name: 'Designation'
                    }, {
                        name: 'A1',
                        type: 'array'
                    }, {
                        name: 'expanded'
                    }],
                    hierarchy: {
                        root: 'A1'
                    },
                    id: 'ID',
                    localData: A
                };

                var Data = new
                    $.jqx.dataAdapter(Data_Source);

                $("#jqxTreeGrid").jqxTreeGrid({
                    source: Data,
                    editable: true,
                    ready: function () {
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'expandRow', '1');
                    },
                    ready: function () {
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'expandRow', '3');
                    },
                    columns: [{
                        text: 'Employee_Name',
                        align: 'center',
                        dataField: 'Employee_Name',
                        width: 140
                    }, {
                        text: 'Company',
                        align: 'center',
                        dataField: 'Company',
                        width: 150
                    }, {
                        text: 'Designation',
                        align: 'center',
                        dataField: 'Designation',
                        width: 150
                    }]

                });
                $("#button_for_getCellValue").jqxButton({
                    width: 400,
                    height: 35
                });
                $('#button_for_getCellValue').click(
                    function () {
                        var Cell_Value = $("#jqxTreeGrid").
                            jqxTreeGrid(
                                'getCellValue', 2, 'Company');
                        $("#log").html(JSON.stringify(
                            Cell_Value))
                    });
            });
        </script>
    </center>
</body>

</html>

如何在 jqxTreeGrid 中更改单元格的背景颜色

问题描述

1 个解决方案

解决方案1
0 2022-09-01 02:51:34

如何在 jqxTreeGrid 中更改单元格的背景颜色

问题描述

1 个解决方案

解决方案1 0 2022-09-01 02:51:34

解决方案1
0 2022-09-01 02:51:34