分类: WEB前端 > JS

页面checkbox向后台传值需注意的一个细节

发表于1年前(Mar 17, 2017 8:26:58 PM)  阅读 731  评论 0

分类: 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

......

bootstrap弹出多个modal导致前面modal的滚动条失效

发表于1年前(Mar 9, 2017 5:09:29 PM)  阅读 1975  评论 0

分类: WEB前端 JS 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,这样变成全局更方便使用了。

Bootstrap Tooltip在页面出现滚动条时定位不准确

发表于1年前(Feb 26, 2017 12:04:52 PM)  阅读 1080  评论 0

分类: WEB前端 JS

标签: 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
......

处理ajax服务由于登录超时返回异常的情况

发表于1年前(Feb 26, 2017 12:04:08 PM)  阅读 763  评论 0

分类: Java WEB前端 JS

标签: ajax 登录超时 401 UNAUTHORIZED

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

DhtmlXGrid适配器

发表于1年前(Dec 15, 2016 12:07:59 PM)  阅读 809  评论 0

分类: 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代码。

 

......

jQuery使用data方法获取DOM绑定事件

发表于1年前(Nov 23, 2016 8:57:30 PM)  阅读 622  评论 0

分类: 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');

bootstrap-table复选框增加默认值

发表于1年前(Nov 20, 2016 12:09:48 AM)  阅读 2825  评论 0

分类: 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

......

ajax load content .ready

发表于2年前(Jul 12, 2016 11:07:51 AM)  阅读 735  评论 0

分类: 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,所以这时候可能就不是你期望的执行顺序了。

......

Bootstrap同时弹出多个模态窗口Modal时的几个问题

发表于2年前(Jun 15, 2016 10:47:49 AM)  阅读 8985  评论 2

分类: 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){
     
......

jquery.zclip生成的flash坐标位置不对

发表于2年前(Jun 5, 2016 9:05:02 AM)  阅读 746  评论 0

分类: WEB前端 JS

标签: jquery.zclip ZeroClipboard 操作剪贴板 offsetParent scrollTop scrollLeft

出于安全的考虑,浏览器对代码操作的内容有所限制,像不允许不经用户同意就下载文件到本地,不经用户确定就进入全屏状态,不经用户点击就操作剪贴板等。今天要讲的内容就是关于操作剪贴板的。

由于各浏览器对操作剪贴板的支持不一致,有的甚至不支持操作剪贴板,如果要写一个通用的操作剪贴板的代码,几乎是不可能的事。现在比较完善的一个方案是采用flash的方式,ZeroClipboard就是用来解决跨浏览器操作剪贴板兼容的问题,jquery.zclip是其jquery插件的封装。

ZeroClipboard的原理就是将要点击的按钮,替换成一个透明的flash,然后用户点击按钮的时候,实际上是点击的flash文件,这时flash操作剪贴板完成复制功能,因为flash的跨浏览器特性,使得这一功能也不受浏览器类型影响。当然,前提是要装有flash插件。

示例代码:

            $(".op-link").zclip({
......