【技术】BootStrapTable 行内编辑插件 x-editable，动态设置编辑状态

引言

行内编辑插件用的时候还是在用若依框架。若依内置了行内编辑插件，也给了案例，使用起来还是蛮方便的。
近期遇到个需求，行内编辑时，根据某一列的值，设置另一列的可编辑状态。查了资料，又翻看了源码，在这里总结一下。

插件使用

引用的若依官网的介绍：http://doc.ruoyi.vip/ruoyi/document/zjwd.html#x-editable

• 基于若依框架，页面需要额外引入以下两个资源：

<!-- CSS 样式 -->
<th:block th:include="include :: bootstrap-editable-css" />
<!-- JS 脚本 -->
<th:block th:include="include :: bootstrap-table-editable-js" />

• 常用属性

属性	类型	预设值	说明
ajaxOptions	null	null	提交ajax请求的其他选项 ajaxOptions: { type: 'put', dataType: 'json'}
anim	string	false	动画速度（仅限行内模式）
autotext	string	auto	允许根据元素的值自动设置元素的文本。 可以是auto | always | never。适用于选择和日期。 例如，如果下拉列表为{1：'a'，2：'b'}且元素值设置为1，则其html将自动设置为a。auto -仅当元素为空时，才会自动设置自动文本。always|never -尝试`
defaultValue	string/object	null	若原始字段值为空（null | undefined |''），将在输入中显示的值。
disabled	boolean	false	设置可编辑的禁用状态
display	function/boolean	null	在元素的text中进行value的自定义显示。如果为null，则使用默认输入的显示。如果为false，则不会调用显示方法，元素的文本将不会更改。
emptyclass	string	editable-empty	当可编辑文本为空时应用的CSS类。
emptytext	string	Empty	元素为空时显示的文本。
errorsince	function	null	错误回调。 请求失败时调用（ response status！= 200）。当您想要解析错误响应并显示自定义消息时有用。 返回类型必须为string (要在错误块中显示的消息)。
highlight	string/boolean	#FFFF80	用于在更新后显示高亮元素的颜色。 通过CSS3过渡实现，适用于现代浏览器。
mode	string	popup	编辑模式，可以是popup弹出式或inline行内式
name	string	null	字段名称。 将在服务器上提交。 可以从id属性中获取
onblur	string	cancel	用户在容器外部单击时的操作。 可以cancel|submit|ignore(`取消
params	object/function	null	提交的其他参数。 如果定义为object- 它将附加到原始ajax数据（pk，name和value）。如果定义为 function - 返回的对象将覆盖原始的ajax数据。
pk	string/object/function	null	可编辑对象的主键（例如，数据库中的记录ID）。 对于复合键，使用对象，例如{id：1，lang：'en'}。可以通过函数动态计算。
placement	string	top	容器相对于元素的放置。可以是top|right|bottom|left（`顶部
savenochange	boolean	false	是否在未提交但保存表单时保存或取消。
selector	string	null	如果提供了选择器，则可编辑将委派给指定的目标。对动态生成的DOM元素有效。
send	string	auto	在服务器上发送数据的策略。可以是auto | always | never（`自动
showbuttons	boolean/string	true	显示按钮的位置：left（true）| bottom | false（`左侧
success	function	null	成功回调。 在服务器上成功发送值并且响应状态= 200时调用。用于处理json响应。 例如，如果您的后端响应可以是{success：true}或{success：false，msg：'server error'}，则可以在此回调中检查它。
toggle	string	click	如何切换至编辑模式。click| dblclick | mouseenter | manual(`点击
type	string	text	输入类型。可以是text|textarea|select|date|checklist等
unsavedclass	string	editable-unsaved	存储值但未发送到服务器时应用的CSS（pk为空或send=‘never’）。如果您在本地使用可编辑项并将它们一起提交，则可以将其设置为null。
url	string/function	null	要提交的网址，例如’/post’。如果是函数 - 它将被调用，而不使用ajax。 函数应返回对象以运行失败/完成回调。
validate	function	null	客户端验证的功能。 如果返回字符串 - 表示验证未通过，且会将返回值显示。 从1.5.1开始，您可以通过从validate返回对象来修改提交的值：
value	mixed	element’s text	输入的初始值。 如果未设置，则取自元素的文本。请注意，如果元素的文本为空 - 文本将从值自动生成，可以自定义（请参阅autotext选项）。

• 案例
  具体案例可以参照若依提供的案例：表格行内编辑

动态设置编辑状态

动态设置编辑状态借助了noEditFormatter这个属性，遗憾的时这个属性的用法，若依官网文档并没有给出简介。于是翻看了源码，发现了noEditFormatter的用法，大概意思是：

这个属性的值是一个方法，可以传递(value, row, index)三个参数，和 formatter的用法类似。这就好玩儿了。
当方法的返回值为 false 时，即为可以编辑状态。
其他类型的返回值会被当做HTML展示到表格。

let noEditFormatter = false
const editableOpts = Utils.calculateObjectValue(column,
  column.editable, [index, row], {})

if (editableOpts.hasOwnProperty('noEditFormatter')) {
  noEditFormatter = editableOpts.noEditFormatter(value, row, index)
}

if (noEditFormatter === false) {
  return `<a href="javascript:void(0)"
    data-name="${column.field}"
    data-pk="${row[this.options.idField]}"
    data-value="${result}"
    ${editableDataMarkup.join('')}></a>`
}
return noEditFormatter

话不多说，上代码！截取了部分代码

{
    field: 'progress',
    title: '进度',
    editable : {
        type : 'select', // 编辑的类型为下拉框，根据文档还可以设置其他类型
        title : '进度', // 编辑框的标题
        emptytext: '请选择', // 设置空值时显示的默认值
        // 不能编辑的格式
        // value：当前列的值
        // row：当前行的值
        // index：当前行的下标
        noEditFormatter: function(value, row, index){
            // value（当前列：进度） 等于 5的时候展示普通信息。
            if(value == '5'){
            	// 这里调用的时字典数据，可以参照：http://doc.ruoyi.vip/ruoyi/document/qdsc.html#%E5%AD%97%E5%85%B8%E4%BD%BF%E7%94%A8
                return $.table.selectDictLabel(progressDatas, value);
            }
            // 表中的其他字段为2的时候，可以修改当前列
            if(row.fStart == '2'){
                return false;
            } else {
                return null;
            }
        },
        source : fProgressEditableDatas // 编辑可选的内容
    },
    /*formatter: function(value, row, index) {
       return $.table.selectDictLabel(fProgressDatas, value);
    },*/
},

码字不易，不喜勿喷，如有问题欢迎指正！