欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

插件

程序员文章站 2022-06-01 12:45:37
...

插件

数据可视化插件

HighCharts

1)Highcharts:线状图、柱状图、饼状图、混合图等

2)Highstock:证券类图形

3)Highmaps:世界地图

ECharts

散点图、折线图、柱状图、饼图、雷达图、箱线图、热力图、关系图、矩形树图、平行坐标图、桑基图、漏斗图、仪表盘。

K线图、

中国地图、

https://blog.csdn.net/akony/article/details/79530942

https://blog.csdn.net/zt_fucker/article/details/51114359

option = {

        tooltip : {

		    trigger: 'item',触发类型:item数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。axis坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。none什么都不触发。

		    formatter: ,提示框浮层内容格式器,支持字符串模板和回调函数两种形式。

			字符串模板 :

				模板变量有 {a}, {b}{c}{d}{e},分别表示系列名,数据名,数据值等。其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

				折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

				散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

				地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

				饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比) 

			回调函数 :

			    function (params) {

				return 

			    },

	},提示框

        legend: {

		

    },备注说明
        series : [
    	 {
    		type:line,折线/面积图
    		type:bar,柱状/条形图
    		type:pie,饼图
    			roseType : '',radius 扇区圆心角展现数据的百分比,半径展现数据的大小。area所有扇区圆心角相同,仅通过半径展现数据大小。
    			radius : ['40%', '90%'],饼图的半径,数组的第一项是内半径,第二项是外半径。
    			center : ['20%', '50%'],饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
    		type:scatter,散点气泡图
    		type:effectScatter,带有涟漪特效动画的散点(气泡)图
    		type:candlestick,K线图。股票
    		type:map,地图
    		type:lines,地图线图
    		type:graph,关系图
    		type:radar,雷达图
    		type:tree,树图
    		type:gauge,仪表盘
    		type:treemap,用面积的方式,便于突出展现出『树』的各层级中重要的节点。
    		type:sunburst,旭日图。在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。
    		
    	 }
    ],图表
    toolbox:{
    },工具栏
    color: [],颜色

};

FusionCharts

AmCharts

D3.js

https://blog.mn886.net/chenjianhua/show/773c07b3abce/index.html

AntV

页面截图并导出

canvas画布

html2canvas 插件

html2canvas 是一款js屏幕截图插件。该插件可以将当前屏幕的DOM元素按原样进行截图,通过canvas生成图片。

Flashcanvas 插件

ExplorerCanvas 插件

画布下载图片

canvas 元素用于在网页上绘制图形;canvas 元素本身是没有绘图能力的。所有HTML5 的canvas 元素使用JavaScript 在网页上绘制图像。
画布是一个矩形区域,可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
<canvas id="canvasId" width="" height=""></canvas>
<script type="text/javascript">
	var canvas =document.getElementById("canvasId");//寻找canvas 元素
	var Gc=canvas.getContext("2d");//创建canvas画布对象.当前唯一的合法值是 "2d",它指定了二维绘图.如									果未来支持 3D 绘图,允许传递一个 "3d" 字符串参数。
	Gc.fillStyle="#FF0000";//画布的背景颜色
	Gc.fillRect(x,y,width,height);//画布的位置和尺寸
	Gc.font("");//画布中字体大小
	Gc.fillText("text",x,y);//规定在画布上输出的文本
	
	var img=new Image([宽度],[高度]);//建立图像对象;相当于给浏览器缓存了一张图片。注:src 属性一定要									写到 onload 的后面,否则程序在 IE 中会出错
	img.src="flower.png"//需要绘画的图片
	drawImg.onload = function () {
		Gc.drawImage(img,x,y));//在画布上绘制图像。图片加载是异步的,在转换成 dataURL 前必须先确保图								片成功加载到.
		var dataURL = canvas.toDataURL([type, encoderOptions]);//画布上的图片转换成base64 编								码.type图片类型,支持格式:"image/jpeg","image/png"。										encoderOptions设置图片质量,取值0.0~1.0
		
		var link = document.createElement('a');//创建a链接下载元素
		link.href = dataURL;//把a链接下载地址设置为转换好的base64 编码
        link.download = filename;//下载文件的名称,例如new Date().getTime() + '.' + type;
		var event = document.createEvent('MouseEvents');//模拟一个鼠标事件
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, 								false, 0, null);
		link.dispatchEvent(event);
	};
	
</script>
/*页面导出开始*/
$(".pageDown1").click(function () {
		var targetDom = $("#tendencyChart");
		alert(1);
		//把需要导出的pdf内容clone一份,这样对它进行转换、微调等操作时才不会影响原来界面
		var copyDom = targetDom.clone();
		//新的div宽高跟原来一样,高度设置成自适应,这样才能完整显示节点中的所有内容(比如说表格滚动条中的内容)
		copyDom.width(targetDom.width() + "px");
		copyDom.height(targetDom.height() + "px");
	
		$('body').append(copyDom);//ps:这里一定要先把copyDom append到body下,然后再进行后续的glyphicons2canvas处理,不然会导致图标为空
	
		svg2canvas(copyDom);
		html2canvas(copyDom, {
			onrendered: function (canvas) {
				var imgData = canvas.toDataURL('image/jpeg');
				var img = new Image();
				img.src = imgData;
				//根据图片的尺寸设置pdf的规格,要在图片加载成功时执行,之所以要*0.225是因为比例问题
				img.onload = function () {
					//此处需要注意,pdf横置和竖置两个属性,需要根据宽高的比例来调整,不然会出现显示不完全的问题
					if (this.width > this.height) {
						var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
					} else {
						var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
					}
					doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
					//根据下载保存成不同的文件名
					doc.save('pdf_' + new Date().getTime() + '.pdf');
				};
				//删除复制出来的div
				copyDom.remove();
			},
			background: "#fff",
			//这里给生成的图片默认背景,不然的话,如果你的html根节点没设置背景的话,会用黑色填充。
			allowTaint: true //避免一些不识别的图片干扰,默认为false,遇到不识别的图片干扰则会停止处理html2canvas
		});
	});
/*页面导出结束*/
function svg2canvas(targetElem) {
	var svgElem = targetElem.find('svg');
	svgElem.each(function (index, node) {
		var parentNode = node.parentNode;
		//由于现在的IE不支持直接对svg标签node取内容,所以需要在当前标签外面套一层div,通过外层div的innerHTML属性来获取
		var tempNode = document.createElement('div');
		tempNode.appendChild(node);
		var svg = tempNode.innerHTML;
		var canvas = document.createElement('canvas');
		//转换
		canvg(canvas, svg);
		parentNode.appendChild(canvas);
	});
}

function glyphicons2canvas(targetElem, fontClassName, fontFamilyName) {
	var iconElems = targetElem.find('.' + fontClassName);
	iconElems.each(function (index, inconNode) {
		var fontSize = $(inconNode).css("font-size");
		var iconColor = $(inconNode).css("color");
		var styleContent = $(inconNode).attr('style');
		//去掉"px"
		fontSize = fontSize.replace("px", "");
		var charCode = getCharCodeByGlyphiconsName(iconName);
		var myCanvas = document.createElement('canvas');
		//把canva宽高各增加2是为了显示图标完整
		myCanvas.width = parseInt(fontSize) + 2;
		myCanvas.height = parseInt(fontSize) + 2;
		myCanvas.style = styleContent;
		var ctx = myCanvas.getContext('2d');
		//设置绘图内容的颜色
		ctx.fillStyle = iconColor;
		//设置绘图的字体大小以及font-family的名字
		ctx.font = fontSize + 'px ' + fontFamilyName;
		ctx.fillText(String.fromCharCode(charCode), 1, parseInt(fontSize) + 1);
		$(inconNode).replaceWith(myCanvas);
	});
}
//根据glyphicons/glyphicon图标的类名获取到对应的char code
function getCharCodeByGlyphiconsName(iconName) {
	switch (iconName) {
		case("glyphicons-resize-full"):
			return "0xE216";
		case ("glyphicons-chevron-left"):
			return "0xE225";
		default:
			return "";
	}
}

下拉框插件

searchableSelect

可搜索下拉框

 $("").searchableSelect();

树形控件

zTree

普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.ztree.exedit-3.5.min.js

ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割,分别对应基本功能、复选功能、编辑功能、显隐功能

zTree的配置采用Json格式,按照配置的类型分为view(可视界面相关配置)、data(数据相关配置)、check(复选框相关配置)、callback(各类事件的回调函数配置)、async(zTree异步加载配置),一下是我们经常会使用到的一些配置及说明,其他详细配置可以参考zTree官方API文档的详细介绍。

var setting = {
  view: {
  selectedMulti: true, //设置是否能够同时选中多个节点
  showIcon: true, //设置是否显示节点图标
  showLine: true, //设置是否显示节点与节点之间的连线
  showTitle: true, //设置是否显示节点的title提示信息
  },
  data: {
   simpleData: {
   enable: false, //设置是否启用简单数据格式(zTree支持标准数据格式跟简单数据格式,上面例子中是标准数据格式)
   idKey: "id", //设置启用简单数据格式时id对应的属性名称
   pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
  }
  },
  check:{
  enable: true  //设置是否显示checkbox复选框
  },
  callback: {
  onClick: onClick,  //定义节点单击事件回调函数
  onRightClick: OnRightClick, //定义节点右键单击事件回调函数
  beforeRename: beforeRename, //定义节点重新编辑成功前回调函数,一般用于节点编辑时判断输入的节点名称是否合法
  onDblClick: onDblClick, //定义节点双击事件回调函数
  onCheck: onCheck  //定义节点复选框选中或取消选中事件的回调函数
  },
  async: {
  enable: true,   //设置启用异步加载
  type: "get",   //异步加载类型:post和get
  contentType: "application/json", //定义ajax提交参数的参数类型,一般为json格式
  url: "/Design/Get",  //定义数据请求路径
  autoParam: ["id=id", "name=name"] //定义提交时参数的名称,=号前面标识节点属性,后面标识提交时json数据中参数的名称
  }
 };

zTree的事件回调部分,基本上每一个事件都对应一个beforeXXX事件,比如onClick事件对应有一个beforeOnClick事件,主要用于控制相关事件是否允许执行,如果before事件返回false,则取消执行对应相关事件。

zTree的每一个节点都是一个treeNode对象,treeNode对象经常用到的属性和方法如下:

treeNode: {
      name, //节点显示的文本
      checked, //节点是否勾选,ztree配置启用复选框时有效
      open, //节点是否展开
      icon, //节点的图标
      iconOpen, //节点展开式的图标
      iconClose, //节点折叠时的图标
      id,  //节点的标识属性,对应的是启用简单数据格式时idKey对应的属性名,并不一定是id,如果setting中定义的idKey:"zId",那么此处就是zId
      pId, //节点parentId属性,命名规则同id
      children, //得到该节点所有孩子节点,直接下级,若要得到所有下属层级节点,需要自己写递归得到
      isParent, //判断该节点是否是父节点,一般应用中通常需要判断只有叶子节点才能进行相关操作,或者删除时判断下面是有子节点时经常用到。
      getPath() //得到该节点的路径,即所有父节点,包括自己,此方法返回的是一个数组,通常用于创建类似面包屑导航的东西A-->B-->C 
  }

数据格式

标准数据格式

`var` `nodes = [`` ``{name: ``"父节点1"``, children: [`` ``{name: ``"子节点1"``},`` ``{name: ``"子节点2"``}`` ``]}``]; `

简单数据格式

var nodes = [
 {id:1, pId:0, name: "父节点1"},
 {id:11, pId:1, name: "子节点1"},
 {id:12, pId:1, name: "子节点2"}
]; 

注意zTree的默认配置是不启用简单数据格式,使用简单数据格式一定要在setting中进行简单数据格式的相关配置。

时间插件

datetimepicker

<script src="js/jquery-3.1.1.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>
<link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />

$('#datetimepicker').datetimepicker({
     value: ''      // 设置当前datetimepicker的值
     rtl: false,   // false   默认显示方式   true timepicker和datepicker位置变换
     format:    'Y/m/d H:i',     // 设置时间年月日时分的格式 如: 2016/11/15 18:00
     formatTime:    'H:i',       // 设置时间时分的格式
     formatDate:    'Y/m/d',     // 设置时间年月日的格式
     startDate: false,         // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',
     step: 10,                    // 设置时间时分的间隔
     closeOnDateSelect: false,   // true 设置datepicker可点击   false 设置datepicker不可点击 实际上可以双击
     closeOnTimeSelect: true,    // true 设置timepicker可点击   false 设置timepicker不可点击 
     closeOnWithoutClick: true,   // true 设置点击input可以隐藏datetimepicker   false 设置点击input不可以隐藏datetimepicker  
     closeOnInputClick: true,      // true 设置点击input可以隐藏datetimepicker   false 设置点击input不可以隐藏datetimepicker  (会有闪动 先隐藏 再显示)
     timepicker: true,            // true 显示timepicker   false 隐藏timepicker
     datepicker: true,            // true 显示datepicker   false 隐藏datepicker
     weeks: false,                // true 显示周数   false 隐藏周数
     defaultTime: false,            // 如果输入值为空 可用来设置默认显示时间 use formatTime format (ex. '10:00' for formatTime:   'H:i') 
     defaultDate: false,            // 如果输入值为空 可用来设置默认显示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')
     minDate: false,                // 设置datepicker最小的限制日期   如:2016/08/15
     maxDate: false,                // 设置datepicker最大的限制日期   如:2016/11/15
     minTime: false,                // 设置timepicker最小的限制时间   如:08:00
     maxTime: false,              // 设置timepicker最大的限制时间   如:18:00
     allowTimes: [],                // 设置timepicker显示的时间   如:allowTimes:['09:00','11:00','12:00','21:00']
     opened: false,              // false默认打开datetimepicker可关闭  true打开datetimepicker后不可关闭
     initTime: true,                // 设置timepicker默认时间   如:08:00
     inline: false,             // ture设置datetimepicker一直显示
     theme: '',                  // ture设置datetimepicker显示样式 如: 'dark'
     withoutCopyright: true,        // ture默认隐藏左下角'xdsoft.net'链接  false 显示左下角'xdsoft.net'链接 
     inverseButton: false,          // false 默认   true datepicker的上一月和下一月功能互换  timepicker的上下可点击按钮功能互换
     hours12: false,                // true设置12小时格式  false设置24小时格式
     next: 'xdsoft_next',           // 设置datepicker上一月按钮的样式
     prev : 'xdsoft_prev',        // 设置datepicker下一月按钮的样式
     dayOfWeekStart: 0,            // 设置默认第-列为周几 如:0 周日  1 周一
     parentID: 'body',            // 设置父级选择器
     timeHeightInTimePicker: 25,    // 设置timepicker的行高
     timepickerScrollbar: true,  // ture设置timepicker显示滑动条  false设置timepicker不显示滑动条
     todayButton: true,   // ture显示今天按钮  false不显示今天按钮   位置在datepicker左上角
     prevButton: true,    // ture显示上一月按钮  false不显示上一月按钮   位置在datepicker左上角
     nextButton: true,    // ture显示下一月按钮  false不显示下一月按钮   位置在datepicker又上角
     scrollMonth: true,  // ture 设置datepicker的月份可以滑动  false设置datepicker的月份不可以滑动
     lazyInit: false,  // 翻译: 初始化插件发生只有当用户交互。大大加速插件与大量的领域的工作
     mask: false,                  // 使用输入掩码。真正的-自动生成一个字段的“格式”的面具,从0到9的数字,设置为值的最高可能的数字。例如:第一个小时的数字不能大于2,而第一位数字不能大于5  如:{mask:'9999/19/39 29:59',format:'Y/m/d H:i'}
     validateOnBlur: true,        // 失去焦点时验证datetime值输入,。如果值是无效的datetime,然后插入当前日期时间值
     yearStart: 1950,              // 设置最小的年份   
     yearEnd: 2050,              // 设置最大的年份
     monthStart: 0,              // 设置最小的月份
     monthEnd: 11,                // 设置最大的月份
     roundTime: 'round',          // 设置timepicker的计算方式  round四舍五入 ceil向上取整 floor向下取整
     allowDateRe : null,            // 设置正则表达式检查日期 如:{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
     disabledDates : [],            // 设置不可点击的日期  如:disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']
     disabledWeekDays: [],          // 设置不可点击的星期  如:disabledWeekDays:[0,3,4]
     yearOffset: 0,              // 设置偏移年份  如:2 代表当前年份加2  -2  代表当前年份减2
     beforeShowDay: null,          // 显示datetimepicker之前可调用的方法  {beforeShowDay:function(d) {console.log("bsd"); } }
     enterLikeTab: true,            // tab按键均可使datetimepicker关闭  true点击回车键可使datetimepicker关闭 false点击回车键不可使datetimepicker关闭 
     showApplyButton: false      // 相当于确定按钮  true显示  false隐藏
});

表格插件

DataTables

网址:http://www.datatables.net/

var oTable;
function dataTab(){
	var url="";
	if(oTable){
		oTable.fnDestroy();
	}
	oTable = $("选择器").dataTable({
		"bPaginate": true,
    	"bLengthChange": true,
    	"bFilter": false,
    	"bInfo": false,
		"iDisplayLength":20,
    	"sPaginationType":"full_numbers",
    	"sAjaxSource": url,
		"bServerSide": true,
    	"bProcessing": false,
    	"bSort": false,
		"bAutoWidth":false,
        "aaSorting": [[$iSortCol_0,'$sSortDir_0']],
		"aoColumnDefs":[
            { "bSortable": false,"aTargets": [ 0,2,3,11 ] },
            { "bVisible": false, "aTargets": hiddenCols}
         ],
    	"oLanguage": {
          	"sLengthMenu": '<select id="lengthSel" style="display:none">'+
            '<option value="20">20</option>'+
            '<option value="30">30</option>'+
            '<option value="40">40</option>'+
            '<option value="50">50</option>'+
            '<option value="100">100</option>'+
            '<option value="-1">All</option>'+
            '</select>'
    	},
		"fnDrawCallback": function (oSettings) {  
           
        },
		"fnServerData": function ( sSource, aoData, fnCallback){
			jQuery.ajax({
    				"dataType": 'json', 
    				"type": "POST", 
    				"url": sSource, 
    				"data": aoData, 
    				"success":function(json){
						$("#totalRecords").html(data.iTotalRecords);
						fnCallback(json);
						/*判断刷新前是否选中,若刷新前已选中则刷新后仍是选中状态*/
						for(var i=0;i<selArr.length;i++){
                			$("#chk"+selArr[i]).prop("checked",true);
                		}
    					/*判断是否全部选中*/
    					var flag = true;
    					$('input[type="checkbox"][class="checkRule"]').each(function(){
                            var check2Flag = $(this).prop("checked") ;
                            if( check2Flag == false || check2Flag == undefined){
                                flag = false;
                            }
                        });
    					if(selArr.length == 0){
    						flag = false;
    					}
    					$('input[name="box-all"]').prop("checked",flag);
				}
			});
		}
	});
	refreshTable();
};
//清除表格行数据前的勾选框选中项
function removalChecked(){
	$(".checkRule").each(function(){
		$(this).prop("checked",false);
    });
}
//刷新表格
var selArr = new Array();
function refreshTable(){
    selArr = new Array();
    $(".checkRule").each(function(){
        if($(this).prop("checked")){
            selArr.push($(this).attr("ruleId"));
        }
    });
    window.setTimeout(function(){
        table.fnDraw();
        refreshTable();
    }, 5000);
}

要被dataTable处理的table对象,必须有thead与tbody。

属性名称 取值范围 解释
bAutoWidth true or false, default true 是否自动计算表格各列宽度
bDeferRender true or false, default false 用于渲染的一个参数
bFilter true or false, default true 开关,是否启用客户端过滤功能
bInfo true or false, default true 开关,是否显示表格的一些信息
bJQueryUI true or false, default false 是否使用jquery ui themeroller的风格
bLengthChange true or false, default true 开关,是否显示一个每页长度的选择条(需要分页器支持)
bPaginate true or false, default true 开关,是否显示(使用)分页器
bProcessing true or false, defualt false 开关,以指定当正在处理数据的时候,是否显示“正在处理”这个提示信息
bScrollInfinite true or false, default false 开关,以指定是否无限滚动(与sScrollY配合使用),在大数据量的时候很有用。当这个标志为true的时候,分页器就默认关闭
bSort true or false, default true 开关,是否让各列具有按列排序功能
bSortClasses true or false, default true 开关,指定当当前列在排序时,是否增加classes ‘sorting_1’, ‘sorting_2’ and ‘sorting_3’,打开后,在处理大数据时,性能有所损失
bStateSave true or false, default false 开关,是否打开客户端状态记录功能。这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的
sScrollX ‘disabled’ or ‘100%’ 类似的字符串 是否开启水平滚动,以及指定滚动区域大小
sScrollY ‘disabled’ or ‘200px’ 类似的字符串 是否开启垂直滚动,以及指定滚动区域大小
选项
aaSorting array array[int,string], 如[], [[0,‘asc’], [0,‘desc’]] 指定按多列数据排序的依据
aaSortingFixed 同上 同上。唯一不同点是不能被用户的自定义配置冲突
aLengthMenu default [10, 25, 50, 100],可以为一维数组,也可为二维数组,比如:[[10, 25, 50, -1], [10, 25, 50, “All”]] 这个为选择每页的条目数,当使用一个二维数组时,二维层面只能有两个元素,第一个为显示每页条目数的选项,第二个是关于这些选项的解释
aoSearchCols default null, 类似:[null, {“sSearch”: “My filter”}, null,{“sSearch”: “1”, “bEscapeRegex”: false}] 给每个列单独定义其初始化搜索列表特性(这一块还没搞懂)
asStripClasses default [‘odd’, ‘even’], 比如[‘strip1’, ‘strip2’, ‘strip3’] 指定要被应用到各行的class风格,会自动循环
bDestroy true or false, default false 用于当要在同一个元素上执行新的dataTable绑定时,将之前的那个数据对象清除掉,换以新的对象设置
bRetrieve true or false, default false 用于指明当执行dataTable绑定时,是否返回DataTable对象
bScrollCollapse true or false, default false 指定适当的时候缩起滚动视图
bSortCellsTop true or false, default false (未知的东东)
iCookieDuration 整数,默认7200,单位为秒 指定用于存储客户端信息到cookie中的时间长度,超过这个时间后,自动过期
iDeferLoading 整数,默认为null 延迟加载,它的参数为要加载条目的数目,通常与bServerSide,sAjaxSource等配合使用
iDisplayLength 整数,默认为10 用于指定一屏显示的条数,需开启分页器
iDisplayStart 整数,默认为0 用于指定从哪一条数据开始显示到表格中去
iScrollLoadGap 整数,默认为100 用于指定当DataTable设置为滚动时,最多可以一屏显示多少条数据
oSearch 默认{ “sSearch”: “”, “bRegex”: false, “bSmart”: true } 又是初始时指定搜索参数相关的,有点复杂,没搞懂目前
sAjaxDataProp 字符串,default ‘aaData’ 指定当从服务端获取表格数据时,数据项使用的名字
sAjaxSource URL字符串,default null 指定要从哪个URL获取数据
sCookiePrefix 字符串,default ‘SpryMedia_DataTables_’ 当打开状态存储特性后,用于指定存储在cookies中的字符串的前缀名字
sDom default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) 这是用于定义DataTable布局的一个强大的属性,另开专门文档来补充说明吧
sPaginationType ‘full_numbers’ or ‘two_button’, default ‘two_button’ 用于指定分页器风格
sScrollXInner string default ‘disabled’ 又是水平滚动相关的,没搞懂啥意思

回调函数

回调函数名称 参数 返回值 默认 功能
fnCookieCallback 1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set string: cookie formatted string (which should be encoded by using encodeURIComponent()) null 当每次cookies改变时,会触发这个函数调用
fnDrawCallback 在每次table被draw完后调用
fnFooterCallback 1.node : “TR” element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用于在每次重画的时候修改表格的脚部
fnFormatNumber 1.int : number to be formatted String : formatted string for DataTables to show the number 有默认的 用于在大数字上,自动加入一些逗号,分隔开
fnHeaderCallback 1.node : “TR” element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用于在每次draw发生时,修改table的header
fnInfoCallback 1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it’s own rules string: The string to be displayed in the information element. 用于传达table信息
fnInitComplete 1.object:oSettings - DataTables settings object 表格初始化完成后调用
fnPreDrawCallback 1.object:oSettings - DataTables settings object Boolean 用于在开始绘制之前调用,返回false的话,会阻止draw事件发生;返回其它值,draw可以顺利执行
fnRowCallback 1.node : “TR” element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering) node : “TR” element for the current row 当创建了行,但还未绘制到屏幕上的时候调用,通常用于改变行的class风格
fnServerData 1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page. void $.getJSON 用于替换默认发到服务端的请求操作
fnStateLoadCallback 1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code. Boolean - false if the state should not be loaded, true otherwise 在cookies中的数据被加载前执行,可以方便地修改这些数据
fnStateSaveCallback 1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie. String - the full string that should be used to save the state 在状态数据被存储到cookies前执行,可以方便地做一些预操作
//重绘方法。true会回到表格的初始状态,例如回到第一页,false只是重新加载当前页
dataTable.fnDraw(false);
//销毁方法。true会删除表格元素,而false不会,它只是销毁dataTable对象
dataTable.fnDestroy(false);
//换页方法,可以跳转到指定页。可选参数有"first", "previous", "next" , "last",或者是一个整数,0是第一页
dataTable.fnPageChange(0);

文件上传下载

SmartUpload

以jar包形式出现,需要添加到classpath或tomcat的lib文件夹下。

对于SmartUpload,使用较方便,但是官方已经不能下载。

<fomn action="" metho="post" enctype="multipart/form-data'> 
	文件:<input type="file">
	文件:<input type="file">
	备注:<input type="text" name="text_name">
	<input type="submit" value="上传">
    <input type="reset" value="重置">
</form>
import org.lxh.sniart.*;
import cn.mldn.lxh.util.lPTimeStamp;

SmartUpload smart = new SmartUpload();
smart.initialize(pageContext);
smart.upload();

//保存文件
smart.save("上传文件保存目录");
//当上传了同样名称的文件时将会出现覆盖的情况
String name = smart.getRequest().getParameter("text_name"); 
IPTimeStamp its = new IPTtmeStamp(request.getRemoteAddr());
//批量上传文件
for(int i=0;i<smart.getFiles().getCount();i++){
    String ext = smart.getFiles().getFile(i).getFileExt(); // 取得文件后綴
    String fileName = its.getIPTimeRand() +"."+ ext; // 拼凑文件名称
    smart.getFiles().getFile(i).saveAs(getServietContext().getRealPath("/")
    + "upload" + java.io.Fite.separator + fileName);
}

//如果要上传文件则表单必须封装,但是当一个表单使用了enctype封装后,其他的非表单控件的内容就无法通过request的内置对象取得,此时必须通过SmartUpload类中提供的getRequest()方法取得全部的请求参数,然后通过getParameter()获取非表单控件的内容。
String name = smart.getRequest().getParameter("text_name");
import java.text.SimpleDateFormat;
import java.util.Random;
import java.util.Date;

/**
 * 文件自动命名
 */
public class IPTimeStamp {
    private SimpleDateFormat sdf = null;
    private String ip = null;

    public IPTimeStamp() {
    }

    public IPTimeStamp(String ip) {
        this.ip = ip;
    }

    /**
     * ip+时间戳+三位随机数
     * @return
     */
    public String getIPTimeRand() {
        StringBuffer buf = new StringBuffer();
        if (this.ip != null) {
            String s[] = this.ip.split("\\.");
            for (int i = 0; i < s.length; i++) {
                buf.append(this.addZero(s[i], 3));
            }
        }
        buf.append(this.getTimeStamp());
        Random r = new Random();
        for (int i = 0; i < 3; i++) {
            buf.append(r.nextInt(10));
        }
        return buf.toString();
    }

    private String addZero(String str, int len) {
        StringBuffer s = new StringBuffer();
        s.append(str);
        while (s.length() < len) {
            s.insert(0, "0");
        }
        return s.toString();
    }

    public String getDate() {
        this.sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS");
        return this.sdf.format(new Date());
    }

    public String getTimeStamp() {
        this.sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
        return this.sdf.format(new Date());
    }
}

FileUpload

以jar包形式出现,需要添加到classpath或tomcat的lib文件夹下。

注意:此包与common-io包是相互依赖的,因此需要同时存放。


  1. 0-9 ↩︎

相关标签: web