X-editable

示例

默认

我是内容哦

带校验的

嘻嘻

选择框

我是内容哦

checklist

嘻嘻

ajax 示例

我是内容哦

inline 模式

我是内容哦

事件触发

随便的内容配置

<div class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">默认</label>
    <div class="col-sm-4">
      <p class="control-label pull-left" id="js_editable01">我是内容哦</p>
    </div>
    <label class="col-sm-2 control-label">带校验的</label>
    <div class="col-sm-4">
      <p class="control-label pull-left" id="js_editable02">嘻嘻</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">选择框</label>
    <div class="col-sm-4">
      <p class="control-label pull-left" id="js_editable03" data-type="select">我是内容哦</p>
    </div>
    <label class="col-sm-2 control-label">checklist</label>
    <div class="col-sm-4">
      <p class="control-label pull-left" id="js_editable04" data-type="checklist">嘻嘻</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">ajax 示例</label>
    <div class="col-sm-4">
      <p class="control-label pull-left" id="js_editable05" data-url="/api/test" data-name="name1" data-pk="abcd">我是内容哦</p>
    </div>
    <label class="col-sm-2 control-label">inline 模式</label>
    <div class="col-sm-4">
      <p class="control-label pull-left" id="js_editable06" data-url="/api/test" data-name="name1" data-pk="abcd">我是内容哦</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">事件触发</label>
    <div class="col-sm-10"><span id="js_editable07" class="js-item-xe">随便的内容</span><span style="margin-left: 30px; cursor: pointer;" class="js-open-xe text-info">配置</span></div>
  </div>
</div>

$(function() {
  $.fn.editable.defaults.emptytext = '空'
  $.fn.editable.defaults.emptyclass = 'text-primary'
  $.fn.editable.defaults.error = function() {
    return '请求发送错误';
  }
  $('#js_editable01').editable();
  $('#js_editable02').editable({
    validate: function(value) {
      if ($.trim(value) == '') {
        return '不能为空';
      }
    }
  });
  $('#js_editable03').editable({
    source: [{
        text: '内容1',
        value: '1'
      },
      {
        text: '内容2',
        value: '2'
      },
      {
        text: '内容3',
        value: '3'
      },
    ]
  });
  $('#js_editable04').editable({
    source: [{
        text: '内容1',
        value: '1'
      },
      {
        text: '内容2',
        value: '2'
      },
      {
        text: '内容3',
        value: '3'
      },
    ]
  });
  $('#js_editable05').editable({
    success: function(res, newVal) {
      console.log('success--', res, newVal);
      // return {newValue: null}
      return {
        success: false,
        msg: 'abc'
      }
      // return '123'
    }
  });
  $('#js_editable05').on('save', function(e, editable) {
    console.log(e, editable);
  })
  $('#js_editable06').editable({
    mode: 'inline'
  })
  $('#js_editable07').editable({
    mode: 'inline',
    toggle: 'manual'
  }).on('hidden', function(e) {
    console.log(arguments.length);
    // console.log($(this));
    if (arguments.length != 2) return
    $(this).next('.js-open-xe').show()
  })
  $(document).on('click.open', '.js-open-xe', function(e) {
    e.stopPropagation();
    $(this).hide().prev('.js-item-xe').editable('show');
  })
});

<link rel="stylesheet" href="../css/plugins/x-editable/bootstrap-editable.css">

X-editable 组件