1.基本功能 1.基本功能

1.1.表格列标题样式 1.1. 表格列标题样式

平台支持配置表格列标题样式，例如更换列标题颜色。

1.2.表格行列样式 1.2.表格行列样式

平台支持配置表格行列样式，为表格的某些特殊数据标识不同的颜色，列样式的优先级高于行样式。
表格列样式-效果1

1.3.表格列对齐 1.3.表格列对齐

表格列中的文字默认数字靠右对齐，其他控件都是靠左对齐。可支持文字靠右对齐或者是居中对齐的配置。
表格列对齐-效果1
表格列对齐-效果2

2.配置方法 2.配置方法

2.1.表格列标题样式 2.1.表格列标题样式

表格列标题配置方法适用于新旧表格。

配置

对象建模-业务对象-业务对象管理：编辑业务对象，点击可视化布局按钮进入到可视化界面。
选择要配置表格列标题颜色的字段，在左侧的列样式中填入要配置的css样式。例如设置表格列标题为红色时填入【color:red;】。
保存可视化布局，需要重新生成对应的html代码。

代码

在html代码中，配置了表格列标题的列会生成style="color:red;"样式。

<g-column    cell-align="left" width="100" data="codeName" sortable style="color:red;">
        字典类型名称
        <g-column-editor>
                <input g-focus-select class="input form-control" ng-model="row.codeName"  type="text" name="codeName" id="testLixq201TableForm.codeName"/>
        </g-column-editor>
</g-column>

2.2.表格行列样式 2.2.表格行列样式

新旧表格行列样式配置方法不一样，如果是旧表格则参照旧表格配置

配置

新表格

新表格的行、列样式配置语法一样，格式如下：

    function:函数(row)

2.行样式表达式配置位置为：对象建模–业务对象–业务对象管理：编辑业务对象，在【基本信息】tab页中的【行样式表达式】处填写对应的表达式，举例【function:rowClass(row)】。
行样式新

3.列样式表达式配置位置为：对象建模–业务对象–业务对象管理：编辑业务对象，进入可视化布局，选择对应要配置的表格列，在【列样式表达式】字段中填写对应的表达式，举例【function:columnClass(row)】。
列样式新

4.在生成的自定义JS文件中加入处理函数，具体代码可以参考3.1.行列样式配置中的第1小点。

旧表格

1.行样式表达式配置位置为：对象建模–业务对象–业务对象管理：编辑业务对象，在【基本信息】tab页中的【行样式表达式】处填写要配置的颜色，格式为：【颜色:row.属性名称==’属性值’】。其中颜色可以是自定义的名称，但是平台已经支持了一些颜色的样式。
行样式旧

2.列样式表达式配置位置为：对象建模–业务对象–业务对象管理：编辑业务对象，进入可视化布局，选择对应要配置的表格列，在【列样式表达式】字段中填写要配置的颜色，格式为：【颜色:row.属性名称==’属性值’】。
列样式（旧）

3.下面为平台已经有的样式，因此1中的颜色可以是red，blue，green，white，brown，gray，quote，squote这些值。其中GridStyleExpress是默认生成的。

/* gride行、列表达式-样式 */
.blueGridStyleExpress {background-color:#35a0e7!important;color:#fff!important;}
.redGridStyleExpress {background-color:#d9534f!important;color:#fff!important;}
.whiteGridStyleExpress {background-color:#fff!important;color:#337ab7!important;}
.greenGridStyleExpress {background-color:#5cb85c!important;color:#fff!important;}
.brownGridStyleExpress {background-color:#f0ad4e!important;color:#fff!important;}
.grayGridStyleExpress {background-color:#f0f0f0!important;color:#787878!important;}
.quoteGridStyleExpress {background-color:#5cb85c!important;color:#fff!important;}
.squoteGridStyleExpress {background-color: #b599b8 !important;color:#fff!important;}

3.如果是颜色是自定义的，则这个是有需要自己在custom.css中为class写样式。例如我定义了【custClor:row.testCaseType==’3’】,则你需要在custom.css中为custClorGridStyleExpress定义样式，具体代码可参考3.1.行列样式配置中的第2小点。

代码

在html文件中，旧表格上会生成对应颜色样式标签g-item-class。

g-item-class=" { 'redGridStyleExpress':row.testCaseType=='1' ,' greenGridStyleExpress':row.testCaseType=='2' } "

2.3.表格列对齐 2.3.表格列对齐

新旧表格列对齐配置方法一致。

配置

1.对象建模–业务对象–业务对象管理：编辑业务对象，点击【基本信息】tab页，在表格列对齐处选择对齐方式。
表格列对齐-配置1

代码

在html中表格的每个列中会生成cell-align的标签。

<g-column cell-align="center" width="150" data="testCaseNameTwo" sortable="" drop-filter="">
    单号 
   <g-column-tmpl> 
    <span title="{{row.testCaseNameTwo}}"> {{row.testCaseNameTwo}} </span> 
   </g-column-tmpl> 
 </g-column>

3.常用扩展 3.常用扩展

3.1.行列样式配置 3.1.行列样式配置

1.行列样式配置自定义JS处理函数（函数返回的值为样式名）

        this.scope.rowClass=function (row) {
            var strColor="";
            if (row.receiptType=='2'){
                strColor="redGridStyleExpress";
            }
            if (row.receiptType=='1'){
                strColor="grayGridStyleExpress";
            }
            return strColor;
        };
        this.scope.columnClass=function (row) {
            var strColor="";
            if (row.receiptMethod=='2'){
                strColor="brownGridStyleExpress";
            }
            if (row.receiptMethod=='1'){
                strColor="greenGridStyleExpress";
            }
            return strColor;
        };

2.颜色是自定义的，在custom.css中为class写样式

 .custColorGridStyleExpress {background-color:#d6e3ff !important;}
 .custColorGridStyleExpress span{color:#la83d9 !important;}

3.2.表格修改显示小灯泡 3.2.表格修改显示小灯泡

说明

可以根据不同情况来控制表格某一列的灯泡是否显示。
例子：该界面是视图做成，视图语句中有个条件判断Tips字段是否显示灯泡（当EI接口表有数据更新，会显示小灯泡），显示灯泡提示有更新，双击进去后更新数据，更新完，表格里对应的那笔数据的灯泡会消失。
clipboard

代码

查询表格，将接口表有更新的数据标上小灯泡图标

<g-hot-column data="isExistsEi | renderTips" title="Tips"></g-hot-column>

/**
* 批量提交
*/
$scope.batchSubmit = function(){
var record = $scope.tmOrderTaskCheckedRows;
var errorAccpetMsg = "";
var errorRejcetMsg = "";
var errorCompleteMsg = "";
var errorMsg ="";
for(var i =0; i<record.length;i++){
if(record[i].planStatus && (record[i].planStatus =='1'||record[i].planStatus =='2')){
errorAccpetMsg += "," + record[i].taskNo;
}
if(record[i].planStatus && record[i].planStatus =='6'){
errorRejcetMsg += "," + record[i].taskNo;
}
if(record[i].planStatus && record[i].planStatus =='5'){
errorCompleteMsg += "," + record[i].taskNo;
}
}
if(!record || record.length==0){
GillionMsg.alert(null, "请选择记录");
return;
}
if(errorAccpetMsg!="" || errorRejcetMsg!=""|| errorCompleteMsg!="" ){
if(errorAccpetMsg!=""){
errorAccpetMsg += "未受理";
errorMsg += errorAccpetMsg;
}
if(errorRejcetMsg!=""){
errorRejcetMsg += "已拒绝";
errorMsg += errorRejcetMsg;}
if(errorCompleteMsg!=""){
errorCompleteMsg += "已完成";
errorMsg += errorCompleteMsg;
}
GillionMsg.alert(null,"任务书编号："+errorMsg.substring(1)+",不允许提交");
return;
}else{
var tmTaskIds = Arrays.extract(record, 'tmTaskId').join(',');
var tip = layer.load(0, {shade: false});
$http.post($config.ctx+"/ebTmTask/batchSubmit",tmTaskIds).success(function(result){
layer.close(tip);
if(result.success){
GillionMsg.alert(null,"批量提交成功",function(){
$scope.queryTmOrderTask();
})
}
});
}
}
var controller = new tmOrderTaskManageCtrl({
rootScope: $rootScope,
grid: true,
form:true,
scope: $scope,
config: $config
});
controller.init();
}).filter("renderTips", function() {
return function renderTips(data) {
var html = "";
if (data == "Y") {
html = "<div style='width:100%; text-align: center'><button title='外运已更新数据，请双击看数据' style='background: url(/resource/images/light_bulb_large.png); width: 21px; height: 23px;' /></div>";
}
return html;
};
});;

双击有灯泡的数据进入编辑页面，更新数据：

/**
* 提交拖车任务书
*/
@RequestMapping("/ebTmTask/batchSubmit")
@ResponseBody
public Map<String, Object> batchSubmit(@RequestBody String tmTaskIds) {
if(StringUtils.isNotBlank(tmTaskIds)){
List<EbTmTask> ebTmTasks = saveOrUpdateTmTask(tmTaskIds);
//受理逻辑赋值
for(EbTmTask ebTmTask : ebTmTasks){
if(Pattern.matches("^1|2$", ebTmTask.getEbTaskCommitState())){
ebTmTask.setEbTaskCommitState("2");
}else if("3".equals(ebTmTask.getEbTaskCommitState())){
ebTmTask.setEbTaskCommitState("4");
}
EbTmOrder ebTmOrder = ebTmTask.getEbTmOrder();
ebTmOrder.setRowStatus(BaseObject.ROWSTATUS_MODIFIED);
ebTmTask.setEbTmOrder(ebTmOrder);
ebTmTask.setRowStatus(BaseObject.ROWSTATUS_MODIFIED);
ebTmTaskService.update(ebTmTask);
ebTmTaskCustomService.saveToEi(ebTmTask);
}
return ReultMsgHandler.generateSucessMsg("交付成功!");
}else{
return ReultMsgHandler.generateFaildMsg("交付失败!");
}
}

@RequestMapping("/eiTmTask/receive")
@ResponseBody
public Map<String, Object> receive(@RequestBody TmOrderTask tmOrderTask) {
Long tmTaskId = tmOrderTask.getTmTaskId();
tmTaskId = tmTaskId == null ? 0L : tmTaskId;
EiTmTaskExample eiTmTaskExample = EiTmTaskExample.create();
String clause = "EI_TYPE = 'FMS' AND ACTIVE = 'Y' AND TM_TASK_ID IS NOT NULL AND TM_TASK_ID = ?";
eiTmTaskExample.and().andCreateCondition(clause, new Object[] { tmTaskId });
List<EiTmTask> eiTmTasks = ebTmTaskCustomService.getFullEiTmTasks(eiTmTaskExample);
if (CollectionUtils.isEmpty(eiTmTasks)) {
throw new BusinessException("没找到要接收的订单");
} else if (eiTmTasks.size() > 1) {
throw new BusinessException("找到多笔订单无法接收");
} else {
EbTmTask ebTmTask = ebTmTaskCustomService.receiveToEbTask(eiTmTasks.get(0));
return ReultMsgHandler.generateSucessMsg("接收成功!","ebTmTaskId",ebTmTask.getEbTmTaskId());
}
}

Gschool

样式配置