bootstrap的editTable實現方法

首先下載基於bootstrap的源碼到本地。引用相關文件。

<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>

table初始化時的代碼： 

{
        field: 'userName',
        title: '姓名',
        sortable: true,
        align: 'center',
        editable: {
        type:"text",
        onblur: "submit",
        showbuttons: false,
        validate:function (v) {
                if (!v) return '姓名不能為空';
        }
        }
      },

 

 onEditableSave: function (field, row, oldValue, $el) {

$.ajax({
            
         //在bootstrap table中編輯完成后調用的方法

//可以進行數據的保存工作
      }

 

具體的業務代碼就不一一列舉了。

如有問題，可以留言一起討論。