分类: WEB前端 JS

标签: checkbox ajax serialize serializeArray

checkbox是很常用的一个html控件，在使用时有一个细节需要注意，如果你的checkbox没有被选中，那么这个name属性将不会随表单一起提交，当然，笔者说的是serialize表单ajax提交的方式（至于页面默认同步的提交方式，笔者好像工作以来基本都没用过，都是采用ajax异步提交的，使用页面默认同步的方式，会不会有该问题，笔者未做验证）。举个例子：

<form id="form">
    <input type="checkbox" name="football"/>
</form>

当你勾选了该checkbox时，提交表单会带参数football=on，如果没有勾选，提交的表单就没有football这个参数。平时，我们基本上可以根据没有football这个参数就认为用户没有勾选该项，这完全没有问题。但笔者在做基础平台时，做通用功能的时候，如果每个checkbox参数这样去判断一次，感觉会很累赘，无法利用Sp

分类: JS WEB前端 CSS

标签: bootstrap modal 滚动条

bootstrap在同时使用多个modal时会出现不少问题，笔者博客之前已经讨论过不少，最近笔者又发现一个bug。当你弹出一个modalA，modalA内容比较多，出现纵向滚动条时，如果这时你又弹出modalB，当modalB关闭时，你会发现modalA里面内容的纵向滚动条不见了。

造成这种现象的原因很简单，在弹出新的modal时，会根据当前新modal的内容设置滚动条，如果当前modal足够内容显示，则所有modal的overflow-x，overflow-y属性都会取消掉，要想在关闭时重新显示滚动条，我们重新给需要滚动的modal加上overflow-y:atuo即可，横向相应的就是overflow-x了。又因为我们使用的是auto，给不需要滚动的modal加上也无妨，所以，我们可以很简单的在modal的hidden事件中，给所有的modal加上overflow-x或overflow-y为auto，这样变成全局更方便使用了。

分类: JS WEB前端

标签: bootstrap tooltip 定位不对 滚动条

首先我们看下下面的图片：

这是一个表单的验证，笔者的实现方式是在出现错误时，给控件加载一个红色边框，然后再旁边显示一个Bootstrap原生的Toolltip，笔者简单的实现了一下，发现一个问题，如果当页面出现滚动条，将会出现下面的现象：

可以明显看到，提示位置定位错了。但很奇怪的是提示的三角形并没有定位错。

最开始以为是data-container设置错误，后来确认不是data-container设置问题，查了下源码，发现了如下关键的代码：

  Tooltip.prototype.getViewportAdjustedDelta = function (placement, pos, actualWidth, actualHeight) {
    var delta = { top: 0, left: 0 }
    if (!this.$viewport) return d

分类: JS Java WEB前端

标签: ajax 登录超时 401 UNAUTHORIZED

ajax技术现在已经非常普及，常用来异步加载数据，也用来异步加载页面，现在越来越流行的单页应用SPA，页面几乎全是用ajax加载进来的。对于传统页面，如果登录超时，再提交请求时，一般后台将会把用户直接转发到登录页面，而使用ajax请求页面，如果你不注意，可能一不小心，就把登录界面load到当前页面，作为当前页面的一小部分了，这显然不是我们所期望的，接来下笔者说下我是如何处理这种情况的。

分类: WEB前端 JS

标签: bootstrap-table DhtmlXGrid DHtmlXGridJsonAdapter 适配器

DHX是一个国外的javascript库，包括了很多javscript插件，数据方面有关的就包括Chart、Tree、DataView、TreeGrid、Grid、TreeView、List。其中Grid算是用得比较多的了。

DhtmlXGrid有几个缺点，一般来说，都是后台组装好需要的xml数据，返回给前台使用，后台代码跟前台绑定太紧密，前台需要哪些字段，显示顺序是什么，后台都得事先考虑好。如果前台展示的顺序变了，后台代码也得跟着修改。对于不用显示，但后续操作可能需要用到的字段，像数据的主键这种，后台需要返回，前台通过设置隐藏实现，如果需要增加显示的字段，后台就也得改代码，非常不方便。

现在主流用的表格插件bootstrap-table提供的API就很好使用，这里笔者习惯了使用bootstrap-table，碰到项目需要使用DhtmlXGrid各种不爽，于是写了一个适配器，可以使用类bootstrap-table API的调用方式来生成DhtmlXGrid代码。

分类: WEB前端 JS

标签: data _data event

jQuery在1.8版本前，可以使用如下代码获取DOM元素绑定事件：

$.data(domObj,'events');//或者$('selector').data('events')

1.8版本以后：

$._data(domObj,'events');//注意，这里不能像$('selector')._data('events')这样用了。

使用下面的写法可以兼容各个版本：

var eventsData = $.data(domObj,'events') || $._data(domObj,'events');

分类: WEB前端 JS

标签: bootstrap-table checkbox formatter

bootstrap-table可以通过使用{field: 'state',checkbox: true}来设置某列显示为checkbox复选框，而我们有时需要在数据列表初始化的同时初始化checkbox的选中状态，这时可以通过增加formatter函数来实现{field: 'state',checkbox: true,formatter:stateFormatter}。

function stateFormatter(value, row, index) {
        if (some coditon) {
            return {
                disabled: true,
                checked: true
            };
        }
        return value;
    }

在stat

分类: WEB前端 JS

标签: load .ready

ajax load方法是常用的加载页面的方法，特别是对于SPA单页面应用来说，几乎每个应用都是通过ajax load进行展示的。document.ready方法也是经常使用的方法，document.ready方法将会在document的dom元素加载完成的时候执行。ajax load和document.ready两者结合在一起会发生什么事呢。

假设有A，B两个页面，A页面ajax load B页面，B页面想在页面内容加载完，即document.ready事件里面执行一段方法，能正常执行成功吗。

这时候，结果取决于B页面的元素内容，B页面是一个新的document，还是原来的document。如果是一个新的document，即页面内容包含html节点，document.ready会正常执行，因为这个document是当前新的document。如果当前页面没有包含html节点，document.ready方法会立马执行，因为这个document是旧的document，而旧的document早已ready，所以这时候可能就不是你期望的执行顺序了。

分类: WEB前端 JS

标签: modal 相互遮盖 偏移 溢出

Bootstrap中的modal组件是使用率比较高的组件之一，可modal本身对于同一个页面同时弹出多个modal的情况支持并不是很好，有些人说应该尽量避免同时弹出多个modal，应该关闭之前的modal再弹出新的modal，确实，弹出多个modal会导致页面看起来比较混乱，但不管出于什么原因，我们经常还是会碰到需要弹出多个modal的情况。

首先，碰到的第一个问题就是如果弹出多个modal，会出现相互遮盖的情况。bootstrap对modal的弹层固定了一个z-index，笔者使用的bootstrap版本为3.3.4，z-index值为1050，不同版本可能会不同。使用相同的z-index就会导致后面的弹出层无法遮住前面的弹出层的情况。这时，我们想，如果之后每个弹出层的z-index都能递增就好了，于是，笔者增加了如下代码：

        $(document).on('hidden.bs.modal','.modal',function(e){
     

分类: WEB前端

标签: 表单回车提交 onsubmit

先说结论，当页面表单内只有一个input元素时，按回车，将会自动提交表单，进行页面跳转，这是浏览器的默认行为。有两个例外，一是如果这个表单还包含一个不可见的input元素，即display=none，浏览器认为这是两个元素，不会自动提交（据说火狐不这么认为，未验证）。二是，如果表单还包含type=hidden的元素，浏览器并不认为是一个“有效”元素，将依然执行只有一个元素自动提交原则。

好了，现在如果要控制这种行为，通过上面的描述可以看出，我们可以加一个style=none的元素来实现。如果是采用ajax提交的方法话，还可以通过给form添加onsubmit="return false;"来阻止默认提交行为。

下面是网友总结的form表单回车提交的几种情况，请读者自行验证：

1. 如果表单里有一个type=”submit”的按钮，回车键生效。
2. 如果表单里只有一个type=”text”的input，不管按钮是什么