Bootstraptable-editable在线编辑表格


bootstrap-table-editable.js
首先来看看bootstrap-table-editable.js这个文件
这个js其实是对x-editable做了一个简单的封装,增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础,于是我们行内编辑的代码变成了这样。
需要引用的文件如下:
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
//(****************************************
js 代码
$(function () {
        $("#tb_user").bootstrapTable({
            toolbar: "#toolbar",
            idField: "Id",
            pagination: true,
            showRefresh: true,
            search: true,
            clickToSelect: true,
            queryParams: function (param) {
                return {};
            },
            url: "/Editable/GetUsers",
            columns: [{
                checkbox: true
            }, {
                field: "UserName",
                title: "用户名",
                editable: {
                    type: 'text',
                    title: '用户名',
                    validate: function (v) {
                        if (!v) return '用户名不能为空';
                    }
                }
            }, {
                field: "Age",
                title: "年龄",
            }, {
                field: "Birthday",
                title: "生日",
                formatter: function (value, row, index) {
                    var date = eval('new ' + eval(value).source)
                    return date.format("yyyy-MM-dd");
                }
            },
            {
                field: "DeptName",
                title: "部门"
            }, {
                field: "Hobby",
                title: "爱好"                
            }],
            onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/Editable/Edit",
                    data: row,
                    dataType: 'JSON',
                    success: function (data, status) {
                        if (status == "success") {
                            alert('提交数据成功');
                        }
                    },
                    error: function () {
                        alert('编辑失败');
                    },
                    complete: function () {
                    }
                });
            }
        });
    });
//*********************
后台对应的更新方法
        public JsonResult Edit(User user)
        {
            //更新实体
            return Json(new { }, JsonRequestBehavior.AllowGet);
        }
经过测试,用户名这一列基本可以自由编辑。同样,年龄这一列也可改成这样
复制代码
        {
                field: "Age",
                title: "年龄",
                editable: {
                    type: 'text',
                    title: '年龄',
                    validate: function (v) {
                        if (isNaN(v)) return '年龄必须是数字';
                        var age = parseInt(v);
                        if (age <= 0) return '年龄必须是正整数';
                    }
                }
            }
复制代码
有了上面的知识作为基础,我们来初始化生日这一列:
复制代码
            {
                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: '生日'
                }
            }
复制代码
表单编辑里面还有一个重要的标签就是select了。上文我们知道x-editable为我们提供了下拉框的编辑模式,比如我们的部门这一列的编辑可以写成这样:
复制代码
        {
                field: "DeptId",
                title: "部门",
                editable: {
                    type: 'select',
                    title: '部门',
                    source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]
                }
            }
复制代码
 {
                field: "DeptId",
                title: "部门",
                editable: {
                    type: 'select',
                    title: '部门',
                    source: function () {
                        var result = [];
                        $.ajax({
                            url: '/Editable/GetDepartments',
                            async: false,
                            type: "get",
                            data: {},
                            success: function (data, status) {
                                $.each(data, function (key, value) {
                                    result.push({ value: value.ID, text: value.Name });
                                });
                            }
                        });
                        return result;
                    }
                }
            }
//**************************
除了上述几种常见的编辑框,x-editable还为我们提供了复选框组的编辑。比如:
复制代码
       {
                field: "Hobby",
                title: "爱好",
                editable: {
                    type: "checklist",
                    separator:",",
                    source: [{ value: 'bsb', text: '篮球' },
                         { value: 'ftb', text: '足球' },
                         { value: 'wsm', text: '游泳' }],
                }
            }
复制代码

posted on 2020-06-16 09:51 青蛙學堂 阅读(26) 评论(0)  编辑 收藏 引用 所属分类: JavaScript

只有注册用户登录后才能发表评论。
<2020年6月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

导航

统计

常用链接

留言簿(7)

随笔分类

随笔档案

收藏夹

青蛙学堂

最新评论

阅读排行榜

评论排行榜

60天内阅读排行