Editable.php 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <?php
  2. namespace Dcat\Admin\Grid\Displayers;
  3. use Dcat\Admin\Admin;
  4. class Editable extends AbstractDisplayer
  5. {
  6. protected $selector = 'grid-column-editable';
  7. public function display($refresh = false)
  8. {
  9. $this->addScript();
  10. $this->addStyle();
  11. $label = __('admin.save');
  12. return <<<HTML
  13. <div class="d-inline">
  14. <span class="{$this->selector}" contenteditable="true">{$this->value}</span>
  15. <span class="save hidden"
  16. data-value="{$this->value}"
  17. data-name="{$this->column->getName()}"
  18. data-id="{$this->getKey()}"
  19. data-refresh="{$refresh}"
  20. data-url="{$this->getUrl()}">
  21. {$label}
  22. </span>
  23. <div class="d-none"></div>
  24. </div>
  25. HTML;
  26. }
  27. protected function getUrl()
  28. {
  29. return $this->resource().'/'.$this->getKey();
  30. }
  31. protected function addStyle()
  32. {
  33. $color = Admin::color()->link();
  34. $primary = Admin::color()->primary();
  35. Admin::style(
  36. <<<CSS
  37. .{$this->selector}{border-bottom:dashed 1px $color;color: $color;display: inline-block; -webkit-user-modify: read-write-plaintext-only;}
  38. .{$this->selector}+.save{margin-left: 0.4rem;color: $color}
  39. body.dark-mode .{$this->selector}{color: $primary;border-color: $primary;}
  40. body.dark-mode .{$this->selector}+.save{color: $primary}
  41. CSS
  42. );
  43. }
  44. protected function addScript()
  45. {
  46. $script = <<<JS
  47. $(".{$this->selector}").on("click", function() {
  48. $(this).next().removeClass("hidden");
  49. }).on('blur', function () {
  50. var icon = $(this).next();
  51. setTimeout(function () {
  52. icon.addClass("hidden")
  53. }, 200)
  54. });
  55. $('.{$this->selector}+.save').on("click",function() {
  56. var obj = $(this),
  57. url = obj.data('url'),
  58. name = obj.data('name'),
  59. refresh = obj.data('refresh'),
  60. old_value = obj.data('value'),
  61. value = obj.prev().html(),
  62. tmp = obj.next();
  63. tmp.html(value);
  64. value = tmp.text().replace(new RegExp("<br>","g"), '').replace(new RegExp("&nbsp;","g"), '').trim();
  65. var data = {
  66. _token: Dcat.token,
  67. _method: 'PUT'
  68. };
  69. if (name.indexOf('.') === -1) {
  70. data[name] = value;
  71. } else {
  72. name = name.split('.');
  73. data[name[0]] = {};
  74. data[name[0]][name[1]] = value;
  75. }
  76. Dcat.NP.start();
  77. $.ajax({
  78. url: url,
  79. type: "POST",
  80. data: data,
  81. success: function (data) {
  82. if (data.status) {
  83. obj.attr('data-value',value).addClass("hidden").prev().html(value);
  84. Dcat.success(data.message);
  85. refresh && Dcat.reload()
  86. } else {
  87. obj.prev().html(old_value);
  88. Dcat.error(data.message);
  89. }
  90. },
  91. error:function(a,b,c) {
  92. obj.prev().html(old_value);
  93. Dcat.handleAjaxError(a, b, c);
  94. },
  95. complete:function(a,b) {
  96. Dcat.NP.done();
  97. }
  98. });
  99. return false;
  100. })
  101. JS;
  102. Admin::script($script);
  103. }
  104. }