easyui之datagrid控件分析

/**  * datagrid - jQuery EasyUI  *  * Licensed under the GPL:  * http://www.gnu.org/licenses/gpl.txt  *  * Copyright 2010 stworthy [ stworthy@gmail.com ]  *  * Dependencies:  * resizable  * linkbutton  * pagination  *  */ /**  * 整个表格对象说的是最外层div.datagrid元素  * 整体布局：  *   *   *   *   *   *   *   *   *   *   * * * * * * * */ (function ($) {      function setSize(target) {         var grid = $.data(target, 'datagrid').grid;         var opts = $.data(target, 'datagrid').options;         if (opts.
     
      fit == 
      true) {
            
      var 
      p = 
      grid.
      parent();
            
      opts.
      width = 
      p.
      width();
            
      opts.
      height = 
      p.
      height();
        }

        
      if (
      opts.
      rownumbers || (
      opts.
      frozenColumns && 
      opts.
      frozenColumns.
      length > 
      0)) {
            $(
      '.datagrid-body .datagrid-cell,.datagrid-body .datagrid-cell-rownumber', 
      grid).
      addClass(
      'datagrid-cell-height');
        }

        
      var 
      gridWidth = 
      opts.
      width;
        
      if (
      gridWidth == 
      'auto') {
            
      if ($.boxModel == 
      true) {
                
      gridWidth = 
      grid.
      width();
            } 
      else {
                
      gridWidth = 
      grid.
      outerWidth();
            }
        } 
      else {
            
      if ($.boxModel == 
      true) {
                
      gridWidth -= 
      grid.
      outerWidth() - 
      grid.
      width();
            }
        }
        
      grid.
      width(
      gridWidth);

        
      var 
      innerWidth = 
      gridWidth;
        
      if ($.boxModel == 
      false) {
            
      innerWidth = 
      gridWidth - 
      grid.
      outerWidth() + 
      grid.
      width();
        }

        $(
      '.datagrid-wrap', 
      grid).
      width(
      innerWidth);
        $(
      '.datagrid-view', 
      grid).
      width(
      innerWidth);
        $(
      '.datagrid-view1', 
      grid).
      width($(
      '.datagrid-view1 table', 
      grid).
      width());
        $(
      '.datagrid-view2', 
      grid).
      width(
      innerWidth - $(
      '.datagrid-view1', 
      grid).
      outerWidth());
        $(
      '.datagrid-view1 .datagrid-header', 
      grid).
      width($(
      '.datagrid-view1', 
      grid).
      width());
        $(
      '.datagrid-view1 .datagrid-body', 
      grid).
      width($(
      '.datagrid-view1', 
      grid).
      width());
        $(
      '.datagrid-view2 .datagrid-header', 
      grid).
      width($(
      '.datagrid-view2', 
      grid).
      width());
        $(
      '.datagrid-view2 .datagrid-body', 
      grid).
      width($(
      '.datagrid-view2', 
      grid).
      width());

        
      var 
      hh;
        
      var 
      header1 = $(
      '.datagrid-view1 .datagrid-header', 
      grid);
        
      var 
      header2 = $(
      '.datagrid-view2 .datagrid-header', 
      grid);
        
      header1.
      css(
      'height', 
      null);
        
      header2.
      css(
      'height', 
      null);
        
      if ($.boxModel == 
      true) {
            
      hh = 
      Math.
      max(
      header1.
      height(), 
      header2.
      height());
        } 
      else {
            
      hh = 
      Math.
      max(
      header1.
      outerHeight(), 
      header2.
      outerHeight());
        }
        $(
      '.datagrid-view1 .datagrid-header table', 
      grid).
      height(
      hh);
        $(
      '.datagrid-view2 .datagrid-header table', 
      grid).
      height(
      hh);
        
      header1.
      height(
      hh);
        
      header2.
      height(
      hh);

        
      if (
      opts.
      height == 
      'auto') {
            $(
      '.datagrid-body', 
      grid).
      height($(
      '.datagrid-view2 .datagrid-body table', 
      grid).
      height());
        } 
      else {
            $(
      '.datagrid-body', 
      grid).
      height(
                
      opts.
      height 
       - (
      grid.
      outerHeight() - 
      grid.
      height())
                - $(
      '.datagrid-header', 
      grid).
      outerHeight(
      true)
                - $(
      '.datagrid-title', 
      grid).
      outerHeight(
      true)
                - $(
      '.datagrid-toolbar', 
      grid).
      outerHeight(
      true)
                - $(
      '.datagrid-pager', 
      grid).
      outerHeight(
      true)
            );
        }

        $(
      '.datagrid-view', 
      grid).
      height($(
      '.datagrid-view2', 
      grid).
      height());
        $(
      '.datagrid-view1', 
      grid).
      height($(
      '.datagrid-view2', 
      grid).
      height());
        $(
      '.datagrid-view2', 
      grid).
      css(
      'left', $(
      '.datagrid-view1', 
      grid).
      outerWidth());
    }

    
      /** 
       * wrap and return the grid object, fields and columns 
       */ 
       
      function 
      wrapGrid(target, rownumbers) {
        
      //
      首先在最外层包装一个
      div.datagrid,
      并且返回这个
      div.datagrid 
       
      var 
      grid = $(target).
      wrap(
      '
').
      parent();

        
      //
      下面开始在外层
      div.datagrid
      里面装东西
      ,
      层次结构应该是 
       
      // 
       //  
       //  
       //  
       //  
       //  
       //  
       //  
       //  //   //   //   //   //   grid.
      append(
            
      '
' +
            
      '
' +
            
      '
' +
            
      '
' +
            
      '
' +
            
      '
' +
            
      '
' +
            
      '
' +
            
      '' +
            
      '