8.3　笔者的建议

8.3　笔者的建议

总地来说，3个小时完成这么多内容，还是很不错的，但是真正了解Bootstrap以后，其实还可以做得更好，但是也需要一些相关的技巧。

举个例子，在使用modal的时候，对New按钮的弹窗内容，如果默认隐藏在当前页，使用jQuery的validate控件的话，就需要给Create按钮的click事件做一个回调来触发表单的submit事件，部分validate验证是没办法起作用的。但是如果这个表单的内容是采用ajax获取的（例如使用了MVC的model绑定），就算添加了回调也是没用的，原因是validate插件只对现有DOM对象里的表单进行验证，ajax获取的表单属于后来附加上去的，根本就没有绑定相关的validate事件。

所以上述问题的解决方案是，在modal弹出的show事件里重新绑定应用的插件。举个例子，笔者之前在Asp.net MVC项目里使用到了jquery.validate.unobtrusive.js插件，修改后的绑定代码如下：

$('#newPopUp').on('show.bs.modal', function (e) {
    $.validator.unobtrusive.parse($(this).find("form"));  // 对modal内的form重新
                                                                   // 绑定validate事件
})

几乎绝大部分插件在modal上使用的时候都要进行这种重新绑定，比如BootSwitch、Date Time Picker等。它们的重新绑定代码如下：

$('#newPopUp').on('show.bs.modal', function (e) {
    var popup = $(this);
 
    if ($.fn.bootstrapSwitch) {
        popup.find("form .switch")['bootstrapSwitch']();
    }
 
    if ($.fn.datepicker) {
        popup.find('form .datepicker').datepicker().on('changeDate', function (ev) {
            $(this).datepicker('hide');
        });
    }
})

另外，针对上述表格的制作，笔者还有一些建议。相信在考虑了这些建议以后，制作出的网页，可能会让老板（或客户）更加满意。那就来看看都是什么样的小建议吧。

❑分页数字的方框宽度不一样，如果是3位数字，就会变得大小不一，需要根据实际情况调节。

❑鼠标hover时每个tr的背景色要换成自定义的颜色的话，还得再改造一下。

❑如果要做响应式表格，又该如何呢？

❑目前只是一个表格，怎么融合到整个页面里？比如左边的菜单和顶部的菜单，如果有冲突该怎么办？

❑如果表格里没有记录，如何提示“无记录”这样的显示，并且优化相应的背景色。

❑表头的背景颜色能否自定义？

❑如果需要搜索功能，又该如何做？

❑如果需要设置每页显示的记录数（pagesize），该怎么放合适？

❑是否能找个地方添加一个跳转页码的功能？

❑如果提示“添加成功”、“删除成功”之类的信息的话，如何做带有动画过渡效果的提示？

❑如果modal使用ajax获取内容，是自己组装，还是使用remote参数？

❑如果是自己组装内容，可以使用模板绑定插件，比如使用Underscore插件进行模板处理。

❑如果使用remote参数的话，还要注意它会替换modal内的所有内容（包括head、body、foot）。

相信，针对这些小细节调整以后，会获得意想不到的效果。大家有时间的话，可以慢慢完善这个表格，相信大部分的Web系统都会使用到表格，届时你就会非常轻松了。

8.3 笔者的建议