简单介绍

官方地址:X-editable :: In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery


这个插件在介绍 bootstrap-table 的时候,我们已经使用过了,它是 bootstrap-table 表格编辑功能的基础依赖,而它也可以当作独立的插件在更多的场景中使用,官方的 Demo 已然很详细了,如下图所示:


image.png


引入文件

安装采用 bower 包管理器,安装命令 bower install --save x-editable ,安装完成后,引入 1 个 css 文件,1 个 js 文件,如下所示:


<!-- x-editable -->
<link rel="stylesheet" href="/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css">

<!-- x-editable -->
<script src="/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>


当然,jQuery 不要忘了引入,且要放到 x-editable js 文件之前。


HTML 部分

最常用的方式是使用 a 标签,如下:


<a href="#" class="text">lupeng</a>


JS 调用

调用 editable 函数即可,函数内传入参数对象,如下所示:


// 文本框
$('a.text').editable({
  type: 'text',
  pk: 1,
  title: '修改用户名',
  name: 'name',
  url: '/ajax/x-editable/post'
});


上面有几个参数:type 表示编辑框的类型,pk 表示更新条目的主键,title 为弹出框的标题,name 为表单字段名称。样式如下图:


image.png


这些参数都可以通过 data-* 的写法,写到 HTML 的属性中,如下所示:


<a href="#" class="text" data-type="text" data-pk="1" data-title="修改用户名" data-name="name" data-url="/ajax/x-editable/post">lupeng</a>


我建议的写法是:除了 url 其他参数都写进 HTML。除了上面的主要几个参数,还有一些特殊的,例如:


select & select 远程

type 为 select,选择框里的选项列表,通过参数 source 来定义。选项分为固定以及远程获取。如下代码所示


// 选择框
$('a.select').editable({
  url: '/ajax/x-editable/post',
  source: [
    { value: '', text: '请选择' },
    { value: '男', text: '男' },
    { value: '女', text: '女' }
  ]
});

// 远程选择
$('a.selectR').editable({
  url: '/ajax/x-editable/post',
  source: '/ajax/x-editable/remote-data'
});


远程获取返回数据类型为数组,包含数据对象的数组,每一个数据对象包含 value 以及 text 参数,如下所示:


[
  { value: '', text: '请选择' },
  { value: 'beijing', text: '北京' },
  { value: 'shanghai', text: '上海' },
  { value: 'zhuangdong', text: '广东' }
]


image.png


combodate 日期

type 为 combodate,除了上述基础参数之外,还有如下特殊的参数设置:


// combodate
$('#enter_date').editable({
  url: '/ajax/x-editable/post',
  format: 'YYYY-MM-DD',
  viewformat: 'YYYY/MM/DD',
  template: 'YYYY MM DD',
  combodate: {
    minYear: 2000,
    maxYear: moment().format('YYYY'),
    minuteStep: 2
  }
});


该类型需要依赖 moment 插件,上面参数 format, viewformat, template 中分别定义了日期格式。



最终效果如下:


image.png


参数传递

发送 name,value 以及 pk,后台通过控制这三个参数,从而达到修改数据的目的。


image.png