白日何短短,百年苦易满

Bootstrap数据交互小总结

现在项目的后台先前是用easyui这个前端框架完成交互的,但美观程度实在不敢恭维,所以老大就叫我用bootstrap这个前端框架将其替换。但对一个很少顾及前端,通常只求数据展示出来且界面不太难看就万事大吉的前端渣程序猿来说,还是有一定挑战的。遇到不会的就问度娘,但问了半天,遇到的大多数问题还是在老大帮助和自己摸索下解决的,所以,我竟断断续续用了N天的时间才完成。在文章的后面我会将摸索过程中搜集的相关资料、插件也一并附上,希望对各位看官有用,而且把此文当作资料,以后若有遗忘也可翻看。当然,大神不喜勿喷哈

需要特别指出的是,我这篇小总结主要讲的是如何利用jquery.form、bootstrap-table(非原生)、bootstrap模态框完成与java action类的数据交互,由于bootstrap的基本使用很简单,不会的亲可去官网看API。另外,bootstrap-table本生有很多事件可完成一系列操作,但在具体情况下也许就不那么适用了,还望各位看官自我斟酌。

Bootstrap中文官网:www.bootcss.com 觉得看API太吃力的亲推荐去极客学院看视频教程:www.jikexueyuan.com

1、使用bootstrap-table展示数据及分页:

 

table-view

tableview2

 

在js中写一个名为initData()的函数,通过加载函数调用并传入相关参数,ajax访问action返回数据后,表名.bootstrapTable(‘load’,$.parseJSON(JSON.stringify(data.rows)))就可直接加载返回的数据,非常之方便!但这里有个一直没弄明白的小问题,按理说action返回到jsp页面的json数据可直接作为’load’的值(在某些页面我是这样做的),但在这里必须将json数据线转换成string(也就是:JSON.stringify(data.rows)),再用$.parseJSON将string转为json的,表格才能显示出数据,在这里就不再深究。再来看看jsp页面,大家看table属性名也可知其含义。Bootstrap-table最大的便利就在于不用再在js中拼凑html展示数据,而且它自带搜索框、刷新、单选多选框等,使用起来非常便捷.就比如搜索框,在table标签中加入data-search=“true”就可直接实现模糊查询功能,甚至不用再在action中多写方法。

 

table

 

分页可用bootstrap-table自带的,在这里我用的是bootstrap-paginator插件,因为bootstrap-table自带分页没调出来,在table标签属性中加入data-pagination=“true”后只是文字显示出了表中数据量的文字记录,如下图红框中:

 

table-pagination

 

2、使用jquery.form提交表单保存数据:

 

formjs

formhtml

 

使用jquery.form这款ajax表单插件提交保存数据也非常简单,它有两个核心方法ajaxForm()和ajaxSubmit()。通过beforeSubmit和success可指定函数处理“提交前和处理完成后”的相关业务,通常用于打印日志或提示信息。

 

3、使用bootstrap 模态框,利用js弹出界面,调用展示远程数据:

 

使用bootstrap的模态框时,如果你要在弹出的页面中展示远程数据,不建议去看官方api,官方api中并没有清楚地阐明。如下图的html部分,给button标签加入相应属性使其成为弹出模态框的按钮。

 

modalbtn

模态框html

 

上图div中模态框应放在body之前的根标签中,远程调用的数据会展示在class=”modal-body”的div中。

 

模态框js

 

当点击按钮后执行tableradios2()函数,由于这里是编辑单选框选择的行信息,先通过表名.bootstrapTable(‘getSelections’)得到行信息,然后判断是否选中,若没选中则先将按钮的data-toggle属性移除,若不移除则会弹出一个空白的模态框,这样不符合业务.紧接着刷新页面,将一切重置,当然,直接刷新其实并不利于用户体验,建议用其它办法解决这个问题。当选中行信息后将得到的数据进行遍历得到相应id,然后为按钮添加data-remote属性,并指定url传入id,这样就可在模态框中展示出action类传过来的数据。

 

下面再附上我引入的全部js插件,方便大家参考:

 

jscss

 

另外,在bootstrap中进行文件上传删除、图片查看等操作与通常的差别很小,也有相应的插件,使用起来非常便利,在这里就不多说。以后有空再附上相应的总结。最后再附上搜集的相关资料供大家参考。

Bootstrap及bootstrap-table使用示例及其插件:

百度网盘:http://pan.baidu.com/s/1eRYziH8 若网盘链接失效可给我发邮件:me@xuhongtao.cn 我会第一时间回复你

Bootstrap-table插件官网:http://bootstrap-table.wenzhixin.net.cn

Bootstrap模态框 传值:http://www.360doc.com/content/14/0811/10/281812_400977275.shtml

bootstrap table使用小记:http://www.bubuko.com/infodetail-923383.html

Bootstrap 模态对话框只加载一次 remote 数据的解决办法:http://my.oschina.net/qczhang/blog/190215?fromerr=VhWU7auE

Ajax表单提交插件jquery form:http://www.helloweba.com/view-blog-236.html

未经允许不得转载:徐宏涛博客 » Bootstrap数据交互小总结

分享到:更多 ()

评论 抢沙发

评论前必须登录!