bootstrap 可编辑列表，实现某个单元格动态控制是否可编辑状态

bootstrap行内编辑列表的实现可借助x-editable组件，也可借助列的formatter属性通过格式化单元格来达到目的。这里要介绍的是如何动态控制单个单元格的是否可编辑状态。

第一种情况：使用x-editable组件下的动态控制

下面以表格中某一列的初始化代码为例
在editable中添加属性：toggleDisabled（这个属性相当于一个函数，通过传入参数，来控制是否可编辑）

...
{title: '合同名称', field: 'contractName', align: 'center',halign:'center',formatter:function (value, row, index) {return value;},editable: {type: 'text',showbuttons:true,validate: function (v) {if ($.trim(v) == '') {return '合同名称不能为空！';}},toggleDisabled:function(isEnable){if (isEnable){this.enable();// 可编辑} else {this.disabled();// 不可编辑}}}
},
...

下面是控制该单元格是否可编辑的代码，其中关于某个单元格的选择，视具体情况而定

// 可编辑状态
$("#TrackingTable tr[data-index='0'] a[data-name='contractName']").editable('toggleDisabled',true)

// 不可编辑状态
$("#TrackingTable tr[data-index='0'] a[data-name='contractName']").editable('toggleDisabled',false)

第二种情况：使用formatter格式化后的日期单元格

此处以bootstrap datetimepicker插件为例进行说明

...
{title: '合同签订日期', field: 'contractDate', align: 'center',halign:'center',formatter:function (value, row, index) {if(value==undefined){return "<input type='text' value='' class='form-control datetimepicker'>";}else{return "<input type='text' value='"+new Date(value).format("yyyy-MM-dd")+"' class='form-control datetimepicker'>";}}
},
...

// 可编辑状态
$("#TrackingTable tr[data-index='0'] .datetimepicker").prop("disabled", false).datetimepicker()

// 不可编辑状态（为灰色，不可点击）
$("#TrackingTable tr[data-index='0'] .datetimepicker").prop("disabled", true).datetimepicker()

bootstrap 可编辑列表，实现某个单元格动态控制是否可编辑状态相关推荐

【Excel小技巧】如何为Sheet特定区域/单元格设置“密码“/“不可编辑“
目录 1 定义" 允许用户编辑区域" 2 设置" 保护工作表" 3 效果演示 4 如何撤销保护 5 结尾在日常工作中经常遇到以下情况: 在Sheet中,某些单 ...
Markdown编辑表格实现合并单元格、单元格内容换行
Markdown虽然没有合并单元格的语法,但是Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格合并. 跨行合并使用 rowspan 属性跨列合并使用 colspan 属性 ...
dataframe 添加列表到一个单元格并解决报错ValueError: Must have equal len keys and value when setting with an...
报错解析 import pandas as pd import numpy as npdf = pd.DataFrame(np.random.randint(0,10,size=(5, 2)),col ...
一个表格,一部分允许编辑,有公式的单元格不允许编辑
1.全选你工作表中的内容,再选菜单栏中的格式项下的"单元格"项. 2.去掉勾选"保护"项内的"锁定,之后"确定"退出. 3.选定你 ...
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成弹框修改数据
前言这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多,那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里 ...
ppwjs之bootstrap表格：String.到表头单元格元素和 String.到表格单元格元素
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPT html> <html><head><meta http-equ ...
java 编辑excel文件合并单元格边框显示问题
现象: 第12行边框显示不完整. 解决方法: 误区以为不用设置跨掉的单元格 ,第9行是完整单元格,第11行是画了一个格子. 如图: 将单元格数量补全后设置边框样式整个边框就完整了. 实现完整代码: ...
Markdown表格、单元格合并、快速编辑表格
更多Markdown使用技巧,可参考<Markdown使用方法.常用技巧汇总> CommonMark并未定义表格市面上大部分markdown的扩展已经支持表格定义.且遵循一套事实标准. ...
编辑字体、合并单元格
文章目录 1.字体: 1.1颜色 1.1代码: 1.2效果: 2.大小: 2.1代码: 2.2效果: 3.字体: 3.1代码: 3.2效果: 4.综合: 4.1代码: 4.2效果: 2.合并表格 2. ...
iOS UITableView 移除单元格选中时的高亮状态
郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 如果文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额随意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X×××:点我传送在处理UITa ...

bootstrap 可编辑列表，实现某个单元格动态控制是否可编辑状态

第一种情况：使用x-editable组件下的动态控制

第二种情况：使用formatter格式化后的日期单元格

bootstrap 可编辑列表，实现某个单元格动态控制是否可编辑状态相关推荐

最新文章

热门文章