easyui 表头颜色 、列内容颜色 、多级表头

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/tag.inc.jsp"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<!-- 表头颜色 -->
<style>
    .datagrid-header-row td{background-color:#36C0DA;color:#fff}
</style>

<script>
  var stepList="";//工序集合
  $(function () {
        searchdata();
    });
    //改变一列中 内容的颜色
    function stylerone(value, row, index) {
          return 'background-color:#C0D9D9;color:black';
     }

     function searchdata(){
        $("#KPIProduction").datagrid({
            url: "<c:url value='/qm/ProductionReport.sp?method=KPIProductionReport'/>",
            remoteSort:true,
            columns:[
                [
                    {title: '工单信息统计',colspan:4},
                    {title:'物料使用统计',colspan:4},
                    {title:'时间统计',colspan:4},
                    {title:'效率信息统计',colspan:1}
                ],
                [   
                { field: 'planWorkNumber',title:'计划工单数(个)',width:125,  align: 'center',styler:stylerone },
                { field: 'trueFinish',title:'工单实际完成数(个)',width:125,aligb:'center'},
                { field: 'workCompletion',title:'工单完成率(%)',width:150,  align: 'center'},
                { field: 'actualProduction',title:'实际产量(KG)',width:145,  align: 'center'},
                { field: 'feedNumber',title:'生产投料量(KG)',width:145,  align: 'center'},
                { field: 'wasteNumber',title:'废品量(KG)',width:145,  align: 'center'},
                { field: 'yield',title:'成品率(%)',width:145,  align: 'center'},
                { field: 'cleanNumber',title:'清机投料量(KG)',width:145,  align: 'center'},
                { field: 'productionTime',title:'生产时间(H)',width:145,  align: 'center'},
                { field: 'cleanTime',title:'清机时间(H)',width:100,  align: 'center'},
                { field: 'downTime',title:'设备异常停机时间(H)',width:140,  align: 'center'},
                { field: 'MachineOK',title:'设备完好率(%)',width:100,  align: 'center'},
                { field: 'hourOutPut',title:'机台小时产出',width:100,  align: 'center'}               
            ] 
            ],

            queryParams:{
                StratDay:$("#txtqueryStratDay").datebox('getValue'),
                EndDay:$("#txtqueryEndDay").datebox('getValue'),
                machineNumber:$("#txtmachineNumber").textbox('getValue'),
                stepNo:$("#txtstepNo","#query").combobox('getValue'),
                eqLevel:$("#txteqLevel").textbox('getValue')
            },
        });
    }
    </script>
</head>
<body class="main_body" >
    <title>设备运行情况统计</title>
    <div class="src_area" id="query">
        <table>
            <tr>
                <td><b>日期段查询</b></td>
                 <td><input id="txtqueryStratDay" name="txtqueryStratDay" class="easyui-datebox" style="width: 180px; height: 30px;" data-options="buttons:calendarClearButton,editable:false"></td>
                 <td><input id="txtqueryEndDay" name="txtqueryEndDay" class="easyui-datebox" style="width: 180px; height: 30px;" data-options="buttons:calendarClearButton,editable:false"></td>

                 <td><b>设备编号</b></td>
                 <td>
                    <input id="txtmachineNumber" name="txtmachineNumber" class="easyui-textbox" style="width: 120px; height: 30px;"/>
                 </td>

                 <td><b>工序</b></td>
                 <td>
                    <input class="easyui-combobox" id="txtstepNo" name="txtstepNo" style="width: 130px; height: 30px;"/>
                 </td>

                 <td><b>设备等级</b></td>
                 <td>
                    <select class="easyui-combobox" id="txteqLevel" name="txteqLevel" style="width: 130px; height: 30px;">
                        <option value="重要设备">重要设备</option>
                        <option value="">所有设备</option>
                        <option value="一般设备">一般设备</option>
                    </select>  
                 </td>
                 <td>
                    <a href="#" class="easyui-linkbutton normal_btn" data-options="iconCls:'icon-search'" onclick="searchdata()">查询</a>
                </td>
            </tr>
        </table>
    </div>
    <table id="KPIProduction" class="easyui-datagrid" style="width: 100%;">
</body>
</html>

这里写图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小板凳-BGM

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值