如何将行突出显示添加到 Base Acumatica BLC 中包含的自定义项中？

问题描述 投票：0回答：3

我知道如何通过编辑 BLC 的 ASPX 页面文件背后的代码来突出显示行，但如果该 BLC 是基本 Acumatica 页面怎么办？我不相信有一种方法可以编辑和存储这些文件的编辑内容。如果有，我该怎么做？我尝试添加一些 JavaScript 将背景颜色设置为我想要的，但我无法让它工作。是否有特定的语法来执行此操作，如果有，我可以举个例子吗？

编辑：Samvel 提出的以下解决方案适用于 19R1。 CSS 文件包含它使用的类。如果您使用的是旧版本，则必须编辑 CSS 文件才能使用该颜色。

acumatica
3个回答
3
投票

您可以使用 Javascript 在某些条件下突出显示网格线。 首先要做的是获取它的实际 Javascript，它将如下所示：

function HighligthLines ()
{
    if(px_all && px_all["ctl00_phG_tab_t0_grid"] && px_all["ctl00_phG_tab_t0_grid"].rows)
    {
        let lines = px_all["ctl00_phG_tab_t0_grid"].rows.items;
        for(let i=0;i<lines.length;i++)
        {
            let currentLine=lines[i];
            if(currentLine.getCell("OrderQty").getValue() > 10)
            {
                currentLine.style = 'background-color: red';
                currentLine.repaint();
            }
        }
    }
}

我们将使用 Acumatica Javascript API 的 

px_all
对象。上面的脚本检查 SO 行的 OrderQty 是否大于 10，如果是，则将该行的背景设置为红色。

现在，获得脚本后，您需要将其添加到 Acumatica 的销售订单页面。 在 Grid 控件上方添加 Javascript 控件，如下所示

并通过以下方式设置Script控件的属性：

IsStartupScript - True
Script          - the script shown above.

将网格控件的 

EnableClientScript
设置为 
True

将 

Client Events
-> 
AfterRefresh
、 
AfterRowChange
和 
Initialize
设为 
HighligthLines

将数据源的 

EnableClientScript
设置为 
True
，并将 
Client Events
-> 
Initialize
、 
CommandPerformed
设置为 
HighligthLines

完成这些步骤并发布自定义后，您应该看到订单数量超过 10 的销售订单行，具有红色背景，如下所示：

建议的方法将适用于 Acumatica ERP 2019 R1 的较低版本，并且需要将 CSS 样式添加到 Acumatica ERP CSS。

更新：

在2019R1及更高版本中，Acumatica具有以下预定义的CSS样式，基本上您不需要将样式设置为

'background-color: red'
，更正确的是将样式设置为
red
或
good
或
red20
。如果您想使用其他样式，则需要覆盖 00_Controls.css 文件。

/*--------------- Styles for the grid cells ---------------*/
.GridRow {
  border-bottom: 1px solid #9FA8DA;
  border-bottom: 1px solid var(--activerow-color, #9FA8DA);
  border-right: 1px solid transparent;
  overflow: hidden;
  background-color: White;
  padding: 7px 8px 5px;
  line-height: 16px;
  min-height: 17px;
}

.GridRow .sprite-icon {
  margin-top: -4px;
}

.GridRow .sprite-icon.control-icon {
  overflow: visible;
}

.GridRow.bad {
  background-color: RGBA(255, 140, 155, 0.5) !important;
  color: #9c2d75 !important;
  border-bottom-color: RGBA(255, 140, 155, 0.5) !important;
}

.GridRow.good {
  background-color: RGBA(156, 237, 171, 0.5) !important;
  color: #007b74 !important;
  border-bottom-color: RGBA(156, 237, 171, 0.5) !important;
}

.GridRow.neutral {
  background-color: RGBA(255, 216, 79, 0.5) !important;
  color: #9c7258 !important;
  border-bottom-color: RGBA(255, 216, 79, 0.5) !important;
}

.GridRow.red {
  color: white !important;
  font-weight: bold;
  background-color: rgba(255, 0, 0, 0.9) !important;
  border-bottom-color: rgba(255, 0, 0, 0.9) !important;
}

.GridRow.red60 {
  background-color: rgba(255, 0, 0, 0.6) !important;
  border-bottom-color: rgba(255, 0, 0, 0.6) !important;
}

.GridRow.red40 {
  background-color: rgba(255, 0, 0, 0.4) !important;
  border-bottom-color: rgba(255, 0, 0, 0.4) !important;
}

.GridRow.red20 {
  background-color: rgba(255, 0, 0, 0.2) !important;
  border-bottom-color: rgba(255, 0, 0, 0.2) !important;
}

.GridRow.red0 {
  color: red !important;
  font-weight: bold;
}

.GridRow.orange {
  color: white;
  font-weight: bold;
  background-color: rgba(255, 140, 0, 0.9) !important;
  border-bottom-color: rgba(255, 140, 0, 0.9) !important;
}

.GridRow.orange60 {
  background-color: rgba(255, 140, 0, 0.6) !important;
  border-bottom-color: rgba(255, 140, 0, 0.6) !important;
}

.GridRow.orange40 {
  background-color: rgba(255, 140, 0, 0.4) !important;
  border-bottom-color: rgba(255, 140, 0, 0.4) !important;
}

.GridRow.orange20 {
  background-color: rgba(255, 140, 0, 0.2) !important;
  border-bottom-color: rgba(255, 140, 0, 0.2) !important;
}

.GridRow.orange0 {
  color: darkorange !important;
  font-weight: bold;
}

.GridRow.green {
  color: white !important;
  font-weight: bold;
  background-color: rgba(112, 173, 71, 0.9) !important;
  border-bottom-color: rgba(112, 173, 71, 0.9) !important;
}

.GridRow.green60 {
  background-color: rgba(112, 173, 71, 0.6) !important;
  border-bottom-color: rgba(112, 173, 71, 0.6) !important;
}

.GridRow.green40 {
  background-color: rgba(112, 173, 71, 0.4) !important;
  border-bottom-color: rgba(112, 173, 71, 0.4) !important;
}

.GridRow.green20 {
  background-color: rgba(112, 173, 71, 0.2) !important;
  border-bottom-color: rgba(112, 173, 71, 0.2) !important;
}

.GridRow.green0 {
  color: #70ad47 !important;
  font-weight: bold;
}

.GridRow.blue {
  color: white !important;
  font-weight: bold;
  background-color: rgba(91, 155, 213, 0.9) !important;
  border-bottom-color: rgba(91, 155, 213, 0.9) !important;
}

.GridRow.blue60 {
  background-color: rgba(91, 155, 213, 0.6) !important;
  border-bottom-color: rgba(91, 155, 213, 0.6) !important;
}

.GridRow.blue40 {
  background-color: rgba(91, 155, 213, 0.4) !important;
  border-bottom-color: rgba(91, 155, 213, 0.4) !important;
}

.GridRow.blue20 {
  background-color: rgba(91, 155, 213, 0.2) !important;
  border-bottom-color: rgba(91, 155, 213, 0.2) !important;
}

.GridRow.blue0 {
  color: #5b9bd5 !important;
  font-weight: bold;
}

.GridRow.yellow {
  color: black !important;
  font-weight: bold;
  background-color: rgba(255, 255, 0, 0.9) !important;
  border-bottom-color: rgba(255, 255, 0, 0.9) !important;
}

.GridRow.yellow60 {
  background-color: rgba(255, 255, 0, 0.6) !important;
  border-bottom-color: rgba(255, 255, 0, 0.6) !important;
}

.GridRow.yellow40 {
  background-color: rgba(255, 255, 0, 0.4) !important;
  border-bottom-color: rgba(255, 255, 0, 0.4) !important;
}

.GridRow.yellow20 {
  background-color: rgba(255, 255, 0, 0.2) !important;
  border-bottom-color: rgba(255, 255, 0, 0.2) !important;
}

.GridRow.yellow0 {
  color: yellow !important;
  font-weight: bold;
}

.GridRow.purple {
  color: white !important;
  font-weight: bold;
  background-color: rgba(128, 0, 128, 0.9) !important;
  border-bottom-color: rgba(128, 0, 128, 0.9) !important;
}

.GridRow.purple60 {
  background-color: rgba(128, 0, 128, 0.6) !important;
  border-bottom-color: rgba(128, 0, 128, 0.6) !important;
}

.GridRow.purple40 {
  background-color: rgba(128, 0, 128, 0.4) !important;
  border-bottom-color: rgba(128, 0, 128, 0.4) !important;
}

.GridRow.purple20 {
  background-color: rgba(128, 0, 128, 0.2) !important;
  border-bottom-color: rgba(128, 0, 128, 0.2) !important;
}

.GridRow.purple0 {
  color: purple !important;
  font-weight: bold;
}
3
投票

对于基本 Acumatica 页面，您可能需要考虑的另一种方法是访问图形扩展中的页面并订阅事件处理程序以设置样式。

下面是一个例子

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using PX.Data;
using PX.Web.UI;

namespace MyExtModule
{
    public class MyGraphExt : PXGraphExtension<MyGraph>
    {
        public override void Initialize()
        {
            //Access page via http context current handler
            Page page = HttpContext.Current?.Handler as PXPage;
            if (page != null)
            {
                page.Load += Page_Load;
            }
        }

        private void Page_Load(object sender, EventArgs e)
        {
            Page page = (Page)sender;
            Style rowStyle1 = new Style();
            rowStyle1.BackColor = System.Drawing.Color.FromArgb(255, 0, 0);
            page.Header.StyleSheet.CreateStyleRule(rowStyle1, page, ".CssRowStyle1");

            Style rowStyle2 = new Style();
            rowStyle2.BackColor = System.Drawing.Color.LightYellow;
            page.Header.StyleSheet.CreateStyleRule(rowStyle2, page, ".CssRowStyle2");

            PX.Web.UI.PXGrid grdMyGridControl = (PX.Web.UI.PXGrid)ControlHelper.FindControl("MyGridControl", page);
            if (grdMyGridControl != null)
            {
                grdMyGridControl.RowDataBound += (object grdsender, PXGridRowEventArgs erdb) =>
                {
                    var data = erdb.Row.DataItem as YourDAC;
                    if (data == null) { return; }
                    if (data.YourDACField == [Your_Value_To_Compare])
                    {
                        erdb.Row.Style.CssClass = "CssRowStyle1";
                    }
                    else
                    {
                        erdb.Row.Style.CssClass = "CssRowStyle2";
                    }
                };
            }
        }
    }
}
0
投票

我不知道为什么Jean-François Fabre删除了我的评论，不幸的是我没有足够的票数直接在评论行中添加评论，我只有一个问题，“如何从另一个页面知道Javascript代码”如果你知道我真的需要你的帮助，非常感谢你

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.