最近在做后台系统的图表报表显示 用到了很多的前端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
所有的需求看文档即可