js插件使用整理

此文用来记录一些个人使用过的插件，以及使用过程中遇到的困难。

（不定时更新）

功能类

echart

http://echarts.baidu.com/

相当美观的图表插件，且图表类型丰富。

注意：

1.heatmap ，treemap等特殊图，不仅仅需要echart自身的js，还需要额外添加zrender

highchart

http://www.hcharts.cn/

图表插件，有echart所没有的类型，例如3d图等，highstock功能也很强大。

ztree

http://www.ztree.me/v3/main.php

多功能树插件，可灵活配置，多功能组合。

注意：

1.treeNode 一定要用 zTree 内部正在使用的节点数据对象。

必要时，使用zTree.getNodeByParam获取对应节点

2.对于ajax加载树，需要注意加载完成时间，一般需要写以下函数：

var curAsyncCount = 0;

function beforeAsync() {
curAsyncCount++;
}

function onAsyncSuccess(event, treeId, treeNode, msg){
curAsyncCount--;
if(curAsyncCount <= 0) {
//加载完毕后操作
}
}

kindeditor

http://kindeditor.net/about.php

富文本编辑器

注意：

1.关于模板的添加和修改

首先需要在plugins/template/html/ 添加模板html

其次在源文件中对KindEditor.lang下的template.fileList 添加模板名称和对应html

2.直接黏贴word文件至编辑框，可能出现表格格式问题。

原因是html的代码替换问题，且各个游览器不相同。

现在使用的方法是修改源码，在self.afterCreate下

添加如下代码作替换：

html = html.replace(new RegExp("border:0.5000pt solid #000000;","gm"),"");
html = html.replace(new RegExp("<table","gm"),"<table border='1' bordercolor='#000000'");

bootstrap-autocomplete

http://www.oschina.net/code/snippet_219811_19025

改造了bootstrap的Typeahead插件，使得自动补全更加灵活

注意：

1.对于某些特定的要求，需要对源码进行修改。

下拉框的大小位置，修改show函数

显示数据的要求，修改select函数

2.使用输入法，将无法正常使用此插件。

bootstrap-table

http://bootstrap-table.wenzhixin.net.cn/

一款基于bootstrap的表格类插件

注意：

1.特别针对于editable功能，提示的输入框可能被其它元素遮挡，需要控制位置或层次。

美化类

select2

http://select2.github.io/

美化单选与多选，选择框扩展，且支持ajax

注意：

1.下拉框偶尔会错位，可能与游览器有关。（暂未找到解决方案）

2.采用ajax的多选框设置初值时，需要手动添加option，例如：

var $element = $('#select').select2();
var option = new Option(name,value, true, true);
$element.append(option);
$element.trigger('change');

jquery-confirm

http://craftpip.github.io/jquery-confirm/

美化了提示，告警与对话框，扩展性很强。

jquery.shCircleLoader

https://github.com/sunhater/shCircleLoader

一款载入效果插件，风格不错。