Fatal编程技术网
  • acumatica/
  • 如何将行高亮显示添加到包含在基本Acumatica BLC中的自定义中？

如何将行高亮显示添加到包含在基本Acumatica BLC中的自定义中？

acumatica

如何将行高亮显示添加到包含在基本Acumatica BLC中的自定义中？,acumatica,Acumatica,我知道如何通过编辑BLC的ASPX页面的代码隐藏文件来突出显示行，但是如果BLC是一个基本Acumatica页面呢？我认为没有办法编辑和存储这些文件的编辑。如果有，我怎么做？我试图添加一些JavaScript来设置我想要的背景颜色，但是我无法让它工作。有没有一个具体的语法来做这件事，如果有，我能举个例子吗 编辑：Samvel提供的以下解决方案适用于19R1。CSS文件包含它使用的类。如果您使用的是旧版本，则必须编辑CSS文件以使用颜色。您可以使用Javascript在某些条件下高亮显示网格线。

我知道如何通过编辑BLC的ASPX页面的代码隐藏文件来突出显示行，但是如果BLC是一个基本Acumatica页面呢？我认为没有办法编辑和存储这些文件的编辑。如果有，我怎么做？我试图添加一些JavaScript来设置我想要的背景颜色，但是我无法让它工作。有没有一个具体的语法来做这件事，如果有，我能举个例子吗

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

您可以使用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();
            }
        }
    }
}
将网格控件的
EnableClientScript
设置为
True

将
客户端事件
->
后刷新
，
后行更改
和
初始化
设置为
高水平线

将数据源和
客户端事件的
EnableClientScript
设置为
True
，
CommandPerformed
设置为
highlithlines



完成这些步骤并发布定制后，您将看到订单数量大于10且背景为红色的销售订单行，如下所示：


建议的方法将适用于较低版本的Acumatica ERP 2019 R1，还需要在Acumatica ERP CSS中添加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;
}



对于基本的ActuaTa页面，您可能需要考虑的另一种方法是访问图形扩展中的页面并订阅事件处理程序。
下面是一个例子


使用系统；
使用System.Web；
使用System.Web.UI；
使用System.Web.UI.WebControl；
使用PX数据；
使用PX.Web.UI；
名称空间MyExtModule
{
公共类MyGraphExt:PXGraphExtension
{
公共覆盖无效初始化（）
{
//通过http上下文当前处理程序访问页面
Page Page=HttpContext.Current？处理程序作为PXPage；
如果（第页！=null）
{
页面加载+=页面加载；
}
}
私有无效页面加载（对象发送方，事件参数e）
{
第页=（第页）发件人；
Style rowStyle1=新样式（）；
rowStyle1.BackColor=System.Drawing.Color.FromArgb（255,0,0）；
page.Header.StyleSheet.CreateStyleRule（rowStyle1，page，“.CssRowStyle1”）；
Style rowStyle2=新样式（）；
rowStyle2.BackColor=System.Drawing.Color.LightYellow；
page.Header.StyleSheet.CreateStyleRule（行样式2，第页，“.CssRowStyle2”）；
PX.Web.UI.PXGrid grdMyGridControl=（PX.Web.UI.PXGrid）ControlHelper.FindControl（“MyGridControl”，第页）；
如果（grdMyGridControl！=null）
{
grdMyGridControl.RowDataBound+=（对象grdsender，PXGridRowEventArgs erdb）=>
{
var data=erdb.Row.DataItem作为您的DAC；
如果（data==null）{return；}
if（data.YourDACField==[您的值与比较]）
{
erdb.Row.Style.CssClass=“CssRowStyle1”；
}
其他的
{
erdb.Row.Style.CssClass=“CssRowStyle2”；
}
};
}
}
}
}

有兴趣了解官方答案吗？我很确定，您可以使用Acumatica主题和控件的CssClass属性添加高亮显示，就像我在这个答案中所显示的那样，如果您只是将基本页面的代码隐藏文件附加到您的项目中，会怎么样？我的想法：对页面进行一个小的更改，强制发布将您的页面和代码放在\CstPublished（而不是\Pages）文件夹中，并在项目中将该文件包含在该文件位置？我不确定谁会赢得tho（自动生成的文件还是你的），但我想尝试一下。我假设这不是一个经过认证的方法，但是Samvel Petrosov，它将是一个有条件的高亮显示，而不是所有行的100%高亮显示。“我可能应该说的。”埃里克普。您可以尝试在CSS选择器中添加条件。对于自定义网格，这种逻辑会有很大不同吗？智能面板中的自定义电网会有很大不同吗？我假设没有，但我无法让它在我的智能面板自定义电网中工作。@EricP。唯一的区别是用于选择网格控件的键。@EricP。尝试将该功能添加到智能面板上网格的客户端事件中。我已更改了该功能的密钥。我假设key是指HTML id。我还将该函数添加到智能面板中网格的客户端事件中。我有另一个Javascript函数，它成功地在网格中启动。关于我需要使用哪把钥匙的问题，有什么建议吗？我知道这个表有一个键，但是一个附加了_dataT0的内部表。我不确定这是否意味着什么。您能否将智能面板和aspx部件的代码添加到问题中？

/*--------------- 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;
}