jqx网格小部件中的单元格渲染用于重复单元格值答案

【问题标题】：Cell rendering in jqx grid widget for repeated cell valuesjqx网格小部件中的单元格渲染用于重复单元格值
【发布时间】：2016-02-03 09:08:15
【问题描述】：

我想在 jqx 网格小部件中呈现具有重复值的单元格。例如；

|标题 |作者 |号码 |
|书 1 |多伊| 234 |
|书 2 | F.酒吧 | 234 |
|书 3 | X.一 |第999章|
|第四册 |多伊|第793章|

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

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

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

我该怎么做？

【问题讨论】：

你不想在 cellsrenderer 函数中做这种事情，因为这会被触发很多。在将其交给网格之前，您应该添加某种 isDupe 字段作为预处理的一部分。您要检查重复值的只是一列，还是每一列？
你为什么只说我们不这样做？你不知道他有多少列！

标签： javascript jqxgrid

【解决方案1】：

作为下面示例的参考，我从 jqwidgets 4.0.0 中获取了示例“angularjs-grid-with-jqx-settings.htm”，并仅添加了单元格渲染器。很抱歉，如果您不使用 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>

我希望这会有所帮助！

【讨论】：