【前端】
关注
分享
扫一扫
立小言先森
这个作者很懒，什么都没留下…
展开
-
Bootstrap-table实现查询、分页、导出、参数设置及前后端代码示例详解
官方文档可以参考：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6 页面效果图： - 要控制左侧的复选框按钮属性设置： checkbox: false,控制内容下拉列中是否显示的属性设置：visible: false后端代码要返回查询符合条件的总条数...原创 2018-05-15 11:45:38 · 20937 阅读 · 9 评论 -
JS模块化工具基本使用
官网地址：http://requirejs.org/docs/download.htmlRequireJ是一个非常小巧的JavaScript模块载入工具，是AMD规范的最好实现之一；在浏览器中可以作为js文件的模块加载器。1.通常情况下我们引入一个js文件的方式如下：<!DOCTYPE html><html> <head> ...原创 2018-02-28 14:32:38 · 331 阅读 · 0 评论 -
requirejs在jQuery中使用详解
1.充分利用requirejs模块化工具优化代码，强烈的建议将html内联脚本放入到外部的js文件中通过requirejs来引用。<!DOCTYPE html><html> <head> <title>My Sample Project</title>原创 2018-02-28 15:26:30 · 9908 阅读 · 0 评论 -
requirejs如何使用define定义一个模块
AMD规范全称是Asynchronous Module Definition，即异步模块加载机制。从它的规范描述页面看，AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。require定义一个模块是通过 define function (name, deps, callback)完成的,第一个参数是定义模块名，第二个参数是传入定义模块所需要的依赖，第三个函数则是...原创 2018-02-28 15:44:23 · 12222 阅读 · 0 评论 -
requirejs中require.config常用参数urlArgs、scriptType、waitSeconds、deps、callback
urlArgs RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。使用cache bust配置的一个示例： javascript:;urlArgs: “bust=” + (new Date()).getTime() 在开发中这很有用，但请记得在部署到生成环境之前移除它。scriptType 指定Req...原创 2018-02-28 17:06:52 · 7578 阅读 · 0 评论 -
requirejs加载layerdate.js遇到的各种坑
1.将layerdate.js文件中的代码给替换掉源码： c.getPath = function() { var a = document.scripts, c = a[a.length - 1].src; return b.path ? b.path: c.substring(0, c.lastIndexOf("/") + 1) ...原创 2018-03-01 15:51:01 · 1743 阅读 · 1 评论 -
js控制用户一个小时之内没有任何操作自动退出
document.addEventListener("click", operateTimeOut); var session = '${session}'; var second = 0; startit(); //开始计时 function startit() { second++; ...原创 2017-08-10 14:22:22 · 3746 阅读 · 0 评论 -
html中JSON格式化输出
今天做一个API后台管理系统新增了日志模块，我是把操作的数据直接存入mongo数据库的，mongo是存入的json格式但是我想输出存入的操作详情到页面一直是很乱的格式，我想按照mongo的格式输出找了很久找到了解决方法：JSON.stringify(jsObj, null, "\t"); // 缩进一个tabJSON.stringify(jsObj, null, 4); // 缩进4...原创 2017-10-09 15:35:37 · 3966 阅读 · 0 评论 -
jQuery on()方法的优点及$().click方法的区别、删除select选中的元素
1.jQuery on()方法是官方推荐的绑定事件的一个方法$(selector).on(event,childSelector,data,function,map)例子： $(document).on('click','.resetForm',function(){ $("#live_title").attr("value",""); $(&am原创 2018-03-01 17:53:52 · 470 阅读 · 0 评论 -
js判断字符串长度
function getByteLen(str) { var len = 0; for (var i = 0; i < str.length; i++) { var a = str.charAt(i); if (a.match(/[^\x00-\xff]/ig) != null) { len += 2; ...原创 2018-05-24 19:26:58 · 7388 阅读 · 0 评论 -
Thymeleaf模板引擎简介【一】
Thymeleaf是一个对于web和独立运行环境的服务端java模板引擎，能够处理HTML、xml、javascript、css甚至纯文本。 对于Thymeleaf的目的是提供一个优雅的和高度可维护的模板制作方法，为了实现这一点，它以自然模板的概念为基础，以不影响模板作为设计原型的方式将其逻辑注入模板文件中；这提高了设计的沟通能力，弥补了设计和开发团队的差距。 Thymeleaf也...原创 2017-10-18 20:13:41 · 2019 阅读 · 0 评论 -
Thymeleaf虚拟购物商店【二】
购物商店网站为了更好的解释与Thymeleaf处理模板的概念，本教程将使用一个演示应用程序，您可以从项目的Web站点下载该应用程序。 这个应用程序是一个假想的虚拟购物网站，并将为我们提供了很多场景来展示Thymeleaf的许多特点。 首先，我们需要一组简单的模型实体作为应用程序：通过创建订单向客户销售的产品。我们还将管理有关这些产品的评论： 我们的应用程序也将有一个...原创 2017-10-19 15:41:19 · 575 阅读 · 0 评论 -
BootstrapTable设置height属性后，表头和表格内容不对齐
一般我们使用bootstrap-table插件的时候不设置height高度属性都是可以完全正常的；但是有一个问题是如果每页显示的数据很多的时候，所有的数据会平铺到整个页面，而不会在一定的范围内使用滚动的方式展示，这样看起来很不爽；如果设置了height属性又会出现另外一个问题就是表头和表格内容不能对齐； // // 表格高度 height: $(window).he...原创 2018-11-22 16:36:23 · 11144 阅读 · 5 评论 -
requirejs中data-main属性加载data-main指定的main.js文件找不到
刚开始我是在官网上http://requirejs.org/docs/download.html下载了未压缩的的r.js文件，但是使用这个文件使用data-main属性引入main.js文件的时候一直找不到。<script data-main="js/main" src="js/r.js"></script>经过各种测试查找终于找到需要下原创 2018-02-28 14:07:09 · 6925 阅读 · 1 评论 -
bootstrap-select核心方法method
方法 bootstrap-select插件接口。.selectpicker(‘val’) 你可以通过调用元素上的val方法来设置选定的值。$('.selectpicker').selectpicker('val', 'Mustard');$('.selectpicker').selectpicker('val', ['Mustard','Relish']);这跟直接调用sel...原创 2018-03-07 10:06:57 · 1872 阅读 · 0 评论 -
bootstrap-table表格中格式化输出后端返回的json数据
默认情况只把JSON对象转换为json字符串的代码和效果图如下：JSON.stringify(value, null, 2)//缩进2个空格我们可以看到显示的json数据是格式很乱的。 2. 如何将json格式的数据格式化输出呢？我们可以使用标签，具体的使用方法可以参考：http://www.techug.com/post/styling-pre-tag.html 加上p...原创 2018-05-15 20:05:35 · 47448 阅读 · 1 评论 -
Bootstrap-table中toolbar中新增条件查询及refresh参数使用
我们想要在bootstrap-table中自定义查询条件如何实现呢？这些自定义的按钮、输入框是定义在哪个位置呢？还记得上一节中我们在配置中有这样一个属性： //工具按钮用哪个容器 toolbar: '#toolbar', <div id="toolbar"></div>我们定义的查询条件就是放入到这个div中的，先看一下我们...原创 2018-05-17 10:02:13 · 8844 阅读 · 2 评论 -
Bootstrap-table中请求服务端数据POST不可以用解决方法
在bootstraptable参数中新增如下参数： //Post请求加上如下配置 contentType:"application/x-www-form-urlencoded; charset=UTF-8",新增如上参数将method方法改为POST请求就可以正常使用了： //服务器数据的请求方式 'get' 或 'post'。 ...原创 2018-05-17 17:17:09 · 4178 阅读 · 0 评论 -
bootstrap-table中onLoadSuccess方法渲染从后端接口查询到的数据到接口
当我们取数据是从接口中取的时候直接拿到的数据并不是bootstrap-table插件默认的格式，我们可能在外面做了包装，或者我们需要在前端重新组装成插件需要的格式，这样就需要我们手动重新渲染了。onLoadSuccess远程数据加载成功时触发成功。bootstrapTable函数重新渲染table中的数据load加载数据到表格中，旧数据会被替换。 onLoadSucc...原创 2018-05-30 13:26:46 · 31255 阅读 · 1 评论 -
ckeditor添加音频播放插件html5audio详解
ckeditor是一个强大的编辑器，允许我们添加自定义的插件，其它的废话就不多说了，我们直接进入在编辑器中新增音频插件的正题。 首先到官网下载html5audio插件：https://github.com/iametza/ckeditor-html5-audio/blob/master/README.md 如上图所示：我们需要到config.js文件中将配置项：config.ext...原创 2018-05-11 10:10:21 · 5642 阅读 · 10 评论 -
bootstrap3-typeahead自动补全插件
github:https://github.com/bassjobsen/Bootstrap-3-Typeahead简介 是Bootstrap-3-Typeahead，不是Twitter open source的typeahead，两者用法有差异。外加如果配合原生的Bootstrap3的话推荐还是用这个。通过上面的github下载bootstrap3-typeahead.min.js文件...原创 2018-03-11 15:52:45 · 1386 阅读 · 0 评论 -
bootstrap3-typeahead使用具体的示例
$('#id').typeahead({ //query是当前输入框中所输入的内容，process是一个回调函数,它用来将我们得到的结果转换为typeahead组件可以识别的数据 source: function (query, process) { //source只能处理基本类型数组 ...原创 2018-03-17 10:35:22 · 2759 阅读 · 1 评论 -
typeahead插件基础知识
翻译自：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.mdjQuery#typeahead 对于typeahead.js UI组件可以作为一个jQuery插件，它负责展示提示和处理DOM交互。特征向终端用户展示提示显示顶级建议做为提示（即背景文本）支持自定义模板使前端UI更加...原创 2018-03-07 13:59:29 · 7040 阅读 · 0 评论 -
bootstrap-select.js报d.stopPropagation is not a function异常
使用bootstrap-select.js插件给下拉框赋值的时候报如下错误：bootstrap-select.js:230 Uncaught TypeError: d.stopPropagation is not a function at new e (VM32721 bootstrap-select.min.js:7) at HTMLSelectElement.<...原创 2018-03-02 14:29:59 · 6129 阅读 · 0 评论 -
bootstrap-select学习基础示例
翻译来自：http://silviomoreto.github.io/bootstrap-select/examples/1.标准的下拉选择框<div class="container"> <div class="row"> <select class="selectpi原创 2018-03-04 13:50:51 · 2869 阅读 · 0 评论 -
bootstrap-select核心options
译文来自：http://silviomoreto.github.io/bootstrap-select/options/ Options可以通过数据属性传递也可以通过Javascript传递。对于数据属性，在option前加上data-,就像data-style=”” or data-selected-text-format=”count”一样。1.通过Javascript设置属性...原创 2018-03-04 17:56:32 · 3175 阅读 · 0 评论 -
bootstrap-select核心events
bootstrap-select绑定选中的一些事件。 hide.bs.select, hidden.bs.select, show.bs.select, 和 shown.bs.select 都有一个relatedTarget属性，其值是触发选项的锚点。 事件类型 事件描述 show.bs.select 当调用展示实例方法时，此事件被调用。 shown.bs....原创 2018-03-05 14:09:24 · 1571 阅读 · 1 评论 -
jquery获取选中和未选中的checkbox复选框
获取勾选的复选框： $("input[name='show_product_line']:checked").each(function() { console.log($(this).val()); });获取未勾选的复选框： $("input[name='id']:not(:checked)").each(function() { console.log($(this...原创 2019-01-25 20:25:31 · 17575 阅读 · 0 评论