bootstrap-table 行内编辑

bootstrap-table 行内编辑

1.输入框

2.下拉框

3.复选框

4.日期组件

案例地址：

x-editable开源地址：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

前提

需要引入的js+css

<link href="/ajax/libs/bootstrap-table/locale/css/bootstrap.min.css" rel="stylesheet" />
<th:block th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.css}"  rel="stylesheet"></th:block>
<link href="/ajax/libs/bootstrap-table/locale/css/bootstrap-table.min.css" rel="stylesheet" />

<script th:src="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-table-editable.js}"></script>
           

1.输入框

$(function () {
        $("#myTable").bootstrapTable({
            idField: "Id",
            url: "/edit",
            columns: [{
                checkbox: true
            }, {
                field: "personName",
                title: "用户名",
                editable: {
                    type: 'text',
                    title: '用户名',
                    validate: function (result) {
                        if (!result)
                        return '用户名不能为空';

                    }
                }
            }, 
            {
                field: "Hobby",
                title: "爱好"                
            }],
            onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/edit",
                    data: row,
                    dataType: 'JSON',
                    success: function (data, status) {
                        if (status == "success") {
                            alert('提交数据成功');
                        }
                    },
                    error: function () {
                        alert('编辑失败');
                    },
                    complete: function () {

                    }

                });
            }
        });
    });
           

2.下拉框

{
	field: "classes",
	title: "班级",
	editable: {
	type: 'select',
	title: '班级',
	source: function () {
		var result = [];
		$.ajax({
		    url: '/getClassesList',
		    async: false,
		    type: "get",
		    data: {},
		    success: function (rs, status) {
		        $.each(rs, function (key, data) {
		            result.push({ value: data.value, 
		            text: data.Name});
		        });
		    }
	     });
	   return result;
	 }
   }
}



           

3.复选框

　{
      field: "foods",
      title: "食物",
      editable: {
          type: "checklist",
          separator:",",
          source: [{ value: 'a', text: '苹果' },
               { value: 'o', text: '橙子' },
               { value: 'b', text: '梨子' }],
      }
  }
           

4.日期组件


```bash
 {
            field: "Birthday",
            title: "生日",
            formatter: function (value, row, index) {
                var date = eval('new ' + eval(value).source)
                return date.format("yyyy-MM-dd");
            },
            editable: {
                type: 'date',
                title: '生日'
            }
        }
           

注意：

编辑保存添加属性 onEditableSave

[ {
     field: 'secretId',
     title: '密级编号'
  },
  {
    field: 'secDataLevel',
    title: '数据级别',
    editable: {
        type: "checklist",
        separator:",",
        source: function () {
            var result = [];
            $.each(datas, function (key, value) {
             result.push({value:value.dictValue,text:value.dictLabel });
            });
            return result;
        },
    }
  },

{
    field: 'createBy',
    title: '创建人'
},
{
    field: 'createTime',
    title: '创建时间'
},
{
    field: 'updateBy',
    title: '修改人'
},
{
    field: 'updateTime',
    title: '修改时间'
}
],
 onEditableSave:function (filed,row,oldValue,$el) {
    $("#bootstrap-table").bootstrapTable("resetView")
    var data ={}
    data.secId = row.secId
    data.secLevel=row.secDataLevel.toString();
           $.ajax({
                type: "post",
                url:prefix + "/edit",
                data:data,
                dataType:'JSON',
                success:function (result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                    $.operate.successCallback(result);
                },
                error:function (result) {
                    alert("修改失败")
                },
                complete:function () {
                }
            })
      }