`
rhodian
  • 浏览: 71106 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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字符与界面元素的对应关系图:

     

 

    最后再附上代码一份。

  • 大小: 78.3 KB
  • 大小: 51.2 KB
分享到:
评论

相关推荐

    jquery.dataTable.js 使用详解 一、基础配置

    《jQuery.dataTables.js 使用详解——一、基础配置》 在网页开发中,数据展示是一个重要的环节,而jQuery.dataTables.js插件为高效、美观的数据表格呈现提供了强大的解决方案。本篇将深入探讨该插件的基础配置,...

    jquery.dataTable.js

    jquery.dataTable.js资源下载,基于jquery的前端表格插件,表格插件下载,datatable下载

    jquery的DataTable

    **jQuery的DataTable插件详解** jQuery的DataTable是一个强大的、高度可配置的JavaScript库,用于将HTML表格转换为功能丰富的数据网格。它提供了丰富的排序、过滤、分页、搜索和显示功能,大大增强了网页中表格的...

    jquery.dataTables.min.js

    避免由于session失效,引发DataTable向后台发送ajax请求时弹窗报错而不是重定向到指定页面,详情https://blog.csdn.net/xssl_CSDN/article/details/83660015

    Jquery dataTable中文API中文文档

    此中文文档详细介绍了如何在ASP.NET MVC项目中集成并使用JQuery DataTable。 #### 二、安装与配置 1. **下载地址**: 官方下载地址为[http://www.datatables.net/](http://www.datatables.net/)。 2. **引入CSS样式*...

    vue3.0+typescript集成jquery、bootstrap、jquery.dataTable插件、echart

    vue3.0+typescript通过npm管理包,然后导入ts中进行集成jquery、bootstrap、jquery.dataTable插件、echart,具体界面请看:https://blog.csdn.net/sunxiaoju/article/details/109401288

    jquery datatables 所需文件 官方下载的

    &lt;script src="https://code.jquery.com/jquery-3.5.1.min.js"&gt;&lt;/script&gt; &lt;!-- 引入DataTables --&gt; &lt;script type="text/javascript" charset="utf8" src="js/DataTables-1.10.4/js/jquery.dataTables.js"&gt; ``` 然后...

    Jquery dataTable显示指定列

    在本文中,我们将深入探讨如何使用Jquery dataTable插件来显示指定列,特别是在处理隐藏列的情况下。`Jquery dataTable` 是一个强大且功能丰富的JavaScript库,用于处理HTML表格,提供了排序、过滤、分页等特性,极...

    JQuery.DataTable

    **jQuery DataTables 知识详解** jQuery DataTables 是一个强大且功能丰富的JavaScript库,它扩展了HTML表格,为数据展示提供了高效、灵活且强大的工具。这个插件深受开发者喜爱,因为它不仅内置了分页功能,还支持...

    JQuery DataTable 插件 V2.0

    &lt;script src="https://code.jquery.com/jquery-3.5.1.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"&gt; ...

    JQuery DataTable中文文档API.chm

    **jQuery DataTables中文文档API详解** `jQuery DataTables` 是一个功能强大的JavaScript库,用于将HTML表格转换为高度可配置且交互式的数据展示工具。它提供了丰富的搜索、排序、过滤和分页功能,使得在网页上处理...

    jquery 插件DataTable 最新版本下载

    **jQuery插件DataTable详解** DataTable是一款非常流行的jQuery插件,专为HTML表格提供高级功能,如数据排序、过滤、分页以及自定义显示等。它极大地增强了网页中的表格交互性,使得用户能够更加便捷地管理和操作...

    jquery datatable 单元格合并

    本篇将详细介绍如何使用jQuery DataTables结合JavaScript来实现相同内容单元格的动态合并。 首先,我们需要理解jQuery DataTables的基本用法。它基于jQuery库,可以通过简单的配置和API来创建高度交互的表格。要...

    jQuery.datatable

    DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any ...

    jQuery插件DataTable使用方法详解(.Net平台)

    首先,要使用DataTable,需要确保你的项目包含了jQuery库以及DataTable的核心JavaScript文件`jquery.dataTables.min.js`。jQuery是DataTable的基础,它提供了DOM操作和事件处理等核心功能。在HTML页面中,你需要引入...

    jquery.dataTables包.rar

    《jQuery DataTables插件详解与应用》 jQuery DataTables 是一款功能强大的JavaScript表格插件,它基于jQuery库,能够将HTML表格转化为具有高级特性的数据展示工具,如排序、搜索、分页等。"jquery.dataTables包....

    jquery.jqprint-0.3.js的使用demo.zip

    《jQuery.jqprint-0.3.js的使用详解与示例演示》 在现代Web开发中,打印功能是一项不可或缺的功能,使得用户能够将网页内容保存为纸质形式。jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来扩展其功能,...

    jQuery.datatables.js插件用法及api实例详解

    通过`sDom`属性可以控制页面上元素的布局和显示顺序。例如: ```javascript $(document).ready(function(){ $('#example').dataTable({ "sDom": '&lt;"top"fli&gt;rt&lt;"bottom"p&gt;&lt;"clear"&gt;' }); }); ``` `sDom`的值由...

Global site tag (gtag.js) - Google Analytics