插件

于 2021-03-08 20:59:58 发布
阅读量189 收藏
点赞数
文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42607437/article/details/114482450
版权

文章目录

插件

数据可视化插件

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。

属性名称取值范围解释
bAutoWidthtrue or false, default true是否自动计算表格各列宽度
bDeferRendertrue or false, default false用于渲染的一个参数
bFiltertrue or false, default true开关，是否启用客户端过滤功能
bInfotrue or false, default true开关，是否显示表格的一些信息
bJQueryUItrue or false, default false是否使用jquery ui themeroller的风格
bLengthChangetrue or false, default true开关，是否显示一个每页长度的选择条（需要分页器支持）
bPaginatetrue or false, default true开关，是否显示（使用）分页器
bProcessingtrue or false, defualt false开关，以指定当正在处理数据的时候，是否显示“正在处理”这个提示信息
bScrollInfinitetrue or false, default false开关，以指定是否无限滚动（与sScrollY配合使用），在大数据量的时候很有用。当这个标志为true的时候，分页器就默认关闭
bSorttrue or false, default true开关，是否让各列具有按列排序功能
bSortClassestrue or false, default true开关，指定当当前列在排序时，是否增加classes ‘sorting_1’, ‘sorting_2’ and ‘sorting_3’，打开后，在处理大数据时，性能有所损失
bStateSavetrue or false, default false开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的
sScrollX‘disabled’ or ‘100%’ 类似的字符串是否开启水平滚动，以及指定滚动区域大小
sScrollY‘disabled’ or ‘200px’ 类似的字符串是否开启垂直滚动，以及指定滚动区域大小
–––
选项
aaSortingarray array[int,string], 如[], [[0,‘asc’], [0,‘desc’]]指定按多列数据排序的依据
aaSortingFixed同上同上。唯一不同点是不能被用户的自定义配置冲突
aLengthMenudefault [10, 25, 50, 100]，可以为一维数组，也可为二维数组，比如：[[10, 25, 50, -1], [10, 25, 50, “All”]]这个为选择每页的条目数，当使用一个二维数组时，二维层面只能有两个元素，第一个为显示每页条目数的选项，第二个是关于这些选项的解释
aoSearchColsdefault null, 类似：[null, {“sSearch”: “My filter”}, null,{“sSearch”: “1”, “bEscapeRegex”: false}]给每个列单独定义其初始化搜索列表特性（这一块还没搞懂）
asStripClassesdefault [‘odd’, ‘even’], 比如[‘strip1’, ‘strip2’, ‘strip3’]指定要被应用到各行的class风格，会自动循环
bDestroytrue or false, default false用于当要在同一个元素上执行新的dataTable绑定时，将之前的那个数据对象清除掉，换以新的对象设置
bRetrievetrue or false, default false用于指明当执行dataTable绑定时，是否返回DataTable对象
bScrollCollapsetrue or false, default false指定适当的时候缩起滚动视图
bSortCellsToptrue 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’指定当从服务端获取表格数据时，数据项使用的名字
sAjaxSourceURL字符串，default null指定要从哪个URL获取数据
sCookiePrefix字符串，default ‘SpryMedia_DataTables_’当打开状态存储特性后，用于指定存储在cookies中的字符串的前缀名字
sDomdefault 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’用于指定分页器风格
sScrollXInnerstring default ‘disabled’又是水平滚动相关的，没搞懂啥意思

回调函数

回调函数名称参数返回值默认功能
fnCookieCallback1.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 setstring: cookie formatted string (which should be encoded by using encodeURIComponent())null当每次cookies改变时，会触发这个函数调用
fnDrawCallback无无无在每次table被draw完后调用
fnFooterCallback1.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无无用于在每次重画的时候修改表格的脚部
fnFormatNumber1.int : number to be formattedString : formatted string for DataTables to show the number有默认的用于在大数字上，自动加入一些逗号，分隔开
fnHeaderCallback1.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
fnInfoCallback1.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 rulesstring: The string to be displayed in the information element.无用于传达table信息
fnInitComplete1.object:oSettings - DataTables settings object无无表格初始化完成后调用
fnPreDrawCallback1.object:oSettings - DataTables settings objectBoolean无用于在开始绘制之前调用，返回false的话，会阻止draw事件发生；返回其它值，draw可以顺利执行
fnRowCallback1.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风格
fnServerData1.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用于替换默认发到服务端的请求操作
fnStateLoadCallback1.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中的数据被加载前执行，可以方便地修改这些数据
fnStateSaveCallback1.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 ↩︎

liubo525
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axure浏览器插件插件
06-04
axure浏览器插件axure浏览器插件axure浏览器插件axure浏览器插件axure浏览器插件axuraxure浏览器插axure浏览器插件axure浏览器插件axure浏览器插件axure浏览器插件axure浏览器插件axuraxure浏览器插件axure浏览器...
dataTables-使用详细说明整理
热门推荐
行百里者半九十
11-29 33万+
本文共四部分：官网 | 基本使用|遇到的问题|属性表 一：官方网站：[http://www.datatables.net/] 二：基本使用：[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataTable();
SPSS中介效应分析插件（Process和mediate插件）
03-09
**SPSS中介效应分析插件：Process与Mediate详解** 在社会科学、市场研究以及心理学等领域，中介效应分析是一种常见的统计方法，用于探索变量之间的因果关系。SPSS（Statistical Product and Service Solutions）...
process插件
10-05
"Process插件"是SPSS（Statistical Product and Service Solutions）软件中的一个扩展工具，主要由Andrew F. Hayes教授开发，用于执行复杂统计分析，尤其是中介效应、调节效应和交互效应的检验。这个插件的强大之处...
Obsidian必备插件
05-16
obsidian-memos calendar chronology editing-toolbar obsidian-excalidraw-plugin obsidian-kanban obsidian-style-settings oz-calendar 主题：Blue Topaz
Origin中【CorrelationPlot】插件
06-25
在Origin中，【CorrelationPlot】插件是一个非常实用的功能，专为探索数据间的相关性而设计。通过这个插件，用户可以轻松地可视化不同变量之间的相关性，从而更好地理解和解释数据模式。 1. **安装与使用...
SQLAlchemy-2.0.31-cp37-cp37m-musllinux_1_2_aarch64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
osal api中文说明
08-31
osal api中文说明
SQLAlchemy-2.0.31-cp311-cp311-manylinux_2_17_x86_64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
geopandas-0.5.0-py2.py3-none-any.whl
08-31
GeoPandas是一个开源的Python库，旨在简化地理空间数据的处理和分析。它结合了Pandas和Shapely的能力，为Python用户提供了一个强大而灵活的工具来处理地理空间数据。以下是关于GeoPandas的详细介绍： 一、GeoPandas的基本概念 1. 定义 GeoPandas是建立在Pandas和Shapely之上的一个Python库，用于处理和分析地理空间数据。 它扩展了Pandas的DataFrame和Series数据结构，允许在其中存储和操作地理空间几何图形。 2. 核心数据结构 GeoDataFrame：GeoPandas的核心数据结构，是Pandas DataFrame的扩展。它包含一个或多个列，其中至少一列是几何列（geometry column），用于存储地理空间几何图形（如点、线、多边形等）。 GeoSeries：GeoPandas中的另一个重要数据结构，类似于Pandas的Series，但用于存储几何图形序列。 二、GeoPandas的功能特性 1. 读取和写入多种地理空间数据格式 GeoPandas支持读取和写入多种常见的地理空间数据格式，包括Shapefile、GeoJSON、PostGIS、KML等。这使得用户可以轻松地从各种数据源中加载地理空间数据，并将处理后的数据保存为所需的格式。 2. 地理空间几何图形的创建、编辑和分析 GeoPandas允许用户创建、编辑和分析地理空间几何图形，包括点、线、多边形等。它提供了丰富的空间操作函数，如缓冲区分析、交集、并集、差集等，使得用户可以方便地进行地理空间数据分析。 3. 数据可视化 GeoPandas内置了数据可视化功能，可以绘制地理空间数据的地图。用户可以使用matplotlib等库来进一步定制地图的样式和布局。 4. 空间连接和空间索引 GeoPandas支持空间连接操作，可以将两个GeoDataFrame按照空间关系（如相交、包含等）进行连接。此外，它还支持空间索引，可以提高地理空间数据查询的效率。
[湖北]监理平行检验规范用表.doc
最新发布
08-31
[湖北]监理平行检验规范用表.doc
博客绑定 博客绑定在新手教程 包含注释和说明
08-31
博客绑定 博客绑定在新手教程 包含注释和说明 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
CSS3时尚达人一键换装
08-31
CSS3时尚达人一键换装
基于yolov8的人头计数检测系统python源码+onnx模型+评估指标曲线+精美GUI界面.zip
08-31
【测试环境】 windows10 anaconda3+python3.8 torch==1.9.0+cu111 ultralytics==8.2.70 【模型可以检测出类别】 head 【训练信息】 训练集：20790张图片 测试集：1980张图片 训练map:96.1% 训练精度：97.4% 训练召回率：92.2% 【博文地址】 https://blog.csdn.net/FL1623863129/article/details/141757730
lxml-5.0.2-cp310-cp310-manylinux_2_28_x86_64.whl
08-31
lxml 是一个用于 Python 的库，它提供了高效的 XML 和 HTML 解析以及搜索功能。它是基于 libxml2 和 libxslt 这两个强大的 C 语言库构建的，因此相比纯 Python 实现的解析器（如 xml.etree.ElementTree），lxml 在速度和功能上都更为强大。 主要特性 快速的解析和序列化：由于底层是 C 实现的，lxml 在解析和序列化 XML/HTML 文档时非常快速。 XPath 和 CSS 选择器：支持 XPath 和 CSS 选择器，这使得在文档中查找特定元素变得简单而强大。 清理和转换 HTML：lxml 提供了强大的工具来清理和转换不规范的 HTML，比如自动修正标签和属性。 ETree API：提供了类似于 ElementTree 的 API，但更加完善和强大。 命名空间支持：相比 ElementTree，lxml 对 XML 命名空间提供了更好的支持。
【赠】全域旅游服务大数据平台总体规划建设方案（PDF）.pptx
08-31
【赠】全域旅游服务大数据平台总体规划建设方案（PDF）
常用芯片手册芯片资料CC40000系列大全
08-31
常用芯片手册芯片资料CC40000系列大全提取方式是百度网盘分享地址
监理单位安全专项检查记录表.doc
08-31
监理单位安全专项检查记录表.doc
lxml-5.0.0-cp312-cp312-win_amd64.whl
08-31
lxml 是一个用于 Python 的库，它提供了高效的 XML 和 HTML 解析以及搜索功能。它是基于 libxml2 和 libxslt 这两个强大的 C 语言库构建的，因此相比纯 Python 实现的解析器（如 xml.etree.ElementTree），lxml 在速度和功能上都更为强大。 主要特性 快速的解析和序列化：由于底层是 C 实现的，lxml 在解析和序列化 XML/HTML 文档时非常快速。 XPath 和 CSS 选择器：支持 XPath 和 CSS 选择器，这使得在文档中查找特定元素变得简单而强大。 清理和转换 HTML：lxml 提供了强大的工具来清理和转换不规范的 HTML，比如自动修正标签和属性。 ETree API：提供了类似于 ElementTree 的 API，但更加完善和强大。 命名空间支持：相比 ElementTree，lxml 对 XML 命名空间提供了更好的支持。 安装 你可以通过 pip 安装 lxml：
Pentaho Kettle插件开发详解
"kettle插件开发" Pentaho Kettle（简称Kettle）是一款强大的开源ETL工具，它由纯Java编写，具有跨平台性，可在Windows、Linux、Unix等操作系统上运行。Kettle的设计理念是将数据从各种源头抽取出来，经过处理和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值