文章目录
插件
数据可视化插件
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 ↩︎