大前端-插件API
关注
分享
扫一扫
天空影
此生多磨难，此身越重洋
展开
-
分页插件（基于jq和bootstrap）
分页插件的使用原创 2017-10-26 16:27:38 · 631 阅读 · 0 评论 -
js-xlsx（三）excel文件预览
引入文件github地址：js-xlsx代码html<input type="file" name="" onchange="importf(this)" id="" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"><div id="tab原创 2018-08-09 16:11:26 · 10927 阅读 · 9 评论 -
zTree（七）getCheckedNodes报错
报错can't read property getCheckedNodes of nulljs写法var treeObj = $.fn.zTree.getZTreeObj("treeTGrp");nodes = treeObj.getCheckedNodes(true);原因$.fn.zTree.getZTreeObj(“tree”);为null的原因是页面没有找到tree，...原创 2018-08-01 16:20:37 · 5336 阅读 · 0 评论 -
jx-xlsx（一）excel上传转为json数据上传
原文地址：利用JS-XLSX插件 用JS读取excel数据 原文js下载地址竟然在csdn下载列表？这踏马开源的东西竟然放进付费？准备1、准备一份xlsx文件 2、下载xlsx.core.min.js 下载地址：js-slsx(github)代码&lt;input type="file" name="" onchange="importf(this)" id=&a转载 2018-08-03 10:45:24 · 1569 阅读 · 0 评论 -
jeDate—选择日期后，再点开重新选择时间，日期会被置为今日日期
bug因为项目中用到了jeDate时间组件，但是一直都只是简单引用了就没管了，最近测试提了一个小bug：选择日期后，再点开重新选择时间，日期会被置为今日日期，后来我自己实践了一下发现不仅仅是选择时间会重现这个问题，只要是选择日期后，再点开然后啥都不干，点击确认日期就会被重置为今日日期。然后去官网看看是我的原因还是控件的原因。查找原因我去官网示例演示了一下我的操作，发现官网示例也是有这个...原创 2018-08-27 11:02:01 · 5422 阅读 · 1 评论 -
html2canvas 保存图片
//截图var _fixType = function (type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; var saveFile = function (data, ...原创 2018-09-11 10:24:43 · 1635 阅读 · 4 评论 -
zTree（八）手风琴展开效果
效果预期手风琴展开效果：节点展开同时关闭其他已展开的同级节点具体实现因为是节点展开，所以在实现具体效果的回调方法在于callback: { onExpand: zTreeOnExpand}//鼠标点击function zTreeOnClick(event, treeId, treeNode){ //过滤查找同级 const treeNodes = treeObj.getN...原创 2018-11-29 14:27:02 · 952 阅读 · 0 评论 -
zTree（九）默认选中并执行点击事件
手动查找对应节点var node = zTree.getNodeByParam(key,value,parentNode); key:需要精确匹配的属性名称;value:需要精确匹配的属性值，可以是任何类型，只要保证与 key 指定的属性值保持一致即可;parentNode:搜索范围，指定在某个父节点下的子节点中进行搜索;忽略此参数，表示在全部节点中搜索zTree = $.fn.zTr...原创 2018-11-29 14:47:41 · 3842 阅读 · 0 评论 -
zTree（十一）自定义title
设置var setting = { data:{ key: { title: "description" } }}json数据都需要额外加一个description字段orgList.forEach(item =&gt;{ item.description = item.name})...原创 2018-12-12 14:23:45 · 2174 阅读 · 0 评论 -
echart柱状图背景色
关键barGap:不同系列的柱间距离，为百分比（如 ‘30%’，表示柱子宽度的 30%）。如果想要两个系列的柱子重叠，可以设置 barGap 为 ‘-100%’。这在用柱子做背景的时候有用。在同一坐标系上，此属性会被多个 ‘bar’ 系列共享。此属性应设置于此坐标系中最后一个 ‘bar’ 系列上才会生效，并且是对此坐标系中所有 ‘bar’ 系列生效。代码option = { xAxi...原创 2018-12-20 14:00:29 · 13333 阅读 · 2 评论 -
video-js（一）RTMP直播
目前主流的几种直播协议协议传输方式视频封装格式延时数据分段html播放httpflvhttpflv低连续可通过html5解封包播放(flv.js)rtmptcpflv tag低连续不支持dashhttpts文件高切片可通过html5解封包播放(hls.js)hls$1mp4 3gp webm高切片如果dash文...原创 2018-12-12 14:04:08 · 10611 阅读 · 22 评论 -
require js（四） 按需加载css
前面也讲到了，我是用require做单页面应用，这个呢就有可能会涉及某个具体页面需要为他写一个具体的css样式。但是我又不想全局引入，因为这样有可能破坏其他页面的样式，所以就需要按需加载css这个东西。因为按需加载css又涉及到处理css文件，所以我们需要引入一个js文件：require-css配置项 baseConfig.jspath:{ 'css': [&amp;quot;../../asset/req...原创 2018-12-25 17:46:01 · 1403 阅读 · 0 评论 -
require js（二）结合director.js配置项
接上文：require简单实用目录__js |__jquery.min.js |__director.js |__bootstrap.bundle.min.js|__test |__js |__main.js |__require.min.js |__index.html 代码index.html&amp;...原创 2018-11-22 11:00:04 · 529 阅读 · 0 评论 -
require js（一）简单使用
起始其实这个算是很老套的东西了，只不过我一直没用过，然后因为项目也没条件去用vue等一些框架，然后因为一个以前的项目有可能需要重构（easyui写的），然后想着自己上一个项目完全就是堆起来的，所以就把以前的老东西捡起来看了看能不能对目前的项目进行一些优化。API文档：RequireJS中文网学习因为以前也用过vue，所以对ES6的module有一些了解，然后在网上看了一些require j...原创 2018-11-22 10:27:28 · 711 阅读 · 0 评论 -
require js（三）结合director.js text.js做单页面
接上文：require js 结合director.js配置项目的因为现在大多的路由、单页面指的是vue-route，ng-route这一套有着自己完善模板渲染体系的框架。而在上文我也说到了因为某些原因用不了框架，而我做的页面又是单页面管理应用，所以我是投机取巧了很多的。比如我第一个项目用的angular1x.0的路由，因为支持纯html模板，二个我就是用了jq的ajax load()方法，不...原创 2018-11-22 13:55:34 · 635 阅读 · 0 评论 -
zTree（十）自定义节点html格式名称
需求因为项目组织上有终端数量，所以产品希望在节点上能够显示终端数量并显示在节点的右侧，一开始我查文档并没有这种东西，后来想到用html片段加上去，结果发现节点上显示了html字符串，也就是说并不识别html片段并正确显示我需要的东西。orgList[i].name = orgList[i].orgName + `&amp;amp;lt;span&amp;amp;gt;[${num}]&amp;amp;lt;/span&amp;amp;g原创 2018-12-11 18:37:24 · 2620 阅读 · 2 评论 -
bootstrap-table（六）行内编辑（非官方）
大致效果声明：因为这个我自己没有mock数据，所以其实效果是没那么真实的，但是基本上的逻辑功能我算是理清了的，我自己项目上用的，但是我把这些都删掉了，自己再写了个demo的。请需要更复杂逻辑的自行摸索实现。手动狗头代码准备工作——把表格数据显示出来let data = [{ id: 1, name: '张三', title: '部长'...原创 2019-01-10 11:23:18 · 5820 阅读 · 1 评论 -
js-xlsx（二）json数据导出excel
已经有两篇文章写了怎么导出json到excel，不过那个插件只能做这一项工作，为了结合excel上传导入json数据，所以用js-xlsx这个插件再弄一次js支持1、js-xlsx 2、filesave (如果想像我这样引入，需要在源代码中删除最前面的export) 3、mock.js <script src="https://cdn.bootcss.com/jquery/...原创 2018-08-09 10:48:06 · 6399 阅读 · 1 评论 -
zTree（六）异步传参和异步刷新父节点（不固定值，字符串类型）
因为涉及到异步加载节点刷新问题，所以好好研究了一下zTree异步传参autoParam:异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效]otherParam:Ajax 请求提交的静态参数键值对。[setting.async.enable = true 时生效]看官方文档不难晓得autoParam是刷新节点的时候才会提交这个参数，而...原创 2018-07-27 15:58:33 · 2653 阅读 · 0 评论 -
layer（一）msg信息弹出框高度宽度设置
var index= layer.msg('授权码信息不一致'); layer.style(index, { width: '200px', height:'200px'});原创 2018-07-30 14:16:46 · 14458 阅读 · 4 评论 -
bootstrap-table（一）树状表（tree-grid）
因为项目有一个接口是多级组织架构的，所以需求是使用树状图表展示，然后表格控件用的bootstrap-table，通过官网的扩展地址找到了tree-grid 这个功能。扩展地址：bootstrap-table扩展 建议经常使用这个控件的人fork使用方法官网有，但是我这里还是贴一下，有一点提示大家：关系id 和 pid 是number数据类型，如果后台给的是string类型，记得转换一下，不...原创 2018-04-09 17:45:57 · 39369 阅读 · 39 评论 -
bootstrap-table（二）服务器分页查询当前页显示
事故案发现场： 第一次查询数据有很多页，翻页到第5页后，通过查询条件查询数据时，因为服务器分页页码仍旧为5，而此时数据量小于5页，表格显示为未查询到数据。解决方法: 使用bootstrap table的参数刷新方法（refreshOptions），在查询按钮刷新table发出数据请求时，将页码刷新回到1。$table..bootstrapTable('refreshOption...原创 2018-04-12 16:45:13 · 719 阅读 · 0 评论 -
zTree（一）简单使用
沿着上一个需求的工作，因为项目涉及多级组织，并且组织下面有一系列的关联管理，比如终端，而如果要查询终端就得根据组织来查询，这样在展示终端的时候就涉及到了组织的展示。类似这种：也就是根据左侧组织来展示终端，因为是多级（不限级）组织，所有采用树状图展示，这里就简单的介绍一下基本用法。扩展的话可以看文档：z-tree API文档定义节点&lt;ul id="treeDemo" clas...原创 2018-04-24 09:19:43 · 1242 阅读 · 0 评论 -
前端多级组织（部门）结构展示
预期效果：开发：插件：jOrgChart 扩展：jOrgChart-tree 下载：jOrgChart实操：html<link rel="stylesheet" href="asset/jquery.jOrgChart.css"><style>a { text-decoration: none; color: #fff;...原创 2018-05-24 17:10:08 · 8101 阅读 · 6 评论 -
zTree（二）树状图下拉框
需求添加、修改终端需要选择组织，组织是多级架构（树状图显示）。思路1、因为下拉框需要树状图显示，所以排除使用select做下拉框，改用input 模拟下拉框 2、树状图采用zTree插件开工1、布局&amp;lt;script src=&quot;https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js&quot;&amp;gt;&amp;lt;/script原创 2018-05-22 11:10:20 · 14495 阅读 · 2 评论 -
jeDate控件开始，结束日期联动有默认值时报错
后台管理系统查询页记录往往伴随着时间间距的查询，而如何对查询时间进行取值限制则涉及到开始，结束时间的联动官方实例代码<span class="datetxt">开始日期：</span><input type="text" class="dateinput dateicon" id="inpstart" readonly>原创 2018-06-12 15:55:05 · 3553 阅读 · 0 评论 -
art-template简使用
art-template 是一个简约、超快的模板引擎。官网art-template官网安装浏览器端使用：下载art-template使用 &lt;script src="./art-template.js"&gt;&lt;/script&gt;输出例子&lt;div id="content1"&原创 2018-06-15 15:41:09 · 2301 阅读 · 0 评论 -
zTree（三）异步加载节点数据（非官方实例方法）
功能需求1、实现树状图显示终端 2、实现异步加载显示节点数据（数据量可能达到2w） 3、默认树状图接口是组织、异步加载节点数据是终端技术分析1、还是采用zTree插件 2、基于组织、终端关系不采用官方异步加载实例 3、基于现状采用zTree.addNodes 方法开工引入文件包我就不放进去了html&amp;amp;lt;div class=&amp;quot;ztree&amp;quot;&amp;am原创 2018-06-25 18:09:31 · 4486 阅读 · 0 评论 -
bootstrap-table（三）向后台发送数据（post请求）接收不到
故障原因本来做一个服务器分页的功能，结果按照文档配置好了一直都请求不到数据，而且用ajax完全没问题，那就查呗，network一查，初看没啥问题method:'post',发送的数据 后来和ajax反复比较发现了 Request Payload这个东西后来查文档发现了这个 contentType data-content-type String ‘...原创 2018-06-27 18:13:36 · 10863 阅读 · 2 评论 -
echarts自适应
原始样子设置宽度不定，也就是想要它自适应<div id="bars" style="width: 100%;height:560px;"></div>手动缩放后我手动把浏览器宽度缩小后 可以看到，宽度并不会随左边宽度改变而改变。解决方法因为echarts没有内置自适应方法，所以需要自己手动添加window.addEventListene...原创 2018-06-28 15:01:45 · 2069 阅读 · 3 评论 -
省市区三级联动（带经纬度、离线地图）
因为最近在做一个百度离线地图功能，里面就涉及到一个需求：根据省市区三级联动定位地图中心然后在网上找了挺久的，主要是省市区经纬度的json文件，csdn上好多要积分的：省市区经纬度json文件 这是我 上传的，但是你看到这篇博客你就不需要去下了，不过也可以支持我一下代码思路： html&amp;lt;div class=&quot;container&quot;&amp;gt; &amp;lt;div clas原创 2018-07-11 16:24:56 · 5081 阅读 · 0 评论 -
bootstrap-table（四）数据导出
写在前面：服务器分页只能导出当前页数据使用bootstrap-table官网扩展上是有导出功能的，bootstrap-table-export。同时还需要一个插件：tableExport.min.jsscript type="text/javascript" src="tableExport.min.js"&gt;&lt;/script&gt;&lt;scri原创 2018-07-05 11:19:37 · 4860 阅读 · 11 评论 -
json导出excel(条数不受限)
接上文：json导出excel（条数受限）因为自己写的超过1w条会出现下载失败，所以就各种搜资料，然后github搜到一个插件：jsonExportExcel目前是用mock测试了3w条数据，简直是秒导出（我们系统好像只会保存3w条，所以我只测试3w条就ok了）动手引入： 这里引入mock.js是为了等下测试多数据&lt;script src="https://cdn.boot...原创 2018-07-05 17:22:12 · 2193 阅读 · 0 评论 -
bootstrap-table（五）表格内容过多时显示一行
内容过多时： 巨丑！ 所以我想改成显示一行table { table-layout: fixed;}.txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}然后 还行，如果我想点击显示全部呢？{ class: 'txt', ...原创 2018-07-06 09:47:32 · 5320 阅读 · 3 评论 -
zTree（四）同级拖拽排序
配置项：callback: { onClick: zTreeOnClickOrg, beforeDrag: beforeDrag, beforeDrop: beforeDrog},方法// 拖拽排序 只允许同级排序var dragId;//用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作function beforeDr...原创 2018-07-26 10:10:45 · 1291 阅读 · 0 评论 -
zTree（五）异步加载并展开第一项
异步配置项async: { enable: true, url: ip + "mgmt/getOrg.do", autoParam: ["orgCode"],//异步加载时需要自动提交父节点属性的参数 dataFilter: ajaxDataFilter//用于对 Ajax 返回数据进行预处理的函数。},//这些方法看看就好，这是我项目中写的，我不想改所...原创 2018-07-26 16:50:27 · 765 阅读 · 0 评论 -
bootstrap-table（七）拖拽排序
需求这个需求是今天下午老大艾特我发的一张图片因为我们产品后台有一个组织的模块，其中就因为客户多次提示能不能做排序功能，所以老大就直接截图让我能不能做成钉钉这个样子，然后因为我用到的表格是bootstrap-table,所以我就去网上找了一下，发现在bootstrap-tbale扩展上有一个拖拽的功能库。所以也是花了点时间做到了老大要的效果。效果调整排序前点击调整排序后然后就可以随...原创 2019-03-21 17:21:09 · 8596 阅读 · 3 评论