jquery.dataTable.js 使用详解二、sDom布局源码解析

ゝ一纸荒年。 2021-06-26 16:06 669阅读 0赞

对`dataTable`是怎么利用`aDom`实现布局的，提出了疑问。由于很久以前看的源码，当时也没有跟他解释的很清楚，于是又重新梳理了一下源码，在这里做一下笔记。

首先看一下示例的实际效果：  
![在这里插入图片描述][20181022222637477]

源码中实现布局的方法是`_fnAddOptionsHtml()`，形参是`oSettings`。

下面看`_fnAddOptionsHtml()`源码：

function _fnAddOptionsHtml ( oSettings )  
        {   
            /* * Create a temporary, empty, div which we can later on replace with what we have generated * we do it this way to rendering the 'options' html offline - speed :-) * 作者说：这里先创建一个临时的空div，后面会被完整的内容替换掉 */  
            var nHolding = $('<div></div>')[0];  
            /* * 把上面生成的临时div插入到绑定dataTable插件的元素前面 * 这里的oSettings.nTable，追溯源码，发现是this，也就是绑定插件的对象 * 例如：$("#mainTable").dataTable({....}); oSettings.nTable 就是 id为mainTable的 */  
            oSettings.nTable.parentNode.insertBefore( nHolding, oSettings.nTable );  
            /* * All DataTables are wrapped in a div * 作者说：创建一个div作为根节点，将所有的元素都包裹进去，以<table>的id拼接'_wrapper' */  
            oSettings.nTableWrapper = $('<div id="'+oSettings.sTableId+'_wrapper" class="'+oSettings.oClasses.sWrapper+'" role="grid"></div>')[0];  
            oSettings.nTableReinsertBefore = oSettings.nTable.nextSibling;  
          
            /* Track where we want to insert the option * 将oSettings.nTableWrapper赋给变量nInsertNode，跟踪我们想插入的元素 */  
            var nInsertNode = oSettings.nTableWrapper;  
              
            /* Loop over the user set positioning and place the elements as needed */  
            /* * 前方高能，重头戏开始了！！！ * 分割aDom，得到字符数组 * 示例中我们的aDom属性值为<lf>rt<lpi><"clear"> */  
            var aDom = oSettings.sDom.split('');  
            var nTmp, iPushFeature, cOption, nNewNode, cNext, sAttr, j;  
            /* * 迭代字符数组 */  
            for ( var i=0 ; i<aDom.length ; i++ )  
            {   
                iPushFeature = 0;  
                cOption = aDom[i];  
                /* * 如果当前字符是'<'执行以下操作 */  
                if ( cOption == '<' )  
                {   
                    /* New container div * 创建一个空div */  
                    nNewNode = $('<div></div>')[0];  
                      
                    /* Check to see if we should append an id and/or a class name to the container * 看看是否要给div添加id属性或者class属性 * 如果<符号后面是'或"就要给div添加属性 */  
                    cNext = aDom[i+1];  
                    if ( cNext == "'" || cNext == '"' )  
                    {   
                        sAttr = "";  
                        j = 2;  
                        while ( aDom[i+j] != cNext )  
                        {   
                            sAttr += aDom[i+j];  
                            j++;  
                        }  
                          
                        /* Replace jQuery UI constants */  
                        if ( sAttr == "H" )  
                        {   
                            sAttr = oSettings.oClasses.sJUIHeader;  
                        }  
                        else if ( sAttr == "F" )  
                        {   
                            sAttr = oSettings.oClasses.sJUIFooter;  
                        }  
                          
                        /* The attribute can be in the format of "#id.class", "#id" or "class" This logic * breaks the string into parts and applies them as needed * 如果字符串里面有#号，就给div加上id属性，如果字符串里面有.号，就给div加上class属性 */  
                        if ( sAttr.indexOf('.') != -1 )  
                        {   
                            var aSplit = sAttr.split('.');  
                            nNewNode.id = aSplit[0].substr(1, aSplit[0].length-1);  
                            nNewNode.className = aSplit[1];  
                        }  
                        else if ( sAttr.charAt(0) == "#" )  
                        {   
                            nNewNode.id = sAttr.substr(1, sAttr.length-1);  
                        }  
                        else  
                        {   
                            nNewNode.className = sAttr;  
                        }  
                          
                        i += j; /* Move along the position array */  
                    }  
                    /* * 将处理完成后的div放入根节点，并对根节点变量重新赋值为新创建的div */  
                    nInsertNode.appendChild( nNewNode );  
                    nInsertNode = nNewNode;  
                }  
                else if ( cOption == '>' )  
                {   
                    /* End container div * 这里标识一个div的闭合 */  
                    nInsertNode = nInsertNode.parentNode;  
                }  
                else if ( cOption == 'l' && oSettings.oFeatures.bPaginate && oSettings.oFeatures.bLengthChange )  
                {   
                    /* Length * 如果当前字符为l，则表示为dataTable增加可以操作每页显示行数的下来框 * 前置条件为bLengthChange和bPaginate配置为true，即允许分页并且允许用户选择每页显示行数 * 将在_fnFeatureHtmlFilter函数中创建class="mainTable_length"的元素，并且放入上面创建的div中 */  
                    nTmp = _fnFeatureHtmlLength( oSettings );  
                    iPushFeature = 1;  
                }  
                else if ( cOption == 'f' && oSettings.oFeatures.bFilter )  
                {   
                    /* Filter * 如果当前字符为f，则表示为dataTable增加跨行搜索框 * 前置条件为bFilter配置为true，即启用内置搜索，可跨行搜索 * 将在_fnFeatureHtmlFilter函数中创建class="dataTables_filter"的元素，并且放入上面创建的div中 */  
                    nTmp = _fnFeatureHtmlFilter( oSettings );  
                    iPushFeature = 1;  
                }  
                else if ( cOption == 'r' && oSettings.oFeatures.bProcessing )  
                {   
                    /* pRocessing * 如果当前字符为r，则表示为dataTable增加数据加载进度效果 * 前置条件为bProcessing配置为true，即显示加载时进度条 * 将在_fnFeatureHtmlProcessing函数中创建class="dataTables_processing"的元素，并且放入上面创建的div中 */  
                    nTmp = _fnFeatureHtmlProcessing( oSettings );  
                    iPushFeature = 1;  
                }  
                else if ( cOption == 't' )  
                {   
                    /* Table * 这就是table实体了，将在_fnFeatureHtmlTable函数中创建table元素，table的属性、样式将沿用html代码中的定义 */  
                    nTmp = _fnFeatureHtmlTable( oSettings );  
                    iPushFeature = 1;  
                }  
                else if ( cOption ==  'i' && oSettings.oFeatures.bInfo )  
                {   
                    /* Info * 如果当前字符为i，则表示为dataTable增加表格相关信息，例如翻页信息等。 * 前置条件为bInfo配置为true，即显示表格相关信息 * 将在_fnFeatureHtmlInfo函数中创建class="dataTables_info"的元素，并且放入上面创建的div中 * */  
                    nTmp = _fnFeatureHtmlInfo( oSettings );  
                    iPushFeature = 1;  
                }  
                else if ( cOption == 'p' && oSettings.oFeatures.bPaginate )  
                {   
                    /* Pagination * 如果当前字符为p，则表示为dataTable增加分页功能。 * 前置条件为bPaginate配置为true，即开启分页功能 * 将在_fnFeatureHtmlPaginate函数中创建分页所需的元素，并且放入上面创建的div中 * */  
                    nTmp = _fnFeatureHtmlPaginate( oSettings );  
                    iPushFeature = 1;  
                }  
                else if ( DataTable.ext.aoFeatures.length !== 0 )  
                {   
                    /* Plug-in features */  
                    var aoFeatures = DataTable.ext.aoFeatures;  
                    for ( var k=0, kLen=aoFeatures.length ; k<kLen ; k++ )  
                    {   
                        if ( cOption == aoFeatures[k].cFeature )  
                        {   
                            nTmp = aoFeatures[k].fnInit( oSettings );  
                            if ( nTmp )  
                            {   
                                iPushFeature = 1;  
                            }  
                            break;  
                        }  
                    }  
                }  
                  
                /* Add to the 2D features array */  
                if ( iPushFeature == 1 && nTmp !== null )  
                {   
                    if ( typeof oSettings.aanFeatures[cOption] !== 'object' )  
                    {   
                        oSettings.aanFeatures[cOption] = [];  
                    }  
                    oSettings.aanFeatures[cOption].push( nTmp );  
                    nInsertNode.appendChild( nTmp );  
                }  
            }  
              
            /* Built our DOM structure - replace the holding div with what we want * 将上面的临时div换成我们最后生成的div */  
            nHolding.parentNode.replaceChild( oSettings.nTableWrapper, nHolding );  
        }

最后附上一张，`aDom`字符与界面元素的对应关系图：  
![在这里插入图片描述][20181022223415374]

[20181022222637477]: /images/20210626/ee7b84071292452ba237aa4785059631.png
[20181022223415374]: /images/20210626/468c7b30ce20466686d0f42294d86ad8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，669人围观）

还没有评论，来说两句吧...

相关阅读

相关边界布局BorderLayout源码解析

边界布局BorderLayout 代码示例： package Test; //边界布局 BorderLayout //尽可能充满整个所在的容器！

雨点打透心脏的1/2处/ 2023年10月03日 10:39/ 0 赞/ 30 阅读

相关 AOP源码解析二，代理属性解读源码解析

前言会更新AOP 系列源码文章主要更新目录 ![format_png][] 篇幅问题会分章程更新创建代理 AbstractAutoProxyCreator

拼搏现实的明天。/ 2023年09月24日 21:27/ 0 赞/ 163 阅读

相关 springboot(二)自动化配置源码解析

@EnableAutoConfiguration 是开启自动配置的注解，在创建的 SpringBoot 项目中并不能直接看到此注解，它是由组合注解@SpringBoo

秒速五厘米/ 2022年12月13日 04:33/ 0 赞/ 183 阅读

相关 spring源码学习笔记（二）FactoryBean的使用和源码解析

spring源码学习笔记（二）FactoryBean的使用和源码解析每天多学一点点~ 话不多说，这就开始吧… 文章目录 spring源码学习笔记

短命女/ 2022年10月30日 10:28/ 0 赞/ 186 阅读

相关 HashMap源码解析

一、HashMap概述　　HashMap基于哈希表的 Map 接口的实现。此实现提供所有可选的映射操作，并允许使用 null 值和 null 键。（除了不同步

不念不忘少年蓝@/ 2022年07月12日 14:07/ 0 赞/ 370 阅读

相关 android inflater详解以及源码解析

1.在开发中，我们经常需要使用到LayoutInflater，通过该对象的Inflate()方法，将一个layout布局文件实例化为view 2.inflate（）方法的使用

今天药忘吃喽~/ 2022年06月04日 05:36/ 0 赞/ 175 阅读

相关 HashMap源码解析

来不及整理电子版，先献丑把笔记本拍几张，随后整理。有人问，什么年代了，还手写笔记，哈哈，如果不亲自手写一遍，我是真心记不住。很多API不用知道工作原理一样可以使用，所以

本是古典何须时尚/ 2022年05月10日 03:50/ 0 赞/ 382 阅读

相关 HashMap源码解析

以下针对JDK 1.8版本中的HashMap进行分析。概述哈希表基于`Map`接口的实现。此实现提供了所有可选的映射操作，并且允许键为`null`，值也为`null

太过爱你忘了你带给我的痛/ 2022年04月05日 10:13/ 0 赞/ 487 阅读

相关 hashMap源码解析

源码来自jdk：1.8，和其他jdk版本可能有少许差异。一.hashMap的实现原理 hashMap底层是一个有Node组成的数组，每个Node都有一个key

冷不防/ 2022年03月25日 06:58/ 0 赞/ 452 阅读

相关 jquery.dataTable.js 使用详解二、sDom布局源码解析

对`dataTable`是怎么利用`aDom`实现布局的，提出了疑问。由于很久以前看的源码，当时也没有跟他解释的很清楚，于是又重新梳理了一下源码，在这里做一下笔记。首先看一

ゝ一纸荒年。/ 2021年06月26日 16:06/ 0 赞/ 670 阅读