The DataGrid data table component structure in the JQuery Easyui framework is detailed _jquery

Base DOM Structure
What is called the "complete base DOM structure", where "foundation" means that the structure does not depend on specific data, does not depend on the view property of the DataGrid, as long as there is a DataGrid instance there will exist such a basic DOM structure, and "complete" means that in the frozen column, frozen row , title, footer, pagination these feature blocks all exist when the DOM structure.

To figure out how the DataGrid works, this DOM structure must be known to the chest, and we'll look directly at what this "basic, complete DOM structure" looks like:

<!--the outermost container of the DataGrid, you can use $ (target). DataGrid (' Getpanel ') or $.data (target, ' DataGrid '). The panel gets this DOM object, This DOM actually hosts panel component--> <div class= the header area container for the panel DataGrid > <!--DataGrid, which corresponds to the header portion of the Panel component, you can use $ (targ ET). The DataGrid (' Getpanel '). Panel (' header ') gets this DOM object--> <div class= "Panel-header" > <div class= "panel-" Title "></div> <div class=" Panel-tool "></div> </div> <!--The main area container of the DataGrid, corresponding In the body section of the Panel component, you can use $ (target). DataGrid (' Getpanel '). Panel (' body ') gets this DOM object--> <div class= "Datagrid-wrap Panel-body > <!--toolbar--> <div class= "Datagrid-toolbar" ></div> <!--DataGrid View part of the container , which is the core of the DataGrid component's DOM structure, and its underlying view structure has no relation to the View property of the DataGrid. --> <!--corresponding Dc.view--> <div class= "Datagrid-view" > <!--div.datagrid-view1 is responsible for displaying frozen columns   
        Part (contains line number or frozencolumns) data--> <!--corresponding Dc.view1--> <div class= "Datagrid-view1" > <!  --column Heading section--> <div class= "Datagrid-header" > <!--corresponding dc.header1--> <div class= "Datagrid-header-inner" > <!--style has htable keywords, h represents header meaning--> <table class= "   
              Datagrid-htable "> <tbody> <tr class=" Datagrid-header-row "></tr>   
        </tbody> </table> </div> </div> <!--column data section--> <div class= "Datagrid-body" > <!--dc.body1--> V class= "Datagrid-body-inner" > <!--frozenrows section (there is data to have this table, so does not belong to the underlying DOM structure), fixed line is 1.3.2 version after the function, pay attention to Datag Rid-btable-frozen key Style, btable code The meaning of the body table--> <table class= "datagrid-btable Datagrid-btable-frozen" & Gt;</table> <!--normal rows section (with data to have this table, so does not belong to the basic DOM structure)--> <table class= "Datagird -btable "></tabLe> </div> </div> <!--footer part--> <div class= "Datagr   
            Id-footer "> <!--corresponding dc.footer1--> <div class=" Datagrid-footer-inner "> <!--ftable represents footer table--> <table class= "datagrid-ftable" ></table> & Lt;/div> </div> </div> <!--DIV.DATAGRID-VIEW2 is responsible for displaying data in the Unfrozen column section, and you notice that frozen columns and normal column views are Separate, which means that frozen columns and normal columns are displayed in different tables, which creates the problem of synchronization between rows of two tables.   
        --> <!--corresponding dc.view2--> <div class= "Datagrid-view2" > <!--column heading section--> <div class= "Datagrid-header" > <!--corresponds to Dc.header2--> <div class= "Datagrid-hea Der-inner "> <table class=" datagrid-htable "> <tbody> <   
            TR class= "Datagrid-header-row" ></tr> </tbody></table> </div> </div> <!--column data section, note that there is no datagrid-body-inner this child element, and the frozen   
          The corresponding body of the knot is some, this is the subtle difference--> <!--corresponding dc.body2--> <div class= "Datagrid-body" > <!--frozenrows part of the data will have this table, it is not part of the basic DOM structure, fixed line is 1.3.2 version after the function,--> <table class= "datagrid-btable data Grid-btable-frozen "></table> <table class=" datagrid-btable "></table> </div > <!--footer part--> <div class= "Datagrid-footer" > <!--corresponding Dc.footer2--&   
          Gt   
          <div class= "Datagrid-footer-inner" > <table class= "datagrid-ftable" ></table> </div> </div> </div> </div> <!--pagination section--> <div CLA
 ss= "Datagrid-pager pagination" ></div> </div> </div>

For this DOM structure, I've made a simple statement in the HTML code, which is a reference to the DC attribute of the object that is bound to the DataGrid host table, which stores references to different parts of the DOM structure and gets the method for the DC properties:

$.data (Target, ' DataGrid '). DC;

The DC attribute corresponds to the DOM, I also made a detailed comment in HTML, please see for yourselves, these are the basis of our in-depth understanding of the DataGrid component.

Default View Profiling
The skeleton of the DataGrid component is described in detail above. With the skeleton is not complete, but also flesh and clothing to wear to do. The powerful DataGrid component allows us to define how to grow a robust and attractive body on the underlying skeleton, as long as we define the view of the DataGrid.

In most cases, we do not specifically require that the DataGrid provide us with a default view, the default view is used in more than 90% scenarios, so the analysis of the default view is very necessary. Note which interfaces are defined in the view, and which methods, if you want to write your own view, it is best to write these interfaces and methods are complete.

var view = {/** * Fills the table principal data (the rows of the generated data section TR) * @param {DOM object} target DataGrid host table corresponding to the DOM objects * @param { DOM Object} container the data body container. Contains two possible values, namely: * 1.frozen part body1, corresponding DOM object is:div.datagrid-view>div.datagrid-view1>div.datagrid-body> Div.datagrid-body-inner * 2. General section Body2, the corresponding DOM object is: Div.datagrid-view>div.datagrid-view2>div.datagrid-body * @pa  
    Ram {Boolean} Frozen is a frozen column * @return {undefined} does not return a value */render:function (target, container, frozen) {  
    var data = $.data (target, "DataGrid");  
    var opts = data.options;  
    var rows = data.data.rows;  
    var fields = $ (target). DataGrid ("Getcolumnfields", frozen);  
      if (frozen) {//If grid does not display rownumbers and there is no frozencolumns, exit directly. if (!) ( Opts.rownumbers | | (Opts.frozencolumns && opts.frozenColumns.length))  
      {return;  
    }//define a table string, note that the array join method is used instead of the traditional "+" operator, which is more efficient in most browsers. var html = ["<table class=\" datagrid-btable\ "Cellspacing=\ "0\" cellpadding=\ "0\" border=\ "0\" "><tbody>"];  
      for (var i = 0; i < rows.length i++) {//striped property, to set the grid data to color interlacing, of course, the implementation principle is simple. var cls = (i% 2 && opts.striped)?  
      "Class=\" Datagrid-row datagrid-row-alt\ "": class=\ "datagrid-row\" "; 
       The Rowstyler property of the/** * table is used to handle the CSS style of the data row, which, of course, only works on the TR tag. 
       * This place uses the call method to set the context, and if this is used internally by the Rowstyler function, this points to the DOM object corresponding to the host table of the DataGrid. * * var style = Opts.rowstyler?  
      Opts.rowStyler.call (target, I, Rows[i]): ""; var styler = style?  
      "Style=\" "+ Style +" \ "": ""; 
       /** * RowId: The unique label for the line, corresponding to the TR ID attribute, consists of the following parts: * 1. Character channeling constant: "Datagrid-row-r"; * 2. Global index: The index value is incremented from 1, the same DataGrid component instance has a unique value, and if there is more than one DataGrid instance in the same page, the value is incremented from 1 to each DataGrid instance; * 3. Frozen column Identity Frozen: This identity is used for Indicates whether the column is frozen (contains line numbers and user-specified FrozenColumns), "1" on behalf of the frozen column, "2" on behalf of the unfrozen column; * 4. Row index: This value is the true representation of the "first few lines" meaning, the value is incremented starting from 0 * as the first DataGrid on the page 
   The ROWID for the 10th row of the unfrozen column of the instance is "datagrid-row-r1-2-9" * *   var rowId = Data.rowidprefix + "-" + (Frozen 1:2) + "-" + i;  
      Html.push ("<tr id=\" "+ rowId +" \ "datagrid-row-index=\" "+ i +" \ "+ CLS +" "+ Styler +" > "); 
       /** * Calls the Renderrow method to generate the row data (the column data in the row). * This here is Opts.view, and the call method is used only to pass in the reference. 
       Here we use This.renderrow (Target,fields,frozen,i,rows[i]) to invoke the Renderrow method should also be possible.  
      */Html.push (this, target, fields, frozen, I, rows[i]);  
    Html.push ("</tr>");  
    } html.push ("</tbody></table>");  
    Using the Join method to complete the character creation splicing directly innerhtml to the container.  
  $ (container). HTML (Html.join ("")); },/** * [renderfooter description] * @param {DOM object} target DataGrid host table corresponding to DOM objects * @param {dom O 
   Bject} container may be dc.footer1 or Dc.footer2 * @param {Boolean} Frozen is frozen zone * @return {undefined} does not return a value  
    * * Renderfooter:function (target, container, frozen) {var opts = $.data (target, "DataGrid"). Options; Get footer NumberAccording to var rows = $.data (target, "DataGrid"). Footer | |  
    [];  
    var columnsfields = $ (target). DataGrid ("Getcolumnfields", frozen); Generates the table var footertable = ["<table class=\" datagrid-ftable\ "cellspacing=\" 0\ "cellpadding=\" 0\ "border" footer area  
    =\ "0\" ><tbody> "];  for (var i = 0; i < rows.length i++) {footertable.push ("<tr class=\" datagrid-row\ "datagrid-row-index=\" "+  
      i + ">");  
      Footertable.push (This.renderRow.call (this, target, columnsfields, frozen, I, rows[i));  
    Footertable.push ("</tr>");  
    } footertable.push ("</tbody></table>");  
  $ (container). HTML (Footertable.join ("")); /** * Generates a row of data * @param {DOM object} target DataGrid host table corresponding to DOM objects * @param {array} fields the word of the DataGrid Segment List * @param {Boolean} Frozen is a frozen column * @param {number} RowIndex row index (starting at 0) * @param {JSON object} rowdata a row concatenation string of Data * @return {string} cells/Renderrow:function (TARget, fields, frozen, RowIndex, RowData) {var opts = $.data (target, "DataGrid"). Options;  
    array var cc = [] for stitching strings;  
      if (frozen && opts.rownumbers) {//rowindex starts at 0 and the line number is displayed starting from 1, add 1 here.  
      var RowNumber = rowIndex + 1;  
      If paging, reset the line number if (opts.pagination) {RowNumber + = (opts.pagenumber-1) * Opts.pagesize According to the page number and the number of records per page; /** * First concatenation row number * Note DOM features, zencoding can be expressed as "td.datagrid-td-rownumber>div.datagrid-cell-rownumb ER "*/cc.push (" <td class=\ "datagrid-td-rownumber\" ><div class=\ "Datagrid-cell-rownumber\" > "+  
    RowNumber + "</div></td>");  
      for (var i = 0; i < fields.length i++) {var field = Fields[i];  
      var col = $ (target). DataGrid ("Getcolumnoption", field);  
        if (col) {var value = Rowdata[field]; Gets the user-defined cell style, which includes: cell value, current row data, current row index (starting from 0) var style = Col.styler? (Col.styler (Value, RowData, RowIndex) | |  
        "") : ""; If you are hiding a column and set display to none directly, set the style that the user wants var styler = Col.hidden? "Style=\" display:none; "+ style +" \ "": (Style?  
        "Style=\" "+ Style +" \ "": "" ";  
        Cc.push ("<td field=\" "+ field +" \ "+ Styler +" > ");  
        If the current column is the CK column reserved by the DataGrid component, the user-defined style is ignored, that is, the Styler property does not work with the CK columns that are brought by the DataGrid.  
        if (Col.checkbox) {var styler = "";  
          else {var styler = "";  
          Set the text alignment property if (col.align) {styler + = "Text-align: + col.align +;";} Sets whether the text wraps automatically when it is out of TD width (set to wrap if the line wraps) if (!opts.nowrap) {styler = "White-space:normal;height:aut o; ";} else {/** * is not a nowrap property is a true cell is definitely not going to be high, it depends on the autorowheight properties of the face * when Autorowheight 
             When the property is true, the height of the cell is based on the contents of the cell, mainly for media such as displaying pictures in the table.  
      */if (opts.autorowheight) {styler + = "height:auto;";      }}}//This place should pay special attention to, the Styler attribute of the front stitching is not acting on the TD label, but acting on the DIV tag under the TD.  
        Cc.push ("<div style=\" "+ Styler +" "");  
        If the CK column, increase the "Datagrid-cell-check" style class if (Col.checkbox) {Cc.push ("class=\" Datagrid-cell-check); //If it is a normal column, add the "Datagrid-cell-check" style class else {Cc.push ("class=\" Datagrid-cell + col  
        . Cellclass);  
        } cc.push (">"); /** * ck Lieguang Set class is not enough, when suddenly have to append an input is the real checkbox. 
         The ID of input is not set here, and only the Name property is set. 
         * We note that the formatter attribute also does not work with the Datagird's own CK column. */if (Col.checkbox) {Cc.push ("<input type=\" checkbox\ "name=\" "+ field +" \ "value=\" "+ (value != undefined?  
        Value: "") + "\/>"); 
           }//Normal column else {/** * If the cell has formatter, then put the formatter generated DOM into the Td>div 
           * In other words, Td>div is Buddha's ancestor of the Finger Mountain, and formatter is just a grandchild monkey, how the monkey changes somersaults, always in the hands of Buddha.*/if (col.formatter) {Cc.push (Col.formatter (value, RowData, RowIndex));  
          This is the simplest profile, and put the value directly into the Td>div.  
          else {Cc.push (value);  
        } cc.push ("</div>");  
      Cc.push ("</td>");  
    }//Return cell string, note that this function does not place the string inside the document stream.  
  Return Cc.join (""); 
   /** * Refreshes the row data with only one row index (starting from 0), and calls the Updaterow method, which is skipped directly here. * @param {DOM Object} target DataGrid instance's host table corresponding to the DOM objects * @param {number} RowIndex row index (starting from 0) * @return {undefined  
  Data not returned/Refreshrow:function (target, RowIndex) {This.updateRow.call (this, target, RowIndex, {}); /** * Refreshes the row data, which shoulders the same task as walking high, recalculate and layout the grid panel, etc. * @param {DOM Object} target DataGrid instance's host table corresponding to the DOM objects * @ param {Number} RowIndex row index (starting from 0) * @param {JSON object} row data * @return {undefined} did not return the data * * * Updaterow: function (target, rowIndex, row) {var opts = $.data (tarGet, "DataGrid"). Options;  
    var rows = $ (target). DataGrid ("GetRows");  
    $.extend (Rows[rowindex], row); var style = Opts.rowstyler?  
 
    Opts.rowStyler.call (target, RowIndex, Rows[rowindex]): "";  
      function Updatetablerow (frozen) {var fields = $ (target). DataGrid ("Getcolumnfields", frozen); This place looks for the grid's data body table (which may contain the corresponding body table for frozen columns and the main table for the normal column)//gettr This function, which I introduced on the blog, please refer to: http://www.easyui.info/archives/396.  
      HTML var tr = opts.finder.getTr (target, RowIndex, "body", (frozen? 1:2));  
      var checked = Tr.find ("Div.datagrid-cell-check Input[type=checkbox]"). Is (": checked"); This calls the Renderrow method to retrieve the current line's HTML string tr.html (this, target, fields, frozen, RowIndex, Rows[rowind  
      EX])); Tr.attr ("style", style | |  
      ""); When updating, leave the checkbox state (contains two layers of information: One has the CK column; the second is that the CK column was selected before) if (checked) {tr.find ("Div.datagrid-cell-check Input[typ  
      E=checkbox] "). _propattr (" Checked ", true);  
    }  
    }; Update frozen columns onThe expected row Updatetablerow.call (this, true);  
    Update row updatetablerow.call for normal columns (this, false);  
  Re-layout table panel $ (target). DataGrid ("Fixrowheight", RowIndex);  
    }, Insertrow:function (target, RowIndex, row) {var state = $.data (target, DataGrid);  
    Options var opts = state.options;  
    Document of DataGrid var dc = STATE.DC;  
    var data = State.data;  
    Compatible with invalid RowIndex, the default is to append if (RowIndex = = Undefined | | rowIndex = = NULL) to the last line {rowIndex = data.rows.length;  
    /Why not go with the above conditions and get together, it's a pain in the egg if (RowIndex > Data.rows.length) {rowIndex = Data.rows.length; /** * Move Rows * @param {Boolean} Frozen is frozen part * @return {undefined} no return value/F  
      Unction Movedownrows (frozen) {//1: Frozen column section; 2: Normal column part var whichbody = frozen? 1:2; for (var i = data.rows.length-1 i >= rowIndex i--) {var tr = opts.finder.getTr (target, I, ' body ', WHICHBO Dy);  
        Note that this place sets the "Datagrid-row-index" and "id" attributes of tr tr.attr ("Datagrid-row-index", i + 1);  
        TR.ATTR ("id", State.rowidprefix + "-" + Whichbody + "-" + (i + 1));  
          Calculate line number if (frozen && opts.rownumbers) {//Because rowindex starts at 0, and the TR to be inserted below the position to unify the move down, so the new line number is i+2  
          var RowNumber = i + 2;  
          If there is pagination, the line number plus pagination data if (opts.pagination) {RowNumber + = (opts.pagenumber-1) * opts.pagesize;  
        } tr.find ("Div.datagrid-cell-rownumber"). HTML (RowNumber);  
    }  
      }  
    };  
     /** * inserted, to plug in two places oh (if you are a man, you can have a slutty laugh) * @param {Boolean} Frozen is frozen part * @return {undefined} does not return a value  
      */function Doinsert (frozen) {var whichbody = frozen? 1:2;  
      This line of code, do not know what is, afraid of inserting too quickly and disarm early, so deliberately to delay the time?  
      var columnfields = $ (target). DataGrid ("Getcolumnfields", frozen); Constructs the id attribute of the newly inserted row var Trid = State.rowidprefix + "-" + Whichbody + "-" + RowIndex;  
      var tr = "<tr id=\" "+ Trid +" \ "class=\" datagrid-row\ "datagrid-row-index=\" "+ RowIndex +" \ "></tr>"; if (RowIndex >= data.rows.length) {//If there is already a record, insert tr if (data.rows.length) {/mm-hmm, ge TTR This usage is not much oh, did not pass in the row index, the third parameter is "last", casually the idea is to get the final line and then insert a line after the last line, note, here the back-type Opts.finder.getTr (t  
        Arget, "", "last", Whichbody). After (TR);  
          ///If the table is not yet recorded, generate the table and insert the TR else {var cc = frozen. Dc.body1:dc.body2; Cc.html ("<table cellspacing=\" 0\ "cellpadding=\" 0\ "border=\" 0\ "><tbody>" + tr + "</tbody></  
        Table> ");  
      Insert correctly before rowindex + 1, note that this is the front entry.  
      else {opts.finder.getTr (target, RowIndex + 1, "body", whichbody). before (TR);  
    }  
    };  
    Move Down frozen part Movedownrows.call (this, true);  
    Move down the normal column section Movedownrows.call (this, false); Insert Frozen Area DoinserT.call (this, true);  
    Insert Normal area doinsert.call (this, false);  
    Total plus 1 data.total = 1;  
    Maintain the data.rows array, this place is inserted into an array element of Data.rows.splice (RowIndex, 0, row);  
  Refresh, which contains the re-layout of the grid panel and other complex operations//inserts This is a very simple and enjoyable thing, but you have to bear the heavy cost of its consequences this.refreshRow.call (this, target, rowIndex); 
   /** * Delete Row interface * @param {DOM Object} target DataGrid instance's host table corresponding to the DOM objects * @param {number} RowIndex row index * @return {undefined} does not return a value */deleterow:function (target, RowIndex) {var state = $.data (target, "Datag  
    Rid ");  
    var opts = state.options;  
 
    var data = State.data;  
      function Moveuprows (frozen) {var whichbody = frozen? 1:2; for (var i = RowIndex + 1; i < data.rows.length i++) {var tr = opts.finder.getTr (target, I, ' body ', whichbod  
        y);  
        "Datagrid-row-index" and "id" attributes minus one tr.attr ("Datagrid-row-index", i-1); TR.ATTR ("id", State.rowidprefix + "-" + Whichbody + "-" + (i-1));  
        if (frozen && opts.rownumbers) {var rownumber = i;  
          if (opts.pagination) {RowNumber = = (opts.pagenumber-1) * opts.pagesize;  
        } tr.find ("Div.datagrid-cell-rownumber"). HTML (RowNumber);  
    }  
      }  
    };  
    Remove row Opts.finder.getTr (target, RowIndex). Remove ();  
    Move up Frozen Area moveuprows.call (this, true);  
    Move up the normal area moveuprows.call (this, false);  
    Record number minus one data.total-= 1;  
  Maintain data.rows data Data.rows.splice (RowIndex, 1); },/** * Default Onbeforerender event is empty * @param {DOM Object} target DataGrid instance's host table corresponding to the DOM objects * @param {array} r OWS the data to be inserted * @return {undefined} defaults to no return/onbeforerender:function (target, rows) {},/** * default Onaft 
   Errender hidden footer and check * @param {DOM Object} target DataGrid instance's host table corresponding to DOM objects * @return {undefined} does not return a value */onafterrender:function (target) {var opts = $.data (TargET, "DataGrid"). Options;  
      if (opts.showfooter) {var footer = $ (target). DataGrid ("Getpanel"). Find ("Div.datagrid-footer");  
    Footer.find ("Div.datagrid-cell-rownumber,div.datagrid-cell-check"). CSS ("visibility", "hidden");  }  
  }  
};