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>
这里写图片描述
easyui 表头颜色 、列内容颜色 、多级表头

猜你喜欢

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