效果圖先貼上：
點擊新增增加一條新行、行內點擊可進行修改、刪除；
引用文件
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="~/media/css/bootstrap-table.css" />
<link href="~/media/css/bootstrap-editable.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/media/js/bootstrap-editable.js"></script>
<script src="~/Scripts/bootstrap-table-editable.js"></script>
ps：需注意bootstrap版本必須與bootstrap-editable.js的版本一致，我引用的是bootstrap 3的；
代碼貼上：
html：
<div id="toolbarFj" class="btn-group">
<button id="button" class="btn btn-default"><img src="/images/t01.png" />新增</button>
<button id="getTableData" class="btn btn-default"><img src="/images/t20.png" />保存</button>
</div>
<table id="fjTable"></table>
js：
<script>
$(function(){
Binding();
})
//新增
function insert() {
//綁定附件
$('#button').click(function () {
$('#fjTable').bootstrapTable('insertRow', {
index: 0,
row: {
YGFJ_YG_ID: '',
YGFJ_NAME: '',
YGFJ_STATE: '',
YGFJ_BZ: ''
}
});
});
//新增
$('#getTableData').click(function () {
let dataList = JSON.parse(JSON.stringify($('#fjTable').bootstrapTable('getData')));
let data = [];
//新增數組
let addData = [];
for (var i = 0; i < dataList.length; i++) {
if (dataList[i].YGFJ_ID == null) {
//新增數組填充
data.push(dataList[i]);
}
}
$.ajax({
url: '/YGJFJ/AddFj',
type: 'post',
traditional: true,
dataType: 'json',
data: { data: JSON.stringify(data), status: 'add' },
success: function (data) {
if (data == "success") {
alert("新增成功！");
$('#fjTable').bootstrapTable("refresh");
}
},
error: function () {
alert("新增失敗！");
}
})
});
}
//修改
function update(index) {
let dataList = JSON.parse(JSON.stringify($('#fjTable').bootstrapTable('getData')));
let result = [];
for (var i = 0; i < dataList.length; i++) {
if (dataList[i].YGFJ_ID != null) {
//修改數組填充
result.push({ "YGFJ_ID": dataList[i].YGFJ_ID, "YGFJ_YG_ID": dataList[i].YGFJ_YG_ID, "YGFJ_NAME": dataList[i].YGFJ_NAME, "YGFJ_STATE": dataList[i].YGFJ_STATE, "YGFJ_BZ": dataList[i].YGFJ_BZ });
}
}
let data = result[index];//根據下表獲取當前修改的第幾行的數據
$.ajax({
url: '/YGJFJ/AddFj',
type: 'POST',
traditional: true,
data: { data: JSON.stringify(data), status: 'update' },
success: function (data) {
if (data == "success") {
alert("修改成功！");
$('#fjTable').bootstrapTable("refresh");
}
}, error: function () {
alert("修改成功！");
}
});
}
//刪除
function deleteD(id) {
if (confirm('是否確認刪除？')) {
$.ajax({
url: '/YGJFJ/AddFj',
type: 'POST',
traditional: true,
data: { data: JSON.stringify(id), status: 'delete' },
success: function (data) {
if (data=="success") {
alert("刪除成功！");
$('#fjTable').bootstrapTable("refresh");
}
}, error: function () {
alert("刪除失敗！");
}
});
}
}
//綁定表格
function Binding() {
$('#fjTable').bootstrapTable('destroy');
$('#fjTable').bootstrapTable({
fitColumns: true,
toolbar: '#toolbarFj',
striped: true,
pageSize: 5,
//clickToSelect:true,
pageList: [5, 10, 15, 20],
pagination: true,
sortable: true,
dataType: "json",
dataField: "data",
totalField: "totals",
sidePagination: 'server',
pageNumber: 1,
detailView: false,
method: "Get",
url: "/YGJFJ/GetFjList?ts=" + new Date().getTime(),
columns: [[
{
field: "YGFJ_YG_ID", title: "油罐編號", width: 150,
editable: {
type: "select",
source: function () {
var result = [];
$.ajax({
url: '/YGJFJ/GetYG',
type: "get",
async: false,
data: {},
success: function (data, status) {
$.each(data, function (key, value) {
result.push({ value: value.YGJFJ_ID, text: value.YGJFJ_NUM });
});
}
});
return result;
},
placement: 'right',
title: "選擇油罐編號", //編輯框的標題
disabled: false, //是否禁用編輯
mode: "popup", //編輯框的模式：支持popup和inline兩種模式，默認是popup
validate: function (value) { //字段驗證
if (!$.trim(value)) {
return '不能爲空';
}
}
} //動態select
},
{
field: "YGFJ_NAME", title: "附件名稱", width: 150,
editable: {
type: 'text',
title: '附件名稱',
placement: 'right',
emptytext: "空文本",
validate: function (v) {
if (!v) return '附件名稱不能爲空';
}
}
},
{
field: "YGFJ_STATE", title: "狀態", width: 150,
editable: {
type: 'text',
title: '附件名稱',
placement: 'right',
emptytext: "空文本",
validate: function (v) {
if (!v) return '附件名稱不能爲空';
}
}},
{
field: "YGFJ_BZ", title: "備註", width: 150,
editable: {
type: 'text',
title: '附件名稱',
placement: 'right',
emptytext: "空文本",
validate: function (v) {
if (!v) return '附件名稱不能爲空';
}
}
},
{
field: "Operate", title: "操作", width: 55, formatter: function (value,row,index) {
return '<a href="###" onclick="update(\'' + index + '\')"><img src="/images/t022.png" /></a> <a href="###" onclick="deleteD(\'' + row.YGFJ_ID + '\')"><img src="/images/t033.png" /></a>';
}
},
]],
});
}
</script>
後臺代碼：
public JsonResult AddFj(string data, string status)
{
JavaScriptSerializer js = new JavaScriptSerializer();
if (status=="update")
{
SBSSGL_YGFJ sBSSGL_YGFJ = ParseFromJson<SBSSGL_YGFJ>(data);//json轉model
db.Entry(sBSSGL_YGFJ).State = EntityState.Modified;
}
if (status=="add")
{
List<SBSSGL_YGFJ> add = js.Deserialize<List<SBSSGL_YGFJ>>(data);//json反序列化轉list<T>
foreach (var item in add)
{
var insert = new SBSSGL_YGFJ{
YGFJ_ID=Guid.NewGuid(),
YGFJ_YG_ID=item.YGFJ_YG_ID,
YGFJ_NAME=item.YGFJ_NAME,
YGFJ_STATE = item.YGFJ_STATE,
YGFJ_BZ = item.YGFJ_BZ
};
db.SBSSGL_YGFJ.Add(insert);
}
}
if (status == "delete")
{
string id = data.Replace("\"","");
SBSSGL_YGFJ del = db.SBSSGL_YGFJ.Find(Guid.Parse(id));
db.SBSSGL_YGFJ.Remove(del);
}
db.SaveChanges();
return Json("success");
}
/// <summary>
/// 獲取Json的Model
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="szJson"></param>
/// <returns></returns>
public static T ParseFromJson<T>(string szJson)
{
T obj = Activator.CreateInstance<T>(); //注意 要有T類型要有無參構造函數
using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(szJson)))
{
DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
return (T)serializer.ReadObject(ms);
}
}