重复单元格值的 jqx 网格小部件中的单元格渲染

Question

我想在 jqx 网格小部件中渲染具有重复值的单元格。例如;

|标题 |作者|编号 |
|第 1 册 | J.Doe | 234 |
|第 2 册 | F.Bar | 234 |
|第 3 册 | X.One | 999 |
|第 4 册 | K.Doe |第793章|

我想用具有重复值的绿色边框标记数字单元格。在此示例中，第一行和第二行将被标记。

有一个带有这些参数的单元格渲染器函数；

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { }

我该怎么做？

Answer 1

作为下面示例的参考，我采用了来自 jqwidgets 4.0.0 的示例 'angularjs-grid-with-jqx-settings.htm' 并仅添加了 cellsrenderer。对不起，如果你不使用 angularjs，但它是模拟的，如果你使用普通的 jquery 解决方案。

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">AngularJS Grid directive settings</title>
    <link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css"/>
    <script type="text/javascript" src="../../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            // Grid data.
            var data = new Array();
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
            var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
            var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];

            for (var i = 0; i < firstNames.length; i++) {
                var row = {};
                row["firstname"] = firstNames[i];
                row["lastname"] = lastNames[i];
                row["title"] = titles[i];
                row["city"] = city[i];
                row["country"] = country[i];
                data[i] = row;
            }

            $scope.people = data;

            var renderCity = function (row, columnfield, value, defaulthtml, columnproperties) {
                var rows = $scope.settings.apply('getrows');
                var duplicates = false;
                rows.forEach(function (record, i) {
                    if (i != row && record.city == value)
                        duplicates = true;
                });
                if (duplicates) {
                    defaulthtml = defaulthtml.substring(0, defaulthtml.indexOf(">")).replace('style="', 'style="border-color: green; border-style: solid; border: 2px ');
                    defaulthtml += '">' + value + '</div>';
                }
                return defaulthtml;
            };

            $scope.settings =
            {
                altrows: true,
                width: 800,
                height: 400,
                sortable: true,
                source: $scope.people,
                columns: [
                    {text: 'First Name', datafield: 'firstname', width: 150},
                    {text: 'Last Name', datafield: 'lastname', width: 150},
                    {text: 'Title', datafield: 'title', width: 150},
                    {text: 'City', datafield: 'city', width: 150, cellsrenderer: renderCity},
                    {text: 'Country', datafield: 'country'}
                ],
            }
        });
    </script>
</head>
<body>
<div ng-controller="demoController">
    <jqx-grid jqx-settings="settings"></jqx-grid>
</div>
</body>
</html>

希望对您有所帮助！

重复单元格值的 jqx 网格小部件中的单元格渲染

Cell rendering in jqx grid widget for repeated cell values

javascript

jqxgrid