Bootstrap Table 使用教程进阶篇 之 指定数据标记颜色

Html

Ajax

function trID(t) {
tr_id = $(t).parents('tr').attr("id");
sessionStorage.trid = tr_id;
$(function () {
$('#'+tr_id+'').editable({
type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等
source: [{ value: style = 'background-color:#99CCFF;', text: "蓝色" }, { value: style = 'background-color:#FF6666;', text: "红色" }, { value: style = '', text: "无" }],
title: "选择颜色",           //编辑框的标题
disabled: false,           //是否禁用编辑
emptytext: "空文本",       //空值的默认文本
mode: "popup",            //编辑框的模式：支持popup和inline两种模式，默认是popup
validate: function (value) { //字段验证
if (!$.trim(value)) {
return '不能为空';
}
},
});
});
}
function editable_ok() {
$.post("/DAOZBIZ/update_style",
id: sessionStorage.trid,
zhi: $("#select_id").val()
},
function (data) {
if (data == 0) {
swal("修改成功!", "你更新了一条数据", "success");
document.location.reload();
return true;
}
});
}

Controller

//修改tr颜色
public void update_style()
{
  string id = Request.Params["id"];
  string zhi = Request.Params["zhi"];
  var update = db.DAOZ.FirstOrDefault(f => f.DZID == id);
  if (update != null)
   {
      update.DZID = id;
      update.DZ_STYLE = zhi;
   }
    db.SaveChanges();
    Response.Write("0");
}

修改bootstrap-editable.js

由于我使用了bootstrap-editable.js所以需要修改一下Js文件。
搜索//buttons 添加οnclick="editable_ok()"

//buttons 
 $.fn.editableform.buttons = 
  '' +
  ''+
  ''+
  ''+
  ''+
  '';