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

  • A+
所属分类:Bootstrap Table

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

Html

  1. <a style='padding-left:10px;'  onclick='trID(this)' title='标记' class='to'><i class='fa fa-paint-brush'></i></a>  

Ajax

  1. function trID(t) {  
  2. tr_id = $(t).parents('tr').attr("id");  
  3. sessionStorage.trid = tr_id;  
  4. $(function () {  
  5. $('#'+tr_id+'').editable({  
  6. type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等  
  7. source: [{ value: style = 'background-color:#99CCFF;', text: "蓝色" }, { value: style = 'background-color:#FF6666;', text: "红色" }, { value: style = '', text: "无" }],  
  8. title: "选择颜色",           //编辑框的标题  
  9. disabled: false,           //是否禁用编辑  
  10. emptytext: "空文本",       //空值的默认文本  
  11. mode: "popup",            //编辑框的模式:支持popup和inline两种模式,默认是popup  
  12. validate: function (value) { //字段验证  
  13. if (!$.trim(value)) {  
  14. return '不能为空';  
  15. }  
  16. },  
  17. });  
  18. });  
  19. }  
  20. function editable_ok() {  
  21. $.post("/DAOZBIZ/update_style",  
  22. id: sessionStorage.trid,  
  23. zhi: $("#select_id").val()  
  24. },  
  25. function (data) {  
  26. if (data == 0) {  
  27. swal("修改成功!""你更新了一条数据""success");  
  28. document.location.reload();  
  29. return true;  
  30. }  
  31. });  
  32. }  

Controller

  1. //修改tr颜色  
  2. public void update_style()  
  3. {  
  4.   string id = Request.Params["id"];  
  5.   string zhi = Request.Params["zhi"];  
  6.   var update = db.DAOZ.FirstOrDefault(f => f.DZID == id);  
  7.   if (update != null)  
  8.    {  
  9.       update.DZID = id;  
  10.       update.DZ_STYLE = zhi;  
  11.    }  
  12.     db.SaveChanges();  
  13.     Response.Write("0");  
  14. }  

修改bootstrap-editable.js

  1. //buttons   
  2.  $.fn.editableform.buttons =   
  3.   '<button type="submit" onclick="editable_ok()" class="btn btn-primary btn-sm editable-submit">' +  
  4.   '<i class="glyphicon glyphicon-ok"></i>'+  
  5.   '</button>'+  
  6.   '<button type="button" class="btn btn-default btn-sm editable-cancel">'+  
  7.   '<i class="glyphicon glyphicon-remove"></i>'+  
  8.   '</button>';     

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

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

钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: