所有边框颜色不变（仅底部和右侧边框发生变化）

Question

在验证 JqxGrid 时，如果单元格具有空值，我想将单元格的边框更改为红色。 我设法突出显示单元格的边框，但只有底部和右侧边框是红色的，我在突出显示所有边框时缺少什么？

单击“单击以验证”按钮以在 RED 中查看错误的单元格边框

jsfiddle

$(document).ready(function() {

  // prepare the data
  var data = new Array();

  var row1 = {};
  row1["firstname"] = 'Andrew';
  row1["secondname"] = 'A';

  var row2 = {};
  row2["firstname"] = '';
  row2["secondname"] = '';

  var row3 = {};
  row3["firstname"] = '';
  row3["secondname"] = 'C';

  data.push(row1);
  data.push(row2);
  data.push(row3);

  var source = {
    localdata: data,
    datatype: "array"
  };

  $("#jqxgrid").jqxGrid({
    width: "100%",
    source: source,
    autoheight: true,
    editable: true,
    editmode: 'selectedcell',
    selectionmode: 'singlecell',
    columns: [{
        text: 'First Name',
        datafield: 'firstname',
        width: 150,
        cellsalign: 'left'
      },

      {
        text: 'Second Name',
        datafield: 'secondname',
        width: 150,
        cellsalign: 'left'
      }
    ]
  });

  $("#btn").on('click', function() {
    var columns = ['firstname', 'secondname'];
    $.each(columns, function(colIndex, eachColumn) {
      $('#jqxgrid').jqxGrid('setcolumnproperty', eachColumn,
        'cellclassname',
        function(row, columnfield, value) {
          if (value == undefined || value.length == 0) {
            return 'erroredcolumn';
          }
        });
    });
  });

});

.erroredcolumn {
  border-color: red!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  <div id="jqxgrid"></div>
</div>
<input type="button" id="btn" value="click to validate" />

Answer 1

试试下面的代码

        $(document).ready(function () {

            // prepare the data
            var data = new Array();
       
            var row1 = {};
            row1["firstname"] = 'Andrew';
            row1["secondname"] = 'A';
 						
            var row2 = {};
            row2["firstname"] = '';
            row2["secondname"] = '';

						var row3 = {};
            row3["firstname"] = '';
            row3["secondname"] = 'C';
            
            data.push(row1);
            data.push(row2);
            data.push(row3);

						var source = {
                localdata: data,
                datatype: "array"
            };
            
            $("#jqxgrid").jqxGrid({
                width: "100%",
                source: source,
                autoheight: true,
                editable: true,
       		    	editmode: 'selectedcell',
					    	selectionmode: 'singlecell',
                columns: [{
                    text: 'First Name',
                    datafield: 'firstname',
                    width: 150,
                    cellsalign: 'left'
                },

                {
                    text: 'Second Name',
                    datafield: 'secondname',
                    width: 150,
                    cellsalign: 'left'
                }]
            });
            
           $("#btn").on('click', function () {
           	var columns = ['firstname', 'secondname'];
            $.each( columns, function( colIndex, eachColumn ) {
			        $('#jqxgrid').jqxGrid('setcolumnproperty', eachColumn,
              			'cellclassname', function (row, columnfield, value) {
                    	if (value == undefined || value.length == 0) {
														return 'erroredcolumn';
											}
               			});
			         });
            });

        });

       .erroredcolumn {
             border-color: red !important;
             top:1px;
             border-width:1px 1px 1px 1px !important;
        }
        .jqx-grid-cell{
            
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
</div>
<input type="button" id="btn" value="click to validate" />

Answer 2

你正在使用position，所以当你应用border-color时，它会隐藏top-border，因为你没有分配positiontop所以border-top被灰色隐藏border。

只需添加以下 css

Fiddle link

   .erroredcolumn {
         border: 1px solid red !important;
         top:1px;
    }