插件
程序员文章站
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包是相互依赖的，因此需要同时存放。
-
0-9 ↩︎