easyui学习笔记之冻结列

一简介

项目中使用到easyui冻结表头，非常实用，多数据列情况下使用冻结表头可以使数据显示更加清晰明了

二页面源码

    $(function() {
       //初始化数据表格
       gridenergy = $('#dom_datagridenergyInfo')
           .datagrid(
               {
                   url : url_searchActionenergy,
                   fit : true,
                   fitColumns : false,
                   pagination : false,
                   closable : true,
                   checkOnSelect : true,
                   remoteSort : false, //取消远程服务器排序
                   striped : true,
                   rownumbers : true,
                   ctrlSelect : true,
                   singleSelect: true,
                   frozenColumns:[[    //冻结列
                       {field:'NAME',title:'单位名称',formatter:doShow,width:180},
                       {field:'REPORTDATE',title:'报表日期',width:80},
                    ]],
                   onLoadSuccess : function(data){

                   if(data.rows == ""){
               $.messager.alert("警告","没有相关记录");
           }   else{
           var rowsData = $('#dom_datagridenergyInfo').datagrid('getData');
            var CYBUSNUM=0;
            var CYBUSSTANDARDNUM=0;
            var CYYEARWASTAGE=0;
            var CYYEAROPERATINGMILEAGE=0;

             var YSTRQBUSNUM=0;
            var YSTRQBUSSTANDARDNUM=0;
            var YSTRQYEARWASTAGE=0;
            var YSTRQYEAROPERATINGMILEAGE=0;

             var YHTRQBUSNUM=0;
            var YHTRQBUSSTANDARDNUM=0;
            var YHTRQYEARWASTAGE=0;
            var YHTRQYEAROPERATINGMILEAGE=0;

            var CDDBUSNUM=0;
            var CDDBUSSTANDARDNUM=0;
            var CDDYEARWASTAGE=0;
            var CDDYEAROPERATINGMILEAGE=0;

             var WGDCBUSNUM=0;
            var WGDCBUSSTANDARDNUM=0;
            var WGDCYEARWASTAGE=0;
            var WGDCYEAROPERATINGMILEAGE=0;

           var QYBUSNUM=0;
            var QYBUSSTANDARDNUM=0;
            var QYYEARWASTAGE=0;
            var QYYEAROPERATINGMILEAGE=0;

           var TOTALBUSNUM=0;
            var TOTALBUSSTANDARDNUM=0;
            var TOTALYEARWASTAGE=0;
            var TOTALYEAROPERATINGMILEAGE=0;
            for (var i = 0; i < rowsData.total; i++) {
             var row = $('#dom_datagridenergyInfo').datagrid('getData').rows[i];
             //柴油
             if(isNaN(row.CYBUSNUM)){
             CYBUSNUM+=0;
             }else{
               CYBUSNUM+=Number(row.CYBUSNUM);
             }
             if(isNaN(row.CYBUSSTANDARDNUM)){
             CYBUSSTANDARDNUM+=0;
             }else{
               CYBUSSTANDARDNUM+=Number(row.CYBUSSTANDARDNUM);
             }
             if(isNaN(row.CYYEARWASTAGE)){
             CYYEARWASTAGE+=0;
             }else{
               CYYEARWASTAGE+=Number(row.CYYEARWASTAGE);
             }
             if(isNaN(row.CYYEAROPERATINGMILEAGE)){
             CYYEAROPERATINGMILEAGE+=0;
             }else{
               CYYEAROPERATINGMILEAGE+=Number(row.CYYEAROPERATINGMILEAGE);
             }
             //压缩天然气
             if(isNaN(row.YSTRQBUSNUM)){
             YSTRQBUSNUM+=0;
             }else{
               YSTRQBUSNUM+=Number(row.YSTRQBUSNUM);
             }
             if(isNaN(row.YSTRQBUSSTANDARDNUM)){
             YSTRQBUSSTANDARDNUM+=0;
             }else{
               YSTRQBUSSTANDARDNUM+=Number(row.YSTRQBUSSTANDARDNUM);
             }
             if(isNaN(row.YSTRQYEARWASTAGE)){
             YSTRQYEARWASTAGE+=0;
             }else{
               YSTRQYEARWASTAGE+=Number(row.YSTRQYEARWASTAGE);
             }
             if(isNaN(row.YSTRQYEAROPERATINGMILEAGE)){
             YSTRQYEAROPERATINGMILEAGE+=0;
             }else{
               YSTRQYEAROPERATINGMILEAGE+=Number(row.YSTRQYEAROPERATINGMILEAGE);
             }
             //液化天然气
             if(isNaN(row.YHTRQBUSNUM)){
             YHTRQBUSNUM+=0;
             }else{
               YHTRQBUSNUM+=Number(row.YHTRQBUSNUM);
             }
             if(isNaN(row.YHTRQBUSSTANDARDNUM)){
             YHTRQBUSSTANDARDNUM+=0;
             }else{
               YHTRQBUSSTANDARDNUM+=Number(row.YHTRQBUSSTANDARDNUM);
             }
             if(isNaN(row.YHTRQYEARWASTAGE)){
             YHTRQYEARWASTAGE+=0;
             }else{
               YHTRQYEARWASTAGE+=Number(row.YHTRQYEARWASTAGE);
             }
             if(isNaN(row.YHTRQYEAROPERATINGMILEAGE)){
             YHTRQYEAROPERATINGMILEAGE+=0;
             }else{
               YHTRQYEAROPERATINGMILEAGE+=Number(row.YHTRQYEAROPERATINGMILEAGE);
             }
            //纯电动
             if(isNaN(row.CDDBUSNUM)){
             CDDBUSNUM+=0;
             }else{
               CDDBUSNUM+=Number(row.CDDBUSNUM);
             }
             if(isNaN(row.CDDBUSSTANDARDNUM)){
             CDDBUSSTANDARDNUM+=0;
             }else{
               CDDBUSSTANDARDNUM+=Number(row.CDDBUSSTANDARDNUM);
             }
             if(isNaN(row.CDDYEARWASTAGE)){
             CDDYEARWASTAGE+=0;
             }else{
               CDDYEARWASTAGE+=Number(row.CDDYEARWASTAGE);
             }
             if(isNaN(row.CDDYEAROPERATINGMILEAGE)){
             CDDYEAROPERATINGMILEAGE+=0;
             }else{
               CDDYEAROPERATINGMILEAGE+=Number(row.CDDYEAROPERATINGMILEAGE);
             }
             //无轨电车
             if(isNaN(row.WGDCBUSNUM)){
             WGDCBUSNUM+=0;
             }else{
               WGDCBUSNUM+=Number(row.WGDCBUSNUM);
             }
             if(isNaN(row.WGDCBUSSTANDARDNUM)){
             WGDCBUSSTANDARDNUM+=0;
             }else{
               WGDCBUSSTANDARDNUM+=Number(row.WGDCBUSSTANDARDNUM);
             }
             if(isNaN(row.WGDCYEARWASTAGE)){
             WGDCYEARWASTAGE+=0;
             }else{
               WGDCYEARWASTAGE+=Number(row.WGDCYEARWASTAGE);
             }
             if(isNaN(row.WGDCYEAROPERATINGMILEAGE)){
             WGDCYEAROPERATINGMILEAGE+=0;
             }else{
               WGDCYEAROPERATINGMILEAGE+=Number(row.WGDCYEAROPERATINGMILEAGE);
             }
              //汽油
             if(isNaN(row.QYBUSNUM)){
             QYBUSNUM+=0;
             }else{
               QYBUSNUM+=Number(row.QYBUSNUM);
             }
             if(isNaN(row.QYBUSSTANDARDNUM)){
             QYBUSSTANDARDNUM+=0;
             }else{
               QYBUSSTANDARDNUM+=Number(row.QYBUSSTANDARDNUM);
             }
             if(isNaN(row.QYYEARWASTAGE)){
             QYYEARWASTAGE+=0;
             }else{
               QYYEARWASTAGE+=Number(row.QYYEARWASTAGE);
             }
             if(isNaN(row.QYYEAROPERATINGMILEAGE)){
             QYYEAROPERATINGMILEAGE+=0;
             }else{
               QYYEAROPERATINGMILEAGE+=Number(row.QYYEAROPERATINGMILEAGE);
             }
             //合计
             if(isNaN(row.TOTALBUSNUM)){
             TOTALBUSNUM+=0;
             }else{
               TOTALBUSNUM+=Number(row.TOTALBUSNUM);
             }
             if(isNaN(row.TOTALBUSSTANDARDNUM)){
             TOTALBUSSTANDARDNUM+=0;
             }else{
               TOTALBUSSTANDARDNUM+=Number(row.TOTALBUSSTANDARDNUM);
             }
             if(isNaN(row.TOTALYEARWASTAGE)){
             TOTALYEARWASTAGE+=0;
             }else{
               TOTALYEARWASTAGE+=Number(row.TOTALYEARWASTAGE);
             }
             if(isNaN(row.TOTALYEAROPERATINGMILEAGE)){
             TOTALYEAROPERATINGMILEAGE+=0;
             }else{
               TOTALYEAROPERATINGMILEAGE+=Number(row.TOTALYEAROPERATINGMILEAGE);
             }

             }

           $('#dom_datagridenergyInfo').datagrid('appendRow',{
             CYBUSNUM: CYBUSNUM,
             CYBUSSTANDARDNUM: CYBUSSTANDARDNUM,
             CYYEARWASTAGE: CYYEARWASTAGE,
             CYYEAROPERATINGMILEAGE: CYYEAROPERATINGMILEAGE,

             YSTRQBUSNUM: YSTRQBUSNUM,
             YSTRQBUSSTANDARDNUM: YSTRQBUSSTANDARDNUM,
             YSTRQYEARWASTAGE: YSTRQYEARWASTAGE,
             YSTRQYEAROPERATINGMILEAGE: YSTRQYEAROPERATINGMILEAGE,

             YHTRQBUSNUM: YHTRQBUSNUM,
             YHTRQBUSSTANDARDNUM: YHTRQBUSSTANDARDNUM,
             YHTRQYEARWASTAGE: YHTRQYEARWASTAGE,
             YHTRQYEAROPERATINGMILEAGE: YHTRQYEAROPERATINGMILEAGE,

             CDDBUSNUM: CDDBUSNUM,
             CDDBUSSTANDARDNUM: CDDBUSSTANDARDNUM,
             CDDYEARWASTAGE: CDDYEARWASTAGE,
             CDDYEAROPERATINGMILEAGE: CDDYEAROPERATINGMILEAGE,

             WGDCBUSNUM: WGDCBUSNUM,
             WGDCBUSSTANDARDNUM: WGDCBUSSTANDARDNUM,
             WGDCYEARWASTAGE: WGDCYEARWASTAGE,
             WGDCYEAROPERATINGMILEAGE: WGDCYEAROPERATINGMILEAGE,

           QYBUSNUM: QYBUSNUM,
             QYBUSSTANDARDNUM: QYBUSSTANDARDNUM,
             QYYEARWASTAGE: QYYEARWASTAGE,
             QYYEAROPERATINGMILEAGE: QYYEAROPERATINGMILEAGE,

           TOTALBUSNUM: TOTALBUSNUM,
             TOTALBUSSTANDARDNUM: TOTALBUSSTANDARDNUM,
             TOTALYEARWASTAGE: TOTALYEARWASTAGE,
             TOTALYEAROPERATINGMILEAGE: TOTALYEAROPERATINGMILEAGE
           });
           }
                   }

                });
       //初始化条件查询
       searchenergy = $('#dom_searchenergyEdit').searchForm( {
           gridObj : gridenergy
       });

   });

三效果展示

easyui学习笔记之冻结列

四总结

注意列的使用，以及需要锁定的列的名称