Question

例如，我有以下数据，

var expectedValuesObj = [ "a.com","testid1","200.00" ];

var actualValuesObj = [
                        ["a.com","testid1","200.00"],            
                        ["a.com","testid1","200.00"],
                        ["a.com","testid1","200.00"],
                        ["b.com","testid2","200.00"],
                        ["a.com","testid1","200.00"],
                        ["c.com","testid1","200.00"],
                        ["a.com","testid1","400.00"],
                        ["a.com","testid1","200.00"],
                        ["a.com","testid1","200.00"]
                    ];

通过使用上述数据，我需要将数据与 expectedValuesObj 与 actualValuesObj 进行比较，这些对象中的每个值，如果发现任何不匹配，那么我必须突出显示记录与 expectedValuesObj 不匹配。

例如 expectedValuesObj [0] 我将与 actualValuesObj [0] 进行比较，我没有发现任何不匹配的原因 actualValuesObj[0] = ["a.com","testid1","200.00"]所有值都与expectedValuesObj[0] = ["a.com","testid1","200.00"]匹配。记录

如果发现任何记录不匹配，那么我必须强调该记录。

我更喜欢使用js，bootstrap，jquery，dataTables和laodash的任何好建议和想法。

注意：为了比较两个数据集，如果您愿意，可以根据您的需要更改dataFormat，如果您认为给定的数据集不具有可比性。

mainPage.html

<html>
<body>
    <div id="conatiner"> This Div will have DataTable rendered by below js script file i.e File1.js , And this will Contain the child rows as well which will have the href link and I will open the new window on click of that link , it will open  the mainPage2.hmtl with File2.js loaded .</div>
</body>
<th layout:fragment="page-specific-js" th:remove="tag">

</html>

mainPage2.hmtl

<html>
    <body>
        <div id="conatiner"> Here I want render the Data which is mismatched  and and I have to highlight.  </div>
<script th:src="@{/resources/build/js/File2.js(v=${startUpTime})}" />
    </th>
    </body>
    </html>

因此，我期望比较和突出显示的逻辑可以在File2.js中。

File1.js

// Here I'm importing the jQuery  data tables lib's 
// implemented the script to display the Table with child rows in mainPage1.html
// I guess not necessary to add all the logic and DataTable formation here because it's a general syntax.

File2.js

var expectedValuesObj = [ "a.com","testid1","200.00" ];

var actualValuesObj = [
                        ["a.com","testid1","200.00"],            
                        ["a.com","testid1","200.00"],
                        ["a.com","testid1","200.00"],
                        ["b.com","testid2","200.00"],
                        ["a.com","testid1","200.00"],
                        ["c.com","testid1","200.00"],
                        ["a.com","testid1","400.00"],
                        ["a.com","testid1","200.00"],
                        ["a.com","testid1","200.00"]
                    ];
// By using the above object after comparison, I want to display it in mainPage2.html by highlighting the mismatch records.

在UI中表示以下数据和突出显示的最佳方式是什么

0 个答案: