bootstrap table使用参考

https://www.cnblogs.com/landeanfen/p/5821192.html  转载

阅读目录

• 一、x-editable组件介绍
• 二、bootstrapTable行内编辑初始方案
• 三、bootstrapTable行内编辑最终方案
  • 1、文本框
  • 2、时间选择框
  • 3、下拉框
  • 4、复选框
  • 5、“阴魂不散”的select2
• 四、总结

正文

前言：之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近项目里面还是打算将行内编辑用起来，于是再次研究了下x-editable组件，遇到过一些坑，再此做个采坑记录吧！想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器：bootstrap table。

本文原创地址：http://www.cnblogs.com/landeanfen/p/5821192.html

回到顶部https://github.com/vitalets/x-editable

x-editable文档地址：http://vitalets.github.io/x-editable/docs.html

x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html

 1、x-editable初体验。

首先下载基于bootstrap的源码到本地。引用相关文件。

 页面元素

用户名

js初始化

    $(function () {
        $('#username').editable();
    });

效果展示

上面是通过html的data属性去设置x-editable的参数，当然，我也可以在初始化的时候去设置参数，比如，我仅仅给一个空的a标签：

用户名

js初始化

    $(function () {
        $('#username').editable({
            type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等
            title: "用户名",              //编辑框的标题
            disabled: false,             //是否禁用编辑
            emptytext: "空文本",          //空值的默认文本
            mode: "inline",              //编辑框的模式：支持popup和inline两种模式，默认是popup
            validate: function (value) { //字段验证
                if (!$.trim(value)) {
                    return '不能为空';
                }
            }
        });

    });

查看效果

再来个稍微复杂一点的

选择部门

    $(function () {
        $('#department').editable({
            type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等
            source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],
            title: "选择部门",           //编辑框的标题
            disabled: false,           //是否禁用编辑
            emptytext: "空文本",       //空值的默认文本
            mode: "popup",            //编辑框的模式：支持popup和inline两种模式，默认是popup
            validate: function (value) { //字段验证
                if (!$.trim(value)) {
                    return '不能为空';
                }
            }
        });

    });

查看效果

上文只是给出了一些常用字段，当然x-editable组件还有很多其他的功能参数，有兴趣可以看看文档，官方文档对每个参数都有详细的说明。 

回到顶部

bootstrapTable的相关初始化

后台方法

 后台测试方法

这样确实是可以实现想要的效果，貌似也能行内编辑了，可是如果没个列都需要行内编辑，并且列的个数很多，那么是不是每个列都得这样去formmater？并且这种写法狠显然很死板，博主着实难以接受。于是又找了找例子，发现在bootstrapTable的扩展里面存在bootstrap-table-editable.js这个js。

回到顶部 回到顶部回到顶部回到顶部回到顶部回到顶部

代码尝试

　　　　　　　　{
                field: "Hobby",
                title: "爱好",
                editable: {
                    type: 'select2',
                    title: '爱好',
                    name: 'Hobby',
                    placement: 'top',
                    success: function (response, newValue) {
                        debugger;
                    },
                    error: function(response, newValue) {
                        debugger;
                    },
                    url: function(params) {
                        debugger;
                    },
                    source: [{ id: 'bsb', text: '篮球' },
                             { id: 'ftb', text: '足球' },
                             { id: 'wsm', text: '游泳' }],
                    inputclass: 'input-large',
                    select2: {
                        allowClear: true,
                        multiple: true,
                    } 
                }
            }

得到结果：

 结果发现select2的选中值不能正常传递到后台。反正博主试过各种参数，按照官方demo的写法也试过，均以失败告终。也不知道官方的demo如何成功的。这个问题先抛出来，如果有使用的园友欢迎指正与解答。后续如果博主解决了这个问题，也会在此更新。 

回到顶部http://www.cnblogs.com/landeanfen/