前端插件的使用

最近在做后台系统的图表报表显示 用到了很多的前端js插件 jquery插件,下面罗列一下

1.多选插件  bootstrap-multiselect  select2 bootstrap-select

我自己代码里用的是bootstrap-multiselect 和 bootstrap--select

bootstrap-multiselect 插件

几个不错的学习源头:

http://davidstutz.de/bootstrap-multiselect/

https://www.cnblogs.com/landeanfen/p/5013452.html

https://blog.csdn.net/princeluan/article/details/69791331

https://blog.csdn.net/fangzilixia/article/details/51265112

<select name="channel_id[]" id="channel" class="form-control" multiple="multiple" >  // 多选
$("#channel").multiselect("destroy").multiselect({
                        filterPlaceholder: 'Search', // 搜索
                        enableFiltering: true,
                        enableCaseInsensitiveFiltering: true,
                        includeSelectAllOption: true,//全选
    }).multiselect('select',selecteds); // select 选中的是 optiion的value值

bootstrap-select 插件

我主要是用的这插件 好看一点

几个不错的学习源头:

http://silviomoreto.github.io/bootstrap-select/

https://blog.csdn.net/csdn_huzeliang/article/details/79153075

https://www.cnblogs.com/fanbi/p/7121306.html

https://www.cnblogs.com/landeanfen/p/7457283.html

https://www.cnblogs.com/nianyifenzhizuo/p/8119462.html

<link rel="stylesheet" href="{{ asset('select/bootstrap-select.min.css')}}">
    <script type="text/javascript" src="{{ asset('select/bootstrap-select.js')}}"></script>
    <script type="text/javascript" src="{{ asset('select/defaults-zh_CN.js')}}"></script>
<select class="selectpicker form-control" multiple id="allStatus" disabled></select> // 禁用
<select class="selectpicker show-tick form-control" multiple id="focusStatus" data-live-search="true" //搜索 data-actions-box="true" // 全选反选></select>

$('#allStatus').selectpicker('destroy'); //销毁
$('#allStatus').selectpicker('val',all); // 选中默认值  all中的值是option里的value值

select2 插件几个

不错的学习源头:

https://select2.org/

https://blog.csdn.net/weixin_36146275/article/details/79336158

https://www.cnblogs.com/landeanfen/p/5099332.html

https://www.cnblogs.com/liuxiaobo93/p/5112993.html

https://blog.csdn.net/jiangeeq/article/details/53116791

https://blog.csdn.net/StoneEpigraph/article/details/76409408

https://blog.csdn.net/jiangeeq/article/details/54708859

2.layer弹窗插件的使用

学习源头:http://layer.layui.com/

// 加载页面层
                layer.open({
                    title: '设置渠道状态',
                    type: 1,
                    zIndex: 6, // 默认是很高级的 你要有其他更高级别的显示 可以把这个选项设置低一点
                    area: ['900px', '660px'],
                    shadeClose: true, //点击遮罩关闭
                    content: content
                });

效果图

style="z-index: 666"

 

if(data.tip == 1) {
                            layer.msg('更新成功', {icon: 1, zIndex: 666,}); icon 1是成功样式 icon 2是失败样式
                        } else {
                            layer.msg('更新失败', {icon: 2, zIndex: 666,});
                        }

效果图如下:

还有许多的其他功能 具体需要查看文本手册

3.图表 报表插件  echarts highcharts

我项目中使用的是

echarts

学习源头:

http://echarts.baidu.com/

 

highcharts

学习源头:

http://www.hcharts.cn/

http://www.runoob.com/highcharts/highcharts-tutorial.html

所有的需求看文档即可