jquery.dataTable.js 使用详解 二、sDom布局源码解析
接着上篇讲,上一篇发出来以后,有朋友看过以后,对dataTable是怎么利用aDom实现布局的,提出了疑问。由于很久以前看的源码,当时也没有跟他解释的很清楚,于是又重新梳理了一下源码,在这里做一下笔记。
首先看一下示例的实际效果:
源码中实现布局的方法是_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字符与界面元素的对应关系图:
最后再附上代码一份。