• bootstrap教程-table表格实现编辑效果
  • Kelly 发表于 2016/2/23 10:57:00 | 分类标签: bootstrap教程 编辑表格
  • 编辑前:
    点击编辑:
    编辑后:
    关于表格行内编辑,需要使用bootstrap table扩展的几个js文件。

    1、引入额外的js文件
    <link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
    <script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
    <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
    2、在cshtml页面定义表格时,添加两个属性
    <table id="tb_departments">
    <thead>
    <tr>
    <th data-field="Name" data-editable="true">部门名称</th>
    <th data-field="ParentName">上级部门</th>
    <th data-field="Level" data-editable="true">部门级别</th>
    <th data-field="Desc" data-editable="true">描述</th>
    </tr>
    </thead>
    </table>
    如果是在js里面初始化,写法如下:
    {
    field: "name",
    title: "名称",
    editable:true
    }
    3、在js里面初始化表格的时候注册编辑保存的事件
    $('#tb_departments').bootstrapTable({
    url: '/Editable/GetDepartment', //的URL*
    method: 'get', //*
    toolbar: '#toolbar', //
    striped: true, //
    cache: false, //使为true*
    pagination: true, //*
    sortable: false, //
    sortOrder: "asc", //
    queryParams: oTableInit.queryParams,//*
    sidePagination: "server", //:client,server*
    pageNumber: 1, //
    pageSize: 10, //*
    onEditableSave: function (field, row, oldValue, $el) {
    $.ajax({
    type: "post",
    url: "/Editable/Edit",
    data: { strJson: JSON.stringify(row) },
    success: function (data, status) {
    if (status == "success") {
    alert("编辑成功");
    }
    },
    error: function () {
    alert("Error");
    },
    complete: function () {

    }

    });
    }
    });
    重点还是看看这个事件的处理方法
           onEditableSave: function (field, row, oldValue, $el) {
    $.ajax({
    type: "post",
    url: "/Editable/Edit",
    data: { strJson: JSON.stringify(row) },
    success: function (data, status) {
    if (status == "success") {
    alert("编辑成功");
    }
    },
    error: function () {
    alert("Error");
    },
    complete: function () {

    }

    });
    }
    对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:Kelly
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮